import { Link } from 'react-router-dom';
import { ArrowRight, Clock, Coins } from 'lucide-react';
import type { ExplorerTransaction } from '../lib/types';
import { truncateHash, formatRelativeTime, formatSynor } from '../lib/utils';

interface TransactionListProps {
  transactions: ExplorerTransaction[];
  showHeader?: boolean;
  title?: string;
}

export default function TransactionList({
  transactions,
  showHeader = true,
  title = 'Recent Transactions',
}: TransactionListProps) {
  return (
    <div className="card overflow-hidden">
      {showHeader && (
        <div className="card-header">
          <h2 className="font-semibold flex items-center gap-2">
            <Coins size={18} className="text-synor-400" />
            {title}
          </h2>
        </div>
      )}
      <div className="divide-y divide-gray-800">
        {transactions.map((tx) => (
          <div key={tx.id} className="p-4 hover:bg-gray-800/50 transition-colors">
            <div className="flex items-start justify-between gap-4">
              <div className="flex-1 min-w-0">
                <Link
                  to={`/tx/${tx.id}`}
                  className="font-mono text-sm text-synor-400 hover:text-synor-300"
                >
                  {truncateHash(tx.id)}
                </Link>
                <div className="flex items-center gap-4 mt-2 text-sm">
                  {tx.isCoinbase ? (
                    <span className="badge badge-success">Coinbase</span>
                  ) : (
                    <div className="flex items-center gap-2 text-gray-400">
                      <span>{tx.inputs.length} input{tx.inputs.length !== 1 ? 's' : ''}</span>
                      <ArrowRight size={14} />
                      <span>{tx.outputs.length} output{tx.outputs.length !== 1 ? 's' : ''}</span>
                    </div>
                  )}
                </div>
              </div>
              <div className="text-right">
                <div className="font-mono text-sm text-green-400">
                  {formatSynor(tx.totalOutput, 2)}
                </div>
                {tx.blockTime && (
                  <div className="flex items-center justify-end gap-1 mt-1 text-xs text-gray-500">
                    <Clock size={12} />
                    {formatRelativeTime(tx.blockTime)}
                  </div>
                )}
                {tx.fee > 0 && (
                  <div className="text-xs text-gray-500 mt-1">
                    Fee: {formatSynor(tx.fee, 4)}
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}
        {transactions.length === 0 && (
          <div className="p-8 text-center text-gray-500">
            No transactions found
          </div>
        )}
      </div>
    </div>
  );
}

export function TransactionListSkeleton({ count = 5 }: { count?: number }) {
  return (
    <div className="card overflow-hidden animate-pulse">
      <div className="card-header">
        <div className="h-5 w-40 bg-gray-800 rounded" />
      </div>
      <div className="divide-y divide-gray-800">
        {Array.from({ length: count }).map((_, i) => (
          <div key={i} className="p-4 flex items-start justify-between gap-4">
            <div>
              <div className="h-4 w-40 bg-gray-800 rounded mb-2" />
              <div className="h-3 w-24 bg-gray-800 rounded" />
            </div>
            <div className="text-right">
              <div className="h-4 w-24 bg-gray-800 rounded mb-1" />
              <div className="h-3 w-16 bg-gray-800 rounded" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
