import { Link } from 'react-router-dom';
import { Box, Clock, FileText, Sparkles } from 'lucide-react';
import type { ExplorerBlock } from '../lib/types';
import { truncateHash, formatRelativeTime, cn } from '../lib/utils';

interface BlockListProps {
  blocks: ExplorerBlock[];
  showHeader?: boolean;
  highlightHash?: string | null;
}

export default function BlockList({ blocks, showHeader = true, highlightHash }: BlockListProps) {
  return (
    <div className="card overflow-hidden">
      {showHeader && (
        <div className="card-header flex items-center justify-between">
          <h2 className="font-semibold flex items-center gap-2">
            <Box size={18} className="text-synor-400" />
            Recent Blocks
          </h2>
          <Link to="/blocks" className="link text-sm">
            View all
          </Link>
        </div>
      )}
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="text-left text-sm text-gray-400 border-b border-gray-800">
              <th className="px-4 py-3 font-medium">Block</th>
              <th className="px-4 py-3 font-medium hidden sm:table-cell">Blue Score</th>
              <th className="px-4 py-3 font-medium hidden md:table-cell">Txs</th>
              <th className="px-4 py-3 font-medium text-right">Time</th>
            </tr>
          </thead>
          <tbody>
            {blocks.map((block) => {
              const isHighlighted = block.hash === highlightHash;
              return (
                <tr
                  key={block.hash}
                  className={cn(
                    'table-row transition-all duration-500',
                    isHighlighted && 'bg-synor-500/20 animate-pulse'
                  )}
                >
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-2">
                      {isHighlighted && (
                        <Sparkles size={14} className="text-synor-400 animate-spin" />
                      )}
                      <Link
                        to={`/block/${block.hash}`}
                        className={cn(
                          'font-mono text-sm hover:text-synor-300 transition-colors',
                          isHighlighted ? 'text-synor-300 font-semibold' : 'text-synor-400'
                        )}
                      >
                        {truncateHash(block.hash)}
                      </Link>
                    </div>
                    <div className="text-xs text-gray-500 mt-0.5 sm:hidden">
                      Blue: {block.blueScore.toLocaleString()}
                    </div>
                  </td>
                  <td className="px-4 py-3 hidden sm:table-cell">
                    <span className={cn(
                      'text-sm',
                      isHighlighted && 'text-synor-300 font-semibold'
                    )}>
                      {block.blueScore.toLocaleString()}
                    </span>
                  </td>
                  <td className="px-4 py-3 hidden md:table-cell">
                    <span className="flex items-center gap-1 text-sm text-gray-400">
                      <FileText size={14} />
                      {block.transactionCount}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-right">
                    <span className="flex items-center justify-end gap-1 text-sm text-gray-400">
                      <Clock size={14} />
                      {formatRelativeTime(block.timestamp)}
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export function BlockListSkeleton({ count = 5 }: { count?: number }) {
  return (
    <div className="card overflow-hidden animate-pulse">
      <div className="card-header flex items-center justify-between">
        <div className="h-5 w-32 bg-gray-800 rounded" />
        <div className="h-4 w-16 bg-gray-800 rounded" />
      </div>
      <div className="divide-y divide-gray-800">
        {Array.from({ length: count }).map((_, i) => (
          <div key={i} className="px-4 py-3 flex items-center justify-between">
            <div className="h-4 w-32 bg-gray-800 rounded" />
            <div className="h-4 w-16 bg-gray-800 rounded hidden sm:block" />
            <div className="h-4 w-12 bg-gray-800 rounded" />
          </div>
        ))}
      </div>
    </div>
  );
}
