import React from "react";
import {
  Globe,
  RefreshCw,
  ExternalLink,
  ShieldCheck,
  ShieldAlert,
  Clock,
  AlertTriangle,
  XCircle,
  CheckCircle2,
  Mail,
  MoreVertical,
  Zap,
  Info,
  Server,
} from "lucide-react";
import { ClientSite } from "../types";
import { wpAdminUrl } from "../utils";

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

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

  // Determine status color scheme
  let borderClass = "border-slate-800 hover:border-slate-700";
  let badgeClass = "bg-slate-800 text-slate-300 border-slate-700";
  let statusText = "Belum Disemak";
  let StatusIcon = Clock;

  if (isChecking) {
    borderClass = "border-blue-500/60 shadow-md shadow-blue-500/10";
    badgeClass =
      "bg-blue-500/20 text-blue-300 border-blue-500/40 animate-pulse";
    statusText = "Menyemak...";
    StatusIcon = RefreshCw;
  } else if (result) {
    switch (result.status) {
      case "online":
        borderClass =
          "border-emerald-900/60 hover:border-emerald-600/70 shadow-sm";
        badgeClass = "bg-emerald-500/20 text-emerald-300 border-emerald-500/40";
        statusText = `Online (HTTP ${result.statusCode})`;
        StatusIcon = CheckCircle2;
        break;
      case "down":
        borderClass =
          "border-red-600/80 bg-red-950/20 shadow-md shadow-red-950/30";
        badgeClass = "bg-red-500/20 text-red-300 border-red-500/50";
        statusText = result.statusCode
          ? `Down (HTTP ${result.statusCode})`
          : "Web Down / Terputus";
        StatusIcon = XCircle;
        break;
      case "error":
        borderClass =
          "border-amber-600/80 bg-amber-950/20 shadow-md shadow-amber-950/20";
        badgeClass = "bg-amber-500/20 text-amber-300 border-amber-500/50";
        statusText = "Ralat website";
        StatusIcon = AlertTriangle;
        break;
      case "unknown":
        statusText = "Belum dapat disahkan";
        StatusIcon = Clock;
        break;
      case "warning":
        borderClass = "border-yellow-600/60 bg-yellow-950/10";
        badgeClass = "bg-yellow-500/20 text-yellow-300 border-yellow-500/40";
        statusText = "Amaran";
        StatusIcon = AlertTriangle;
        break;
    }
  }

  // Latency color
  const latency = result?.responseTimeMs || 0;
  const latencyBadgeColor =
    latency === 0
      ? "text-slate-500"
      : latency < 600
        ? "text-emerald-400 bg-emerald-500/10 border-emerald-500/30"
        : latency < 1500
          ? "text-amber-400 bg-amber-500/10 border-amber-500/30"
          : "text-red-400 bg-red-500/10 border-red-500/30";

  // Format Package Label
  const packageLabels: Record<string, string> = {
    care_plan: "Care Plan",
    hosting_only: "Hosting Only",
    standard: "Standard",
    vip: "VIP Client",
  };

  const cleanDisplayUrl = site.url
    .replace(/^https?:\/\//, "")
    .replace(/\/$/, "");

  return (
    <div
      className={`bg-slate-900 rounded-xl border ${borderClass} p-4 transition-all duration-200 flex flex-col justify-between group relative overflow-hidden`}
    >
      {/* Top row: Status & Actions */}
      <div>
        <div className="flex items-start justify-between gap-2 mb-2">
          {/* Status Badge */}
          <div
            className={`flex items-center space-x-1.5 px-2.5 py-1 rounded-full text-xs font-medium border ${badgeClass}`}
          >
            <StatusIcon
              className={`w-3.5 h-3.5 ${isChecking ? "animate-spin" : ""}`}
            />
            <span>{statusText}</span>
          </div>

          {/* Quick Action Buttons */}
          <div className="flex items-center space-x-1">
            <button
              onClick={() => onCheck(site)}
              disabled={isChecking}
              title="Semak status laman web sekarang"
              className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors disabled:opacity-50"
            >
              <RefreshCw
                className={`w-4 h-4 ${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-800 rounded-lg transition-colors"
            >
              <Mail className="w-4 h-4" />
            </button>
            <button
              onClick={() => onViewDetails(site)}
              title="Lihat butiran kesihatan & diagnostik"
              className="p-1.5 text-slate-400 hover:text-blue-400 hover:bg-slate-800 rounded-lg transition-colors"
            >
              <Info className="w-4 h-4" />
            </button>
          </div>
        </div>

        {/* Site Title & URL */}
        <div className="mt-1">
          <div className="flex items-center justify-between">
            <h3
              className="font-semibold text-white text-base truncate group-hover:text-blue-300 transition-colors"
              title={site.name}
            >
              {site.name}
            </h3>
            <span className="text-[10px] uppercase font-semibold px-1.5 py-0.5 rounded bg-slate-800 text-slate-400 border border-slate-700">
              {packageLabels[site.packageType] || site.packageType}
            </span>
          </div>

          <div className="flex items-center space-x-1.5 text-xs text-slate-400 mt-1">
            <Globe className="w-3.5 h-3.5 text-slate-500 shrink-0" />
            <a
              href={site.url}
              target="_blank"
              rel="noreferrer"
              className="truncate hover:text-cyan-400 hover:underline flex items-center gap-1 font-mono text-[11px]"
            >
              <span>{cleanDisplayUrl}</span>
              <ExternalLink className="w-3 h-3 shrink-0 opacity-70" />
            </a>
          </div>

          {/* Client Name & Hosting info */}
          <div className="flex items-center justify-between text-xs text-slate-400 mt-2 pt-2 border-t border-slate-800/80">
            <span className="truncate">
              Klien:{" "}
              <strong className="text-slate-300">{site.clientName}</strong>
            </span>
            {site.hostingProvider && (
              <span
                className="text-[11px] text-slate-500 truncate max-w-[120px]"
                title={site.hostingProvider}
              >
                {site.hostingProvider}
              </span>
            )}
          </div>
        </div>

        {/* Error Alert Box inside Card (If Down/Error) */}
        {result && (result.status === "down" || result.status === "error") && (
          <div className="mt-3 p-2.5 rounded-lg bg-red-950/40 border border-red-800/60 text-xs text-red-200">
            <div className="flex items-start space-x-2">
              <AlertTriangle className="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
              <div className="overflow-hidden">
                <span className="font-semibold text-red-300 block">
                  {result.wpErrorType
                    ? `Isu: ${result.wpErrorType.toUpperCase()}`
                    : "Gangguan Dikesan"}
                </span>
                <p className="text-[11px] text-red-300/90 line-clamp-2 mt-0.5">
                  {result.wpErrorMessage}
                </p>
              </div>
            </div>
          </div>
        )}

        {site.maintenanceUntil &&
          Date.parse(site.maintenanceUntil) > Date.now() && (
            <p className="text-xs text-amber-300 mt-2">
              Maintenance: alert disenyapkan.
            </p>
          )}
        {result?.warnings?.length ? (
          <p className="text-xs text-amber-300 mt-2 line-clamp-2">
            {result.warnings.join(" ")}
          </p>
        ) : null}
        {/* Metrics Grid */}
        <div className="mt-3 grid grid-cols-3 gap-1.5 text-[11px] font-mono">
          {/* Latency */}
          <div
            className={`p-1.5 rounded-md border flex flex-col items-center justify-center text-center ${latencyBadgeColor}`}
          >
            <span className="text-[9px] uppercase tracking-wider text-slate-400">
              Respon
            </span>
            <span className="font-bold">
              {latency > 0 ? `${latency}ms` : "—"}
            </span>
          </div>

          {/* SSL Status */}
          <div
            className={`p-1.5 rounded-md border flex flex-col items-center justify-center text-center ${
              !result
                ? "text-slate-500 border-slate-800 bg-slate-800/40"
                : result.ssl?.valid
                  ? "text-emerald-400 bg-emerald-500/10 border-emerald-500/30"
                  : "text-red-400 bg-red-500/10 border-red-500/30"
            }`}
          >
            <span className="text-[9px] uppercase tracking-wider text-slate-400">
              SSL
            </span>
            <span className="font-bold truncate max-w-full">
              {!result
                ? "—"
                : result.ssl?.valid
                  ? `${result.ssl.daysRemaining ?? "OK"} hari`
                  : result.ssl?.checked === false
                    ? "Belum sah"
                    : "Tidak sah"}
            </span>
          </div>

          {/* WP REST API */}
          <div
            className={`p-1.5 rounded-md border flex flex-col items-center justify-center text-center ${
              !result
                ? "text-slate-500 border-slate-800 bg-slate-800/40"
                : result.restApiStatus === "healthy"
                  ? "text-blue-400 bg-blue-500/10 border-blue-500/30"
                  : result.restApiStatus === "blocked"
                    ? "text-amber-400 bg-amber-500/10 border-amber-500/30"
                    : "text-slate-400 border-slate-800 bg-slate-800/40"
            }`}
          >
            <span className="text-[9px] uppercase tracking-wider text-slate-400">
              WP REST
            </span>
            <span className="font-bold truncate max-w-full">
              {!result
                ? "—"
                : result.restApiStatus === "healthy"
                  ? "OK"
                  : result.restApiStatus}
            </span>
          </div>
        </div>
      </div>

      {/* Footer: Bottom action links */}
      <div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-400">
        <span className="text-[11px] text-slate-500">
          {result?.checkedAt
            ? `Disemak ${new Date(result.checkedAt).toLocaleString("ms-MY", { timeZone: "Asia/Kuala_Lumpur", day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })}`
            : "Belum disemak"}
        </span>

        <div className="flex items-center space-x-2">
          <a
            href={wpAdminUrl(site)}
            target="_blank"
            rel="noreferrer"
            className="text-[11px] text-slate-400 hover:text-white px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 transition-colors"
          >
            wp-admin
          </a>
          <button
            onClick={() => onEdit(site)}
            className="text-[11px] text-slate-400 hover:text-slate-200"
          >
            Edit
          </button>
          <button
            onClick={() => onDelete(site.id)}
            className="text-[11px] text-red-400/80 hover:text-red-300"
          >
            Padam
          </button>
        </div>
      </div>
    </div>
  );
};