function CountCell({ count }) {
  let color = 'text-ap-silver';
  if (count > 200) color = 'text-ap-red font-bold';
  else if (count > 100) color = 'text-ap-orange font-bold';

  return (
    <td className="px-3 py-2 border-b border-white/5">
      <span className={`font-mono text-xs tabular-nums ${color}`}>
        {count.toLocaleString()}
      </span>
    </td>
  );
}

function StatusBadge({ blocked }) {
  if (blocked) {
    return (
      <span className="text-[10px] px-1.5 py-0.5 font-mono font-bold uppercase bg-ap-green/20 text-ap-green select-none">
        Blocked
      </span>
    );
  }

  return (
    <span className="text-[10px] px-1.5 py-0.5 font-mono font-bold uppercase bg-ap-red/20 text-ap-red select-none">
      Active
    </span>
  );
}

export default function TopThreats({ threats = [] }) {
  return (
    <div className="panel h-full flex flex-col">
      {/* Panel header */}
      <div className="panel-header">
        <span className="dot" />
        <span>Top Threat Sources</span>
      </div>

      {/* Table area */}
      <div className="flex-1 overflow-y-auto">
        {threats.length === 0 ? (
          <div className="px-3 py-6 text-center font-mono text-xs text-ap-silver-dim">
            No threat data
          </div>
        ) : (
          <table className="w-full font-mono text-xs">
            <thead>
              <tr>
                <th className="text-left px-3 py-2 text-ap-silver-dim text-[10px] uppercase tracking-wider border-b border-white/10 bg-ap-dark sticky top-0">
                  IP
                </th>
                <th className="text-left px-3 py-2 text-ap-silver-dim text-[10px] uppercase tracking-wider border-b border-white/10 bg-ap-dark sticky top-0">
                  Country
                </th>
                <th className="text-left px-3 py-2 text-ap-silver-dim text-[10px] uppercase tracking-wider border-b border-white/10 bg-ap-dark sticky top-0">
                  Attack Type
                </th>
                <th className="text-left px-3 py-2 text-ap-silver-dim text-[10px] uppercase tracking-wider border-b border-white/10 bg-ap-dark sticky top-0">
                  Count
                </th>
                <th className="text-left px-3 py-2 text-ap-silver-dim text-[10px] uppercase tracking-wider border-b border-white/10 bg-ap-dark sticky top-0">
                  Status
                </th>
              </tr>
            </thead>
            <tbody>
              {threats.map((threat) => (
                <tr
                  key={threat.ip}
                  className="hover:bg-white/5 transition-colors cursor-default"
                >
                  {/* IP */}
                  <td className="px-3 py-2 border-b border-white/5">
                    <span className="text-ap-silver font-medium whitespace-nowrap">
                      {threat.ip}
                    </span>
                  </td>

                  {/* Country */}
                  <td className="px-3 py-2 border-b border-white/5">
                    <span
                      className="text-ap-silver-dim uppercase"
                      title={threat.countryName}
                    >
                      {threat.country}
                    </span>
                  </td>

                  {/* Attack Type */}
                  <td className="px-3 py-2 border-b border-white/5">
                    <span
                      className="block max-w-[140px] truncate text-ap-silver"
                      title={threat.attackType}
                    >
                      {threat.attackType}
                    </span>
                  </td>

                  {/* Count */}
                  <CountCell count={threat.count} />

                  {/* Status */}
                  <td className="px-3 py-2 border-b border-white/5">
                    <StatusBadge blocked={threat.blocked} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}
