import React from "react";
import {
  RefreshCw,
  ExternalLink,
  CheckCircle2,
  XCircle,
  AlertTriangle,
  Clock,
  Mail,
  Info,
  Edit3,
  Trash2,
} from "lucide-react";
import { ClientSite } from "../types";

interface SiteTableRowProps {
  site: ClientSite;
  onCheck: (site: ClientSite) => void;
  onViewDetails: (site: ClientSite) => void;
  onSendAlert: (site: ClientSite) => void;
  onEdit: (site: ClientSite) => void;
  onDelete: (siteId: string) => void;
}

export const SiteTableRow: React.FC<SiteTableRowProps> = ({
  site,
  onCheck,
  onViewDetails,
  onSendAlert,
  onEdit,
  onDelete,
}) => {
  const result = site.lastResult;
  const isChecking = site.isChecking;

  let StatusBadge = (
    <span className="inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-800 text-slate-400 border border-slate-700">
      <Clock className="w-3 h-3" />
      <span>Belum</span>
    </span>
  );

  if (isChecking) {
    StatusBadge = (
      <span className="inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-500/20 text-blue-300 border border-blue-500/40 animate-pulse">
        <RefreshCw className="w-3 h-3 animate-spin" />
        <span>Menyemak...</span>
      </span>
    );
  } else if (result) {
    if (result.status === "online") {
      StatusBadge = (
        <span className="inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/20 text-emerald-300 border border-emerald-500/40">
          <CheckCircle2 className="w-3 h-3" />
          <span>Online ({result.statusCode})</span>
        </span>
      );
    } else if (result.status === "down") {
      StatusBadge = (
        <span className="inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-500/20 text-red-300 border border-red-500/40">
          <XCircle className="w-3 h-3" />
          <span>Down {result.statusCode ? `(${result.statusCode})` : ""}</span>
        </span>
      );
    } else if (result.status === "error") {
      StatusBadge = (
        <span className="inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-500/20 text-amber-300 border border-amber-500/40">
          <AlertTriangle className="w-3 h-3" />
          <span>Ralat web</span>
        </span>
      );
    } else {
      StatusBadge = (
        <span className="inline-flex items-center space-x-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-500/20 text-yellow-300 border border-yellow-500/40">
          <AlertTriangle className="w-3 h-3" />
          <span>{result.status === "unknown" ? "Belum sah" : "Amaran"}</span>
        </span>
      );
    }
  }

  const latency = result?.responseTimeMs || 0;

  return (
    <tr className="hover:bg-slate-800/40 border-b border-slate-800/70 transition-colors">
      {/* Site & URL */}
      <td className="py-3 px-4">
        <div>
          <div
            className="font-semibold text-white text-sm hover:text-blue-400 cursor-pointer"
            onClick={() => onViewDetails(site)}
          >
            {site.name}
          </div>
          <a
            href={site.url}
            target="_blank"
            rel="noreferrer"
            className="text-xs text-slate-400 hover:text-cyan-400 flex items-center space-x-1 font-mono mt-0.5"
          >
            <span className="truncate max-w-[200px]">
              {site.url.replace(/^https?:\/\//, "")}
            </span>
            <ExternalLink className="w-3 h-3 shrink-0 opacity-70" />
          </a>
        </div>
      </td>

      {/* Client Info */}
      <td className="py-3 px-4 text-xs text-slate-300">
        <div>{site.clientName}</div>
        <span className="text-[10px] text-slate-500 uppercase">
          {site.packageType}
        </span>
      </td>

      {/* Status */}
      <td className="py-3 px-4">{StatusBadge}</td>

      {/* Latency */}
      <td className="py-3 px-4 text-xs font-mono">
        {latency > 0 ? (
          <span
            className={
              latency < 600
                ? "text-emerald-400"
                : latency < 1500
                  ? "text-amber-400"
                  : "text-red-400"
            }
          >
            {latency} ms
          </span>
        ) : (
          <span className="text-slate-500">—</span>
        )}
      </td>

      {/* SSL Status */}
      <td className="py-3 px-4 text-xs font-mono">
        {result?.ssl ? (
          result.ssl.valid ? (
            <span className="text-emerald-400">
              {result.ssl.daysRemaining !== undefined
                ? `${result.ssl.daysRemaining} hari`
                : "Sah"}
            </span>
          ) : (
            <span className="text-red-400">
              {result.ssl.checked === false ? "Belum disahkan" : "Tidak sah"}
            </span>
          )
        ) : (
          <span className="text-slate-500">—</span>
        )}
      </td>

      {/* WP REST */}
      <td className="py-3 px-4 text-xs">
        {result ? (
          result.restApiStatus === "healthy" ? (
            <span className="text-blue-400 font-mono text-[11px]">
              Aktif (200)
            </span>
          ) : result.restApiStatus === "blocked" ? (
            <span className="text-amber-400 font-mono text-[11px]">
              Disekat ({result.restApiCode})
            </span>
          ) : (
            <span className="text-slate-500 font-mono text-[11px]">
              {result.restApiStatus}
            </span>
          )
        ) : (
          <span className="text-slate-500">—</span>
        )}
      </td>

      {/* Actions */}
      <td className="py-3 px-4 text-right">
        <div className="flex items-center justify-end space-x-1">
          <button
            onClick={() => onCheck(site)}
            disabled={isChecking}
            title="Semak sekarang"
            className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700 rounded transition-colors disabled:opacity-50"
          >
            <RefreshCw
              className={`w-3.5 h-3.5 ${isChecking ? "animate-spin text-blue-400" : ""}`}
            />
          </button>
          <button
            onClick={() => onSendAlert(site)}
            title="Hantar notifikasi ke emel admin yang disimpan"
            className="p-1.5 text-slate-400 hover:text-amber-400 hover:bg-slate-700 rounded transition-colors"
          >
            <Mail className="w-3.5 h-3.5" />
          </button>
          <button
            onClick={() => onViewDetails(site)}
            title="Diagnostik kesihatan"
            className="p-1.5 text-slate-400 hover:text-blue-400 hover:bg-slate-700 rounded transition-colors"
          >
            <Info className="w-3.5 h-3.5" />
          </button>
          <button
            onClick={() => onEdit(site)}
            title="Edit maklumat"
            className="p-1.5 text-slate-400 hover:text-slate-200 hover:bg-slate-700 rounded transition-colors"
          >
            <Edit3 className="w-3.5 h-3.5" />
          </button>
          <button
            onClick={() => onDelete(site.id)}
            title="Padam laman web"
            className="p-1.5 text-slate-400 hover:text-red-400 hover:bg-slate-700 rounded transition-colors"
          >
            <Trash2 className="w-3.5 h-3.5" />
          </button>
        </div>
      </td>
    </tr>
  );
};