import React from "react";
import {
  X,
  ExternalLink,
  ShieldCheck,
  ShieldAlert,
  Clock,
  AlertTriangle,
  CheckCircle2,
  XCircle,
  Mail,
  RefreshCw,
  Server,
  Terminal,
  HelpCircle,
} from "lucide-react";
import { ClientSite } from "../types";
import { HistoryPanel } from "./HistoryPanel";
import { wpAdminUrl } from "../utils";

interface SiteDetailModalProps {
  site: ClientSite | null;
  onClose: () => void;
  onCheck: (site: ClientSite) => void;
  onSendAlert: (site: ClientSite) => void;
  adminEmail: string;
}

export const SiteDetailModal: React.FC<SiteDetailModalProps> = ({
  site,
  onClose,
  onCheck,
  onSendAlert,
  adminEmail,
}) => {
  if (!site) return null;

  const result = site.lastResult;
  const isChecking = site.isChecking;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm overflow-y-auto">
      <div className="relative w-full max-w-2xl bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl overflow-hidden my-8 animate-in fade-in zoom-in-95 duration-150">
        {/* Modal Header */}
        <div className="p-6 border-b border-slate-800 bg-slate-900/60 flex items-start justify-between">
          <div>
            <div className="flex items-center space-x-2">
              <h2 className="text-xl font-bold text-white">{site.name}</h2>
              {result && (
                <span
                  className={`text-xs px-2.5 py-0.5 rounded-full font-medium border ${
                    result.status === "online"
                      ? "bg-emerald-500/20 text-emerald-300 border-emerald-500/40"
                      : result.status === "down"
                        ? "bg-red-500/20 text-red-300 border-red-500/40"
                        : "bg-amber-500/20 text-amber-300 border-amber-500/40"
                  }`}
                >
                  {result.status === "online"
                    ? `ONLINE (${result.statusCode})`
                    : result.status === "down"
                      ? `DOWN (${result.statusCode || "Tiada Respon"})`
                      : result.status === "unknown"
                        ? "BELUM DAPAT DISAHKAN"
                        : result.status === "warning"
                          ? "AMARAN"
                          : "RALAT DIKESAN"}
                </span>
              )}
            </div>
            <a
              href={site.url}
              target="_blank"
              rel="noreferrer"
              className="text-xs text-blue-400 hover:text-blue-300 flex items-center space-x-1 mt-1 font-mono"
            >
              <span>{site.url}</span>
              <ExternalLink className="w-3.5 h-3.5" />
            </a>
          </div>

          <button
            onClick={onClose}
            className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Modal Body */}
        <div className="p-6 space-y-6 max-h-[75vh] overflow-y-auto">
          {/* Action Toolbar */}
          <div className="flex flex-wrap gap-2.5 items-center justify-between bg-slate-800/40 p-3 rounded-xl border border-slate-800">
            <div className="flex flex-wrap gap-2">
              <button
                onClick={() => onCheck(site)}
                disabled={isChecking}
                className="flex items-center space-x-1.5 px-3 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-xs font-medium transition-colors disabled:opacity-50"
              >
                <RefreshCw
                  className={`w-3.5 h-3.5 ${isChecking ? "animate-spin" : ""}`}
                />
                <span>
                  {isChecking ? "Sedang Menyemak..." : "Semak Semula"}
                </span>
              </button>

              <button
                onClick={() => onSendAlert(site)}
                className="flex items-center space-x-1.5 px-3 py-1.5 rounded-lg bg-red-600/80 hover:bg-red-600 text-white text-xs font-medium transition-colors"
              >
                <Mail className="w-3.5 h-3.5" />
                <span>Hantar Notis Emel ke {adminEmail}</span>
              </button>
            </div>

            <div className="flex items-center space-x-2">
              <a
                href={wpAdminUrl(site)}
                target="_blank"
                rel="noreferrer"
                className="text-xs px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 flex items-center space-x-1"
              >
                <span>Buka /wp-admin</span>
                <ExternalLink className="w-3 h-3 text-slate-400" />
              </a>
            </div>
          </div>

          {/* WordPress Diagnostic Analysis */}
          <div>
            <h3 className="text-sm font-semibold text-white mb-3 flex items-center space-x-2">
              <Terminal className="w-4 h-4 text-cyan-400" />
              <span>Hasil Semakan & Diagnostik WordPress</span>
            </h3>

            {result ? (
              <div className="space-y-3">
                {/* Error Banner if any */}
                {(result.status === "down" || result.status === "error") && (
                  <div className="p-4 rounded-xl bg-red-950/40 border border-red-800/80 text-red-200">
                    <div className="flex items-start space-x-3">
                      <AlertTriangle className="w-5 h-5 text-red-400 shrink-0 mt-0.5" />
                      <div>
                        <h4 className="font-semibold text-white text-sm">
                          {result.wpErrorType
                            ? `Ralat: ${result.wpErrorType.toUpperCase()}`
                            : "Laman Web Tergendala"}
                        </h4>
                        <p className="text-xs text-red-300 mt-1 leading-relaxed">
                          {result.wpErrorMessage}
                        </p>

                        {/* Practical Troubleshooting Guide */}
                        <div className="mt-3 pt-3 border-t border-red-900/60 text-xs text-slate-300">
                          <strong className="text-white block mb-1">
                            Cadangan Tindakan Pembaikan:
                          </strong>
                          <p className="text-slate-300">
                            Sahkan gangguan dengan membuka website dan menyemak
                            log hosting/PHP. Ambil backup sebelum mengubah
                            konfigurasi, plugin atau fail maintenance.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

                {/* Key Metrics Grid */}
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                  <div className="p-3 rounded-xl bg-slate-800/40 border border-slate-800">
                    <span className="text-[11px] text-slate-400 block">
                      HTTP Status
                    </span>
                    <span className="text-base font-bold text-white font-mono mt-0.5 block">
                      {result.statusCode
                        ? `${result.statusCode} ${result.statusText}`
                        : "Tiada Respon"}
                    </span>
                  </div>

                  <div className="p-3 rounded-xl bg-slate-800/40 border border-slate-800">
                    <span className="text-[11px] text-slate-400 block">
                      Kelajuan Respon
                    </span>
                    <span className="text-base font-bold text-white font-mono mt-0.5 block">
                      {result.responseTimeMs > 0
                        ? `${result.responseTimeMs} ms`
                        : "—"}
                    </span>
                  </div>

                  <div className="p-3 rounded-xl bg-slate-800/40 border border-slate-800">
                    <span className="text-[11px] text-slate-400 block">
                      WP REST API
                    </span>
                    <span className="text-base font-bold text-white font-mono mt-0.5 block capitalize">
                      {result.restApiStatus === "healthy"
                        ? "🟢 Berfungsi"
                        : result.restApiStatus === "blocked"
                          ? "Disekat"
                          : result.restApiStatus === "unknown"
                            ? "Belum disahkan"
                            : "Ralat"}
                    </span>
                  </div>

                  <div className="p-3 rounded-xl bg-slate-800/40 border border-slate-800">
                    <span className="text-[11px] text-slate-400 block">
                      Versi WordPress
                    </span>
                    <span className="text-base font-bold text-white font-mono mt-0.5 block">
                      {result.wpVersion
                        ? `v${result.wpVersion}`
                        : result.isWordPress
                          ? "WordPress dikesan"
                          : "Belum dikesan"}
                    </span>
                  </div>
                </div>

                {/* SSL Certificate Details */}
                <div className="p-4 rounded-xl bg-slate-800/40 border border-slate-800 flex items-start space-x-3">
                  {result.ssl?.valid ? (
                    <ShieldCheck className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />
                  ) : (
                    <ShieldAlert className="w-5 h-5 text-red-400 shrink-0 mt-0.5" />
                  )}
                  <div className="text-xs space-y-1">
                    <div className="font-semibold text-white flex items-center gap-2">
                      <span>Sijil Keselamatan SSL / HTTPS</span>
                      {result.ssl?.valid ? (
                        <span className="text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">
                          Aktif & Sah ({result.ssl.daysRemaining ?? "OK"} hari
                          baki)
                        </span>
                      ) : (
                        <span className="text-red-400 bg-red-500/10 px-2 py-0.5 rounded border border-red-500/20">
                          {result.ssl?.checked === false
                            ? "Belum disahkan"
                            : "Tidak sah"}
                        </span>
                      )}
                    </div>
                    <div className="text-slate-400 flex flex-wrap gap-x-4">
                      {result.ssl?.issuer && (
                        <span>Pengeluar: {result.ssl.issuer}</span>
                      )}
                      {result.ssl?.validTo && (
                        <span>Tarikh Luput: {result.ssl.validTo}</span>
                      )}
                      {result.ssl?.error && (
                        <span className="text-red-300">
                          Ralat: {result.ssl.error}
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              <div className="p-6 text-center text-slate-400 bg-slate-800/20 rounded-xl border border-dashed border-slate-800">
                Laman web ini belum disemak lagi. Klik &quot;Semak Semula&quot;
                untuk menguji status terkini.
              </div>
            )}
          </div>

          <HistoryPanel site={site} />
          {result?.warnings?.length ? (
            <p className="text-sm text-amber-300">
              {result.warnings.join(" ")}
            </p>
          ) : null}
          {result?.status === "unknown" ? (
            <p className="text-sm text-slate-300">{result.wpErrorMessage}</p>
          ) : null}
          {/* Client & Project Info */}
          <div>
            <h3 className="text-sm font-semibold text-white mb-3 flex items-center space-x-2">
              <Server className="w-4 h-4 text-indigo-400" />
              <span>Maklumat Klien & Penyelenggaraan</span>
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
              <div className="p-3 rounded-xl bg-slate-800/30 border border-slate-800 space-y-1">
                <span className="text-slate-400">Nama Klien / Syarikat:</span>
                <p className="font-medium text-white">{site.clientName}</p>
                {site.clientPhone && (
                  <p className="text-slate-400">
                    No Tel:{" "}
                    <a
                      href={`tel:${site.clientPhone}`}
                      className="text-blue-400"
                    >
                      {site.clientPhone}
                    </a>
                  </p>
                )}
                {site.clientEmail && (
                  <p className="text-slate-400">
                    Emel:{" "}
                    <a
                      href={`mailto:${site.clientEmail}`}
                      className="text-blue-400"
                    >
                      {site.clientEmail}
                    </a>
                  </p>
                )}
              </div>

              <div className="p-3 rounded-xl bg-slate-800/30 border border-slate-800 space-y-1">
                <span className="text-slate-400">Pakej & Hosting:</span>
                <p className="font-medium text-white capitalize">
                  Pakej:{" "}
                  <span className="text-cyan-400">
                    {site.packageType.replace("_", " ")}
                  </span>
                </p>
                <p className="text-slate-400">
                  Kategori: <span className="capitalize">{site.category}</span>
                </p>
                {site.hostingProvider && (
                  <p className="text-slate-400">
                    Hosting:{" "}
                    <span className="text-slate-200">
                      {site.hostingProvider}
                    </span>
                  </p>
                )}
              </div>
            </div>

            {site.notes && (
              <div className="mt-3 p-3 rounded-xl bg-slate-800/20 border border-slate-800/80 text-xs">
                <span className="text-slate-400 font-medium block mb-1">
                  Nota Klien:
                </span>
                <p className="text-slate-300 leading-relaxed whitespace-pre-wrap">
                  {site.notes}
                </p>
              </div>
            )}
          </div>
        </div>

        {/* Modal Footer */}
        <div className="p-4 border-t border-slate-800 bg-slate-900/60 flex items-center justify-between">
          <span className="text-xs text-slate-500">
            {result?.checkedAt &&
              `Terakhir dikemas kini: ${new Date(result.checkedAt).toLocaleString("ms-MY", { timeZone: "Asia/Kuala_Lumpur" })}`}
          </span>
          <button
            onClick={onClose}
            className="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-white text-xs font-medium transition-colors"
          >
            Tutup
          </button>
        </div>
      </div>
    </div>
  );
};