import React, { useState } from "react";
import { 
  SaaSTenant, 
  SaaSDomainConfig, 
  SaaSDomainStatus, 
  DnsRecord, 
  SaaSEmailNotification,
  Employee 
} from "../../types";
import { buildDomainProvisioningEmailTemplate } from "../../data/saasTicketsAndOpsData";
import { 
  Globe, 
  Server, 
  ShieldCheck, 
  Activity, 
  RefreshCw, 
  CheckCircle2, 
  Clock, 
  AlertCircle, 
  Play, 
  Mail, 
  ExternalLink, 
  Copy, 
  Check, 
  Search, 
  Plus, 
  Cpu, 
  Terminal, 
  Sliders, 
  Radio,
  Layers,
  ArrowRight
} from "lucide-react";

interface SaasItDomainDeskProps {
  tenants: SaaSTenant[];
  domains: SaaSDomainConfig[];
  onUpdateDomains: (updated: SaaSDomainConfig[]) => void;
  onDispatchEmail: (email: SaaSEmailNotification) => void;
  onOpenEmailOutbox: (preselectedId?: string) => void;
  currentUser?: Employee;
}

export const SaasItDomainDesk: React.FC<SaasItDomainDeskProps> = ({
  tenants,
  domains,
  onUpdateDomains,
  onDispatchEmail,
  onOpenEmailOutbox,
  currentUser
}) => {
  const [searchQuery, setSearchQuery] = useState("");
  const [filterStatus, setFilterStatus] = useState<string>("ALL");
  const [selectedDomain, setSelectedDomain] = useState<SaaSDomainConfig | null>(null);
  const [isProvisioningModalOpen, setIsProvisioningModalOpen] = useState(false);
  const [isNewDomainModalOpen, setIsNewDomainModalOpen] = useState(false);
  const [provisioningStep, setProvisioningStep] = useState<number>(0);
  const [isProvisioningRunning, setIsProvisioningRunning] = useState<boolean>(false);
  const [sendEmailToClient, setSendEmailToClient] = useState<boolean>(true);
  const [engineerNotes, setEngineerNotes] = useState<string>("");
  const [copiedRecordId, setCopiedRecordId] = useState<string | null>(null);

  // New Domain Form State
  const [newDomainTenantId, setNewDomainTenantId] = useState<string>(tenants[0]?.id || "");
  const [newCustomDomain, setNewCustomDomain] = useState<string>("");

  const engineerName = currentUser?.name || "Dian Ermawan (Lead IT Infrastructure)";

  // Filtered domains
  const filteredDomains = domains.filter(d => {
    const matchSearch = 
      d.customDomain.toLowerCase().includes(searchQuery.toLowerCase()) ||
      d.subdomain.toLowerCase().includes(searchQuery.toLowerCase()) ||
      d.tenantName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      d.tenantCode.toLowerCase().includes(searchQuery.toLowerCase());

    const matchStatus = filterStatus === "ALL" || d.status === filterStatus;
    return matchSearch && matchStatus;
  });

  const handleCopyText = (text: string, id: string) => {
    navigator.clipboard.writeText(text);
    setCopiedRecordId(id);
    setTimeout(() => setCopiedRecordId(null), 2000);
  };

  // Open Provisioning Wizard
  const handleOpenProvisioning = (domain: SaaSDomainConfig) => {
    setSelectedDomain(domain);
    setProvisioningStep(0);
    setIsProvisioningRunning(false);
    setEngineerNotes("Instruksi DNS telah diterbitkan. Mohon update konfigurasi di registrar DNS Anda.");
    setIsProvisioningModalOpen(true);
  };

  // Execute Step-by-Step Provisioning Simulation
  const handleRunProvisioning = () => {
    if (!selectedDomain) return;
    setIsProvisioningRunning(true);
    setProvisioningStep(1);

    // Step 1: Allocating Ingress Node & Nginx Config
    setTimeout(() => {
      setProvisioningStep(2);
      // Step 2: Requesting Let's Encrypt SSL Keypair
      setTimeout(() => {
        setProvisioningStep(3);
        // Step 3: Generating DNS Zone Table & Dispatching Email
        setTimeout(() => {
          setProvisioningStep(4);
          setIsProvisioningRunning(false);

          // Update Domain Object to 'Provisioning'
          const updatedDomain: SaaSDomainConfig = {
            ...selectedDomain,
            status: "Provisioning",
            sslStatus: "Generating Let's Encrypt",
            dnsPropagationPct: 45,
            provisionedBy: engineerName,
            provisionedAt: new Date().toLocaleString("id-ID", { dateStyle: "short", timeStyle: "short" }),
            lastDnsCheck: new Date().toLocaleString("id-ID", { dateStyle: "short", timeStyle: "short" }),
            notes: "Dalam tahap provisioning DNS & verifikasi sertifikat SSL."
          };

          // Send Email to Client IT
          if (sendEmailToClient) {
            const emailObj = buildDomainProvisioningEmailTemplate(
              updatedDomain,
              "PROVISIONING",
              engineerName,
              engineerNotes
            );
            onDispatchEmail(emailObj);
          }

          const updatedList = domains.map(d => d.id === updatedDomain.id ? updatedDomain : d);
          onUpdateDomains(updatedList);
          setSelectedDomain(updatedDomain);
        }, 1200);
      }, 1200);
    }, 1200);
  };

  // Live DNS Lookup & Activate Live
  const handleActivateGoLive = (domain: SaaSDomainConfig) => {
    const updatedDomain: SaaSDomainConfig = {
      ...domain,
      status: "Active Live",
      sslStatus: "Active Valid (TLS 1.3)",
      sslExpiresAt: new Date(Date.now() + 90 * 24 * 3600 * 1000).toISOString().split("T")[0],
      dnsPropagationPct: 100,
      lastDnsCheck: new Date().toLocaleString("id-ID", { dateStyle: "short", timeStyle: "short" }),
      dnsRecords: domain.dnsRecords.map(r => ({ ...r, status: "Propagated" })),
      notes: "Domain telah aktif dan live 100%. SSL TLS 1.3 terverifikasi."
    };

    // Send Live Email to Client IT
    const emailObj = buildDomainProvisioningEmailTemplate(
      updatedDomain,
      "ACTIVE_LIVE",
      engineerName
    );
    onDispatchEmail(emailObj);

    const updatedList = domains.map(d => d.id === updatedDomain.id ? updatedDomain : d);
    onUpdateDomains(updatedList);
    if (selectedDomain?.id === domain.id) {
      setSelectedDomain(updatedDomain);
    }
  };

  // Create New Domain Configuration
  const handleCreateNewDomain = (e: React.FormEvent) => {
    e.preventDefault();
    const tenant = tenants.find(t => t.id === newDomainTenantId);
    if (!tenant || !newCustomDomain.trim()) return;

    const domainClean = newCustomDomain.trim().toLowerCase().replace(/^https?:\/\//, '');
    const subdomain = `${tenant.code.toLowerCase()}.mediancloud.id`;
    const vfyToken = `median-tenant-vfy-${Math.floor(1000000000 + Math.random() * 9000000000)}`;

    const newDomainObj: SaaSDomainConfig = {
      id: `DOM-${String(domains.length + 1).padStart(3, "0")}`,
      tenantId: tenant.id,
      tenantName: tenant.name,
      tenantCode: tenant.code,
      customDomain: domainClean,
      subdomain: subdomain,
      status: "Pending Review",
      sslStatus: "Not Requested",
      serverIp: "34.128.89.210",
      dnsPropagationPct: 0,
      targetAppEngine: "Google Cloud Run Ingress + Nginx Edge SSL",
      notes: "Domain baru didaftarkan. Menunggu provisioning IT.",
      dnsRecords: [
        {
          id: `dns-${Date.now()}-1`,
          type: "A",
          host: domainClean.split('.')[0] === 'app' ? 'app' : '@',
          target: "34.128.89.210",
          ttl: 3600,
          status: "Pending ISP",
          description: "A Record point ke IP Server Ingress Median"
        },
        {
          id: `dns-${Date.now()}-2`,
          type: "CNAME",
          host: domainClean.split('.')[0],
          target: "ingress.mediancloud.id",
          ttl: 3600,
          status: "Pending ISP",
          description: "CNAME routing ke Cloud Run cluster"
        },
        {
          id: `dns-${Date.now()}-3`,
          type: "TXT",
          host: "_median-verification",
          target: vfyToken,
          ttl: 3600,
          status: "Pending ISP",
          description: "Kode verifikasi kepemilikan domain DNS"
        },
        {
          id: `dns-${Date.now()}-4`,
          type: "TXT",
          host: "@",
          target: "v=spf1 include:_spf.mediancloud.id ~all",
          ttl: 3600,
          status: "Pending ISP",
          description: "SPF Record pengiriman email notifikasi transaksional"
        }
      ]
    };

    onUpdateDomains([...domains, newDomainObj]);
    setIsNewDomainModalOpen(false);
    setNewCustomDomain("");
  };

  // Metrics
  const activeDomainsCount = domains.filter(d => d.status === "Active Live").length;
  const provisioningDomainsCount = domains.filter(d => d.status === "Provisioning" || d.status === "DNS Propagating").length;
  const pendingDomainsCount = domains.filter(d => d.status === "Pending Review").length;

  return (
    <div className="space-y-6">
      
      {/* Top Banner */}
      <div className="p-6 bg-gradient-to-r from-slate-900 via-indigo-950/40 to-slate-900 border border-indigo-500/30 rounded-2xl shadow-xl flex flex-wrap items-center justify-between gap-4">
        <div className="space-y-1">
          <div className="flex items-center gap-2.5">
            <div className="p-2 bg-indigo-500/20 text-indigo-400 border border-indigo-500/40 rounded-xl">
              <Globe className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-lg font-black text-white font-mono tracking-tight flex items-center gap-2">
                BAGIAN IT & CLOUD INFRASTRUCTURE
                <span className="px-2 py-0.5 bg-indigo-500/20 text-indigo-300 border border-indigo-500/40 text-[10px] rounded-full">
                  DOMAIN & DNS PROVISIONING
                </span>
              </h2>
              <p className="text-xs text-slate-400">
                Aktivasi domain aplikasi tenant ke status Provisioning, generator DNS records (A, CNAME, TXT Verification, SPF), automated SSL TLS 1.3, dan notifikasi email ke tim IT klien.
              </p>
            </div>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={() => setIsNewDomainModalOpen(true)}
            className="px-4 py-2.5 bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-400 hover:to-purple-500 text-white font-black text-xs font-mono rounded-xl shadow-lg shadow-indigo-500/20 flex items-center gap-1.5 transition-all cursor-pointer"
          >
            <Plus className="w-4 h-4" />
            <span>Tambah Domain Tenant</span>
          </button>
          
          <button
            onClick={() => onOpenEmailOutbox()}
            className="px-3.5 py-2.5 bg-slate-800 hover:bg-slate-700 text-sky-300 border border-slate-700 rounded-xl text-xs font-mono font-bold flex items-center gap-2 transition-all cursor-pointer shadow"
          >
            <Mail className="w-4 h-4 text-sky-400" />
            <span>Log Email IT</span>
          </button>
        </div>
      </div>

      {/* Metrics Bar */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 font-mono">
        <div className="p-3.5 bg-slate-900/90 border border-slate-800 rounded-xl space-y-1">
          <div className="text-[11px] text-slate-400 flex items-center justify-between">
            <span>Domain Active Live</span>
            <CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
          </div>
          <div className="text-xl font-black text-emerald-400">{activeDomainsCount}</div>
        </div>

        <div className="p-3.5 bg-slate-900/90 border border-slate-800 rounded-xl space-y-1">
          <div className="text-[11px] text-slate-400 flex items-center justify-between">
            <span>Sedang Provisioning</span>
            <Activity className="w-3.5 h-3.5 text-indigo-400" />
          </div>
          <div className="text-xl font-black text-indigo-400">{provisioningDomainsCount}</div>
        </div>

        <div className="p-3.5 bg-slate-900/90 border border-slate-800 rounded-xl space-y-1">
          <div className="text-[11px] text-slate-400 flex items-center justify-between">
            <span>Pending Review</span>
            <Clock className="w-3.5 h-3.5 text-amber-400" />
          </div>
          <div className="text-xl font-black text-amber-400">{pendingDomainsCount}</div>
        </div>

        <div className="p-3.5 bg-slate-900/90 border border-slate-800 rounded-xl space-y-1">
          <div className="text-[11px] text-slate-400 flex items-center justify-between">
            <span>Ingress IP Public</span>
            <Server className="w-3.5 h-3.5 text-sky-400" />
          </div>
          <div className="text-sm font-bold text-sky-400 mt-1">34.128.89.210</div>
        </div>
      </div>

      {/* Search & Filter Bar */}
      <div className="p-4 bg-slate-900 border border-slate-800 rounded-xl flex flex-wrap items-center justify-between gap-3 text-xs font-mono">
        <div className="flex flex-wrap items-center gap-2 flex-1 min-w-[280px]">
          <div className="relative flex-1 min-w-[200px]">
            <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
            <input
              type="text"
              placeholder="Cari domain, tenant, subdomain..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-8 pr-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500"
            />
          </div>

          <select
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
            className="px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-slate-200 focus:outline-none focus:border-indigo-500 cursor-pointer"
          >
            <option value="ALL">Semua Status Domain</option>
            <option value="Active Live">Active Live</option>
            <option value="Provisioning">Provisioning</option>
            <option value="Pending Review">Pending Review</option>
          </select>
        </div>
      </div>

      {/* Domain Cards & DNS Matrix */}
      <div className="space-y-4 font-mono">
        {filteredDomains.map((dom) => (
          <div
            key={dom.id}
            className={`p-5 bg-slate-900 border rounded-2xl transition-all shadow-lg ${
              dom.status === "Active Live" ? "border-emerald-500/40 hover:border-emerald-400" :
              dom.status === "Provisioning" ? "border-indigo-500/50 hover:border-indigo-400 bg-indigo-950/10" :
              "border-slate-800 hover:border-slate-700"
            }`}
          >
            {/* Header Domain Card */}
            <div className="flex flex-wrap items-center justify-between gap-3 pb-3 border-b border-slate-800">
              <div className="space-y-1">
                <div className="flex items-center gap-2">
                  <Globe className={`w-4 h-4 ${dom.status === 'Active Live' ? 'text-emerald-400' : 'text-indigo-400'}`} />
                  <span className="text-base font-black text-white">{dom.customDomain}</span>
                  <span className={`px-2 py-0.5 text-[10px] font-bold rounded-full ${
                    dom.status === "Active Live" ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/40" :
                    dom.status === "Provisioning" ? "bg-indigo-500/20 text-indigo-300 border border-indigo-500/40 animate-pulse" :
                    "bg-amber-500/20 text-amber-300 border border-amber-500/40"
                  }`}>
                    {dom.status}
                  </span>
                </div>
                <div className="text-xs text-slate-400 flex flex-wrap items-center gap-3">
                  <span>Tenant: <strong className="text-slate-200">{dom.tenantName}</strong> ({dom.tenantCode})</span>
                  <span>•</span>
                  <span>Subdomain Cluster: <strong className="text-sky-300">{dom.subdomain}</strong></span>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex items-center gap-2 flex-wrap">
                {dom.status === "Pending Review" && (
                  <button
                    onClick={() => handleOpenProvisioning(dom)}
                    className="px-3.5 py-1.5 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold text-xs rounded-xl shadow flex items-center gap-1.5 transition-all cursor-pointer"
                  >
                    <Play className="w-3.5 h-3.5 fill-current" />
                    <span>Aktivasi Provisioning & DNS</span>
                  </button>
                )}

                {dom.status === "Provisioning" && (
                  <>
                    <button
                      onClick={() => handleActivateGoLive(dom)}
                      className="px-3.5 py-1.5 bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs rounded-xl shadow flex items-center gap-1.5 transition-all cursor-pointer"
                    >
                      <CheckCircle2 className="w-3.5 h-3.5" />
                      <span>Validasi & Go-Live (Active)</span>
                    </button>
                    <button
                      onClick={() => handleOpenProvisioning(dom)}
                      className="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-indigo-300 border border-slate-700 rounded-xl text-xs flex items-center gap-1.5 transition-all cursor-pointer"
                    >
                      <RefreshCw className="w-3.5 h-3.5" />
                      <span>Re-Provisioning</span>
                    </button>
                  </>
                )}

                {dom.status === "Active Live" && (
                  <a
                    href={`https://${dom.customDomain}`}
                    target="_blank"
                    rel="noreferrer"
                    className="px-3 py-1.5 bg-emerald-950 hover:bg-emerald-900 text-emerald-300 border border-emerald-500/40 rounded-xl text-xs flex items-center gap-1.5 transition-all cursor-pointer"
                  >
                    <ExternalLink className="w-3.5 h-3.5" />
                    <span>Buka Domain https://</span>
                  </a>
                )}
              </div>
            </div>

            {/* Middle: Propagation & SSL Specs */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 py-3 text-xs border-b border-slate-800/80">
              <div className="p-2.5 bg-slate-950/60 rounded-xl border border-slate-800 space-y-1">
                <span className="text-[10px] text-slate-500 uppercase">Sertifikat SSL TLS 1.3</span>
                <div className="flex items-center gap-1.5 text-slate-200 font-bold">
                  <ShieldCheck className="w-3.5 h-3.5 text-emerald-400" />
                  <span>{dom.sslStatus}</span>
                </div>
                {dom.sslExpiresAt && (
                  <div className="text-[10px] text-slate-400">Exp: {dom.sslExpiresAt}</div>
                )}
              </div>

              <div className="p-2.5 bg-slate-950/60 rounded-xl border border-slate-800 space-y-1">
                <span className="text-[10px] text-slate-500 uppercase">Propagasi DNS Global</span>
                <div className="flex items-center gap-2">
                  <div className="flex-1 bg-slate-800 h-2 rounded-full overflow-hidden">
                    <div 
                      className="bg-gradient-to-r from-indigo-500 to-emerald-400 h-full rounded-full transition-all duration-500"
                      style={{ width: `${dom.dnsPropagationPct}%` }}
                    />
                  </div>
                  <span className="font-bold text-white text-[11px]">{dom.dnsPropagationPct}%</span>
                </div>
                <div className="text-[10px] text-slate-400">Last Check: {dom.lastDnsCheck || "-"}</div>
              </div>

              <div className="p-2.5 bg-slate-950/60 rounded-xl border border-slate-800 space-y-1">
                <span className="text-[10px] text-slate-500 uppercase">Target Engine & Ingress</span>
                <div className="text-sky-300 font-bold">{dom.serverIp}</div>
                <div className="text-[10px] text-slate-400 truncate">{dom.targetAppEngine}</div>
              </div>
            </div>

            {/* DNS Records Matrix */}
            <div className="pt-3 space-y-2">
              <div className="flex items-center justify-between text-[11px] text-slate-400">
                <span className="font-bold text-slate-300 uppercase">
                  DNS Records Yang Harus Dikonfigurasi di Registrar Klien:
                </span>
                <span className="text-[10px] text-indigo-400">
                  TTL: 3600s | Automatic Ingress Routing
                </span>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-left text-[11px]">
                  <thead className="bg-slate-950 text-slate-500 uppercase text-[9px]">
                    <tr>
                      <th className="py-2 px-3">Type</th>
                      <th className="py-2 px-3">Host / Name</th>
                      <th className="py-2 px-3">Value / Target Destination</th>
                      <th className="py-2 px-3">TTL</th>
                      <th className="py-2 px-3">Status</th>
                      <th className="py-2 px-3 text-right">Salin</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-800/60">
                    {dom.dnsRecords.map((rec) => (
                      <tr key={rec.id} className="hover:bg-slate-950/40">
                        <td className="py-2 px-3 font-bold text-indigo-400">{rec.type}</td>
                        <td className="py-2 px-3 font-mono text-slate-300">{rec.host}</td>
                        <td className="py-2 px-3 font-mono font-bold text-white">{rec.target}</td>
                        <td className="py-2 px-3 text-slate-400">{rec.ttl}s</td>
                        <td className="py-2 px-3">
                          <span className={`px-1.5 py-0.2 text-[9px] font-bold rounded ${
                            rec.status === "Propagated" ? "bg-emerald-500/20 text-emerald-300" : "bg-amber-500/20 text-amber-300"
                          }`}>
                            {rec.status}
                          </span>
                        </td>
                        <td className="py-2 px-3 text-right">
                          <button
                            onClick={() => handleCopyText(rec.target, rec.id)}
                            className="p-1 hover:bg-slate-800 rounded text-slate-400 hover:text-white transition-colors cursor-pointer"
                            title="Salin Value Target"
                          >
                            {copiedRecordId === rec.id ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

          </div>
        ))}
      </div>

      {/* ========================================================================= */}
      {/* MODAL: PROVISIONING PIPELINE WIZARD & DNS ACTIVATION */}
      {/* ========================================================================= */}
      {isProvisioningModalOpen && selectedDomain && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md animate-in fade-in duration-150">
          <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-3xl shadow-2xl overflow-hidden text-slate-100 font-mono">
            
            {/* Header */}
            <div className="px-6 py-4 bg-indigo-950/90 border-b border-indigo-500/40 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Server className="w-5 h-5 text-indigo-400" />
                <h3 className="text-sm font-black uppercase text-indigo-200">
                  Pipeline Provisioning Domain & DNS Tenant
                </h3>
              </div>
              <button
                onClick={() => setIsProvisioningModalOpen(false)}
                className="p-1 hover:bg-slate-800 rounded text-slate-400 hover:text-white"
              >
                ✕
              </button>
            </div>

            <div className="p-6 space-y-5 text-xs">
              
              {/* Domain Target Meta */}
              <div className="p-4 bg-slate-950 border border-slate-800 rounded-xl flex flex-wrap items-center justify-between gap-3">
                <div>
                  <div className="font-bold text-white text-base">{selectedDomain.customDomain}</div>
                  <div className="text-[11px] text-slate-400">
                    Tenant: <strong className="text-slate-200">{selectedDomain.tenantName}</strong> | Fallback: {selectedDomain.subdomain}
                  </div>
                </div>
                <div className="text-right">
                  <span className="text-[10px] text-slate-500 uppercase block">Ingress Public IP</span>
                  <strong className="text-sky-400 text-sm">{selectedDomain.serverIp}</strong>
                </div>
              </div>

              {/* Provisioning Pipeline Steps Visualization */}
              <div className="space-y-3">
                <h4 className="font-bold text-slate-300 uppercase text-[11px]">
                  Tahapan Otomatisasi Cloud Provisioning:
                </h4>

                <div className="space-y-2">
                  <div className={`p-3 rounded-xl border flex items-center justify-between ${
                    provisioningStep >= 1 ? "bg-indigo-950/40 border-indigo-500 text-indigo-200" : "bg-slate-950 border-slate-800 text-slate-500"
                  }`}>
                    <div className="flex items-center gap-2">
                      <Cpu className="w-4 h-4" />
                      <span>1. Alokasi Ingress Load Balancer & Nginx Virtual Host Route</span>
                    </div>
                    {provisioningStep >= 1 && <CheckCircle2 className="w-4 h-4 text-emerald-400" />}
                  </div>

                  <div className={`p-3 rounded-xl border flex items-center justify-between ${
                    provisioningStep >= 2 ? "bg-indigo-950/40 border-indigo-500 text-indigo-200" : "bg-slate-950 border-slate-800 text-slate-500"
                  }`}>
                    <div className="flex items-center gap-2">
                      <ShieldCheck className="w-4 h-4" />
                      <span>2. Generate SSL TLS 1.3 Keypair (Let's Encrypt ACME Challenge)</span>
                    </div>
                    {provisioningStep >= 2 && <CheckCircle2 className="w-4 h-4 text-emerald-400" />}
                  </div>

                  <div className={`p-3 rounded-xl border flex items-center justify-between ${
                    provisioningStep >= 3 ? "bg-indigo-950/40 border-indigo-500 text-indigo-200" : "bg-slate-950 border-slate-800 text-slate-500"
                  }`}>
                    <div className="flex items-center gap-2">
                      <Globe className="w-4 h-4" />
                      <span>3. Pembuatan DNS Records Matrix (A, CNAME, TXT Verification, SPF)</span>
                    </div>
                    {provisioningStep >= 3 && <CheckCircle2 className="w-4 h-4 text-emerald-400" />}
                  </div>

                  <div className={`p-3 rounded-xl border flex items-center justify-between ${
                    provisioningStep >= 4 ? "bg-emerald-950/40 border-emerald-500 text-emerald-200" : "bg-slate-950 border-slate-800 text-slate-500"
                  }`}>
                    <div className="flex items-center gap-2">
                      <Mail className="w-4 h-4" />
                      <span>4. Pengiriman Instruksi DNS Resmi ke Email Tim IT Klien</span>
                    </div>
                    {provisioningStep >= 4 && <CheckCircle2 className="w-4 h-4 text-emerald-400" />}
                  </div>
                </div>
              </div>

              {/* Engineer Notes */}
              <div>
                <label className="block text-slate-400 mb-1">Catatan Tambahan Engineer IT untuk Email Klien:</label>
                <input
                  type="text"
                  value={engineerNotes}
                  onChange={(e) => setEngineerNotes(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-slate-100 focus:outline-none focus:border-indigo-500 text-xs"
                />
              </div>

              {/* Email Option Checkbox */}
              <div className="p-3 bg-slate-950 border border-slate-800 rounded-xl space-y-1">
                <label className="flex items-center gap-2 text-emerald-400 font-bold cursor-pointer">
                  <input
                    type="checkbox"
                    checked={sendEmailToClient}
                    onChange={(e) => setSendEmailToClient(e.target.checked)}
                    className="rounded accent-emerald-500"
                  />
                  <span>Otomatis kirim tabel instruksi DNS lengkap ke email administrator tenant</span>
                </label>
              </div>

              {/* Modal Actions */}
              <div className="pt-3 border-t border-slate-800 flex items-center justify-between">
                <button
                  type="button"
                  onClick={() => setIsProvisioningModalOpen(false)}
                  className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg cursor-pointer"
                >
                  Tutup
                </button>

                {provisioningStep < 4 ? (
                  <button
                    type="button"
                    onClick={handleRunProvisioning}
                    disabled={isProvisioningRunning}
                    className={`px-5 py-2 rounded-xl font-bold text-xs flex items-center gap-2 cursor-pointer shadow-lg ${
                      isProvisioningRunning
                        ? "bg-slate-700 text-slate-400 cursor-not-allowed"
                        : "bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-400 hover:to-purple-500 text-white shadow-indigo-500/20"
                    }`}
                  >
                    {isProvisioningRunning ? (
                      <>
                        <RefreshCw className="w-4 h-4 animate-spin" />
                        <span>Sedang Menjalankan Provisioning...</span>
                      </>
                    ) : (
                      <>
                        <Play className="w-4 h-4 fill-current" />
                        <span>Mulai Eksekusi Provisioning</span>
                      </>
                    )}
                  </button>
                ) : (
                  <button
                    type="button"
                    onClick={() => {
                      setIsProvisioningModalOpen(false);
                      onOpenEmailOutbox();
                    }}
                    className="px-5 py-2 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-xl cursor-pointer shadow flex items-center gap-1.5"
                  >
                    <Mail className="w-4 h-4" />
                    <span>Selesai - Buka Log Email</span>
                  </button>
                )}
              </div>

            </div>

          </div>
        </div>
      )}

      {/* ========================================================================= */}
      {/* MODAL: REGISTRASI DOMAIN TENANT BARU */}
      {/* ========================================================================= */}
      {isNewDomainModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md animate-in fade-in duration-150">
          <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden text-slate-100 font-mono">
            
            <div className="px-6 py-4 bg-slate-800 border-b border-slate-700 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Globe className="w-5 h-5 text-indigo-400" />
                <h3 className="text-sm font-bold text-white">Tambah Konfigurasi Domain Tenant</h3>
              </div>
              <button
                onClick={() => setIsNewDomainModalOpen(false)}
                className="p-1 hover:bg-slate-700 rounded text-slate-400 hover:text-white"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleCreateNewDomain} className="p-6 space-y-4 text-xs">
              <div>
                <label className="block text-slate-400 mb-1">Pilih Tenant / Perusahaan *</label>
                <select
                  value={newDomainTenantId}
                  onChange={(e) => setNewDomainTenantId(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-slate-100 focus:outline-none focus:border-indigo-500"
                >
                  {tenants.map(t => (
                    <option key={t.id} value={t.id}>{t.name} ({t.code})</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-slate-400 mb-1">Custom FQDN Domain yang Diinginkan *</label>
                <input
                  type="text"
                  placeholder="e.g. portal.ptmedian.co.id atau app.jayaperkasa.com"
                  value={newCustomDomain}
                  onChange={(e) => setNewCustomDomain(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-slate-100 focus:outline-none focus:border-indigo-500"
                  required
                />
                <span className="text-[10px] text-slate-500 mt-1 block">
                  Domain ini nantinya akan diarahkan ke IP Load Balancer 34.128.89.210 dengan sertifikat SSL TLS 1.3.
                </span>
              </div>

              <div className="pt-3 border-t border-slate-800 flex items-center justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setIsNewDomainModalOpen(false)}
                  className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg cursor-pointer"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-lg cursor-pointer shadow"
                >
                  Simpan Domain
                </button>
              </div>
            </form>

          </div>
        </div>
      )}

    </div>
  );
};