"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useOmni } from "@/components/OmniSyncProvider";

interface Tenant {
  id: string;
  name: string;
  licenseNumber?: string;
  licenses?: string | Record<string, string>;
  brandColor?: string;
  platformName?: string;
  securityTier?: string;
}

interface User {
  id: string;
  email: string;
  role: string;
  licenses?: string | Record<string, string>;
  byokEnabled?: boolean;
  byokKey?: string;
  createdAt: string;
}

interface Feature {
  key: string;
  name: string;
  module?: string;
}

interface Package {
  id: string;
  name: string;
  price: string;
  features: string;
}

export default function AdminDashboard() {
  const {} = useOmni();
  const [tenant, setTenant] = useState<Tenant | null>(null);
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [systemFeatures, setSystemFeatures] = useState<Feature[]>([]);
  const [activeTab, setActiveTab] = useState('users');
  const [debugError, setDebugError] = useState<string | null>(null);
  
  const [showAddUserModal, setShowAddUserModal] = useState(false);
  const [showLimitsModal, setShowLimitsModal] = useState(false);
  const [selectedUser, setSelectedUser] = useState<User | null>(null);
  const [userLicenses, setUserLicenses] = useState<Record<string, string>>({});
  
  const [newEmail, setNewEmail] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [packages, setPackages] = useState<Package[]>([]);
  const [checkoutLoading, setCheckoutLoading] = useState(false);
  
  // BYOK States
  const [orgByokEnabled, setOrgByokEnabled] = useState(false);
  const [orgByokKey, setOrgByokKey] = useState("");
  const [userByokEnabled, setUserByokEnabled] = useState(false);
  const [userByokKey, setUserByokKey] = useState("");

  // Quantum Toast System
  const [toast, setToast] = useState<{message: string, type: 'success' | 'error'} | null>(null);

  const showToast = (message: string, type: 'success' | 'error' = 'success') => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 4000);
  };

  const router = useRouter();

  const handleLogout = async () => {
    try {
      await fetch('/api/auth/logout', { method: 'POST' });
      window.location.href = '/';
    } catch (e) {
      console.error("Logout failed", e);
      window.location.href = '/';
    }
  };

  const fetchData = async () => {
    try {
      const resp = await fetch("/api/admin", { cache: "no-store" });
      const data = await resp.json();
      if (data.error) {
        window.location.href = window.location.pathname.replace('/admin', '/dashboard');
      } else {
        setTenant(data.tenant);
        setOrgByokEnabled(data.tenant.byokEnabled || false);
        setOrgByokKey(data.tenant.byokKey || "");
        setUsers(data.users);
        setSystemFeatures(data.systemFeatures || []);
        
        // Fetch Packages for Billing
        const pResp = await fetch("/api/superadmin/packages");
        const pData = await pResp.json();
        setPackages(pData.packages || []);
      }
    } catch (e: any) {
      console.error(e);
      setDebugError(e.message || "Unknown error occurred");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const init = async () => {
      await fetchData();
    };
    init();
     
  }, []);

  const handleAddUser = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const resp = await fetch("/api/admin", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "add_user", email: newEmail, password: newPassword, role: "user" })
      });
      const data = await resp.json();
      if (data.success) {
        setUsers([...users, data.user]);
        setShowAddUserModal(false);
        setNewEmail(""); setNewPassword("");
        showToast("Employee added successfully.");
      } else {
        showToast("Failed: " + data.error, "error");
      }
    } catch (_e) {
      showToast("Server error.", "error");
    }
  };

  const handleOpenLimits = (u: User) => {
    setSelectedUser(u);
    try {
      let parsed: Record<string, string> = {};
      if (typeof u.licenses === 'string') {
        const js = JSON.parse(u.licenses);
        if (Array.isArray(js)) js.forEach((k: string) => parsed[k] = "GRANTED");
        else parsed = js;
      } else if (u.licenses && typeof u.licenses === 'object') {
        if (Array.isArray(u.licenses)) u.licenses.forEach((k: string) => parsed[k] = "GRANTED");
        else parsed = u.licenses;
      }
      setUserLicenses(parsed);
      setUserByokEnabled(u.byokEnabled || false);
      setUserByokKey(u.byokKey || "");
    } catch(_e) { setUserLicenses({}); }
    setShowLimitsModal(true);
  };

  const handleSaveLimits = async () => {
    try {
      const resp = await fetch("/api/admin", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
          action: "update_user_licenses", 
          targetUserId: selectedUser?.id, 
          newLicenses: userLicenses,
          byokEnabled: userByokEnabled,
          byokKey: userByokKey
        })
      });
      if (resp.ok) {
        showToast("User limits applied successfully.");
        setShowLimitsModal(false);
        fetchData();
        try {
          const bc = new BroadcastChannel('omni_channel');
          bc.postMessage({ type: 'REFRESH_QUANTUM_TOKEN' });
        } catch(e){}
      } else {
        const d = await resp.json();
        showToast(d.error || "Error saving limits.", "error");
      }
    } catch (_e) {
      showToast("Error saving limits. Periksa koneksi Anda.", "error");
    }
  };

  const handleSaveOrgByok = async () => {
    try {
      const resp = await fetch("/api/admin", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ 
          action: "update_tenant_byok", 
          byokEnabled: orgByokEnabled,
          byokKey: orgByokKey
        })
      });
      if (resp.ok) {
        showToast("Organizational BYOK applied successfully.");
        fetchData();
      } else {
        const d = await resp.json();
        showToast("Error: " + d.error, "error");
      }
    } catch (_e) {
      showToast("Error saving BYOK.", "error");
    }
  };

  const handleCheckout = async (packageId: string) => {
    setCheckoutLoading(true);
    try {
      const resp = await fetch("/api/admin/checkout", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ packageId })
      });
      const data = await resp.json();
      if (data.url) {
        window.location.assign(data.url);
      } else {
        showToast("Checkout Error: " + (data.error || "Unknown error"), "error");
      }
    } catch (_e) {
      showToast("Payment gateway connection failed.", "error");
    } finally {
      setCheckoutLoading(false);
    }
  };

  if (loading) return <div className="min-h-screen bg-[#f4f5f9] flex items-center justify-center text-blue-600 font-medium">Loading Admin Workspace...</div>;
  if (debugError) return <div className="min-h-screen bg-[#f4f5f9] flex items-center justify-center text-red-600 font-medium">Error: {debugError}</div>;
  if (!tenant) return <div className="min-h-screen bg-[#f4f5f9] flex items-center justify-center text-red-600 font-medium">Error: Tenant not found</div>;

  return (
    <div className="min-h-screen bg-[#f4f5f9] text-gray-900 font-sans pb-20 relative">
      
      {/* Quantum Toast Notification System */}
      {toast && (
        <div className={`fixed top-20 right-8 z-[100] px-6 py-4 rounded-xl shadow-2xl backdrop-blur-xl border flex items-center gap-4 animate-in slide-in-from-right-8 fade-in duration-300 ${toast.type === 'success' ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-700' : 'bg-red-500/10 border-red-500/30 text-red-700'}`}>
           <div className={`w-8 h-8 rounded-full flex items-center justify-center ${toast.type === 'success' ? 'bg-emerald-500 text-white' : 'bg-red-500 text-white'}`}>
              {toast.type === 'success' ? (
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
              ) : (
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              )}
           </div>
           <div>
              <div className="text-xs font-black uppercase tracking-widest opacity-80 mb-0.5">{toast.type === 'success' ? 'System Success' : 'System Alert'}</div>
              <div className="text-sm font-medium">{toast.message}</div>
           </div>
        </div>
      )}
      
      {/* HEADER ZOOM-LIKE */}
      <header className="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-8 sticky top-0 z-40 shadow-sm">
        <div className="flex items-center gap-3">
          <svg className="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24"><path d="M4 4h10a2 2 0 0 1 2 2v3.5l4-3v11l-4-3V18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"></path></svg>
          <h1 className="text-xl font-bold tracking-tight text-gray-800">Workspace Admin <span className="text-sm font-normal text-gray-500 ml-2">{tenant.name}</span></h1>
        </div>
        <div className="flex items-center gap-4">
          <a href="/admin/telemetry" className="px-3 py-1.5 bg-gradient-to-r from-[#25D366] to-[#0b5cff] text-white text-xs font-bold rounded-md hover:opacity-90 transition-opacity flex items-center gap-2 shadow-sm">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
            TENANT COMMAND CENTER
          </a>
          <button onClick={() => router.push('/dashboard')} className="text-sm text-gray-600 hover:text-gray-900 font-medium transition-colors">Go to App</button>
          <button onClick={handleLogout} className="text-sm text-blue-600 hover:text-blue-800 font-semibold transition-colors">Sign Out</button>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8 flex flex-col md:flex-row gap-8">
        
        {/* SIDEBAR */}
        <div className="w-full md:w-64 shrink-0">
          <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-4 sticky top-24">
            <div className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3 px-2">Account Info</div>
            <div className="mb-6 px-2">
              <div className="font-bold text-gray-900">{tenant.name}</div>
              <div className="text-xs text-gray-500 font-mono mt-1">LIC: {tenant.licenseNumber || 'PENDING'}</div>
              
              {/* Security & Network Feature Badges */}
              {(() => {
                let lic: Record<string, string> = {};
                try { lic = typeof tenant.licenses === 'string' ? JSON.parse(tenant.licenses || '{}') : (tenant.licenses || {}); } catch {}
                const feats = [
                  { key: 'tls_global_ca', label: "\ud83c\udf10 Let's Encrypt", cls: 'bg-emerald-50 text-emerald-700 border-emerald-200' },
                  { key: 'tls_sovereign', label: '\ud83d\udee1\ufe0f Private CA (X)', cls: 'bg-cyan-50 text-cyan-700 border-cyan-200' },
                  { key: 'ipv6_dual_stack', label: '\ud83c\udf10 IPv6 Dual-Stack', cls: 'bg-violet-50 text-violet-700 border-violet-200' },
                ];
                const visible = feats.filter(f => lic[f.key] && lic[f.key] !== 'HIDDEN');
                if (visible.length === 0) return null;
                return (
                  <div className="mt-3 space-y-1.5">
                    {visible.map(f => {
                      const state = lic[f.key];
                      if (state === 'GRANTED') return (
                        <div key={f.key} className={`flex items-center gap-1.5 text-[10px] font-bold px-2 py-1 rounded-md border ${f.cls}`}>
                          <span className="relative flex h-1.5 w-1.5"><span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span><span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500"></span></span>
                          {f.label}
                        </div>
                      );
                      if (state === 'UPSELL') return (
                        <button key={f.key} onClick={() => setActiveTab('billing')} className="flex items-center gap-1.5 text-[10px] font-bold px-2 py-1 rounded-md bg-amber-50 text-amber-600 border border-amber-200 hover:bg-amber-100 transition-colors w-full text-left">
                          <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd"></path></svg>
                          {f.label} <span className="ml-auto text-[8px] uppercase tracking-wider">Upgrade</span>
                        </button>
                      );
                      return null;
                    })}
                  </div>
                );
              })()}
            </div>
            
            <nav className="space-y-1">
              <button 
                onClick={() => setActiveTab('users')}
                className={`w-full text-left px-3 py-2 rounded-md font-medium text-sm transition-all ${activeTab === 'users' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50'}`}
              >
                User Management
              </button>
              <button 
                onClick={() => setActiveTab('billing')}
                className={`w-full text-left px-3 py-2 rounded-md font-medium text-sm transition-all ${activeTab === 'billing' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50'}`}
              >
                Billing & Plans
              </button>
              <button 
                onClick={() => setActiveTab('security')}
                className={`w-full text-left px-3 py-2 rounded-md font-medium text-sm transition-all ${activeTab === 'security' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50'}`}
              >
                Security & BYOK
              </button>
            </nav>
          </div>
        </div>

        {/* MAIN CONTENT */}
        <div className="flex-1 space-y-6">
          {activeTab === 'users' && (
            <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-500">
              <div className="px-6 py-5 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
                <h2 className="text-lg font-semibold text-gray-800">Users ({users.length})</h2>
                <button 
                  onClick={() => setShowAddUserModal(true)}
                  className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm"
                >
                  + Add User
                </button>
              </div>
              
              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse">
                  <thead>
                    <tr className="border-b border-gray-200 bg-white">
                      <th className="py-3 px-6 text-gray-500 font-semibold text-xs uppercase tracking-wider">Email / ID</th>
                      <th className="py-3 px-6 text-gray-500 font-semibold text-xs uppercase tracking-wider">Role</th>
                      <th className="py-3 px-6 text-gray-500 font-semibold text-xs uppercase tracking-wider">Joined Date</th>
                      <th className="py-3 px-6 text-right text-gray-500 font-semibold text-xs uppercase tracking-wider">Action</th>
                    </tr>
                  </thead>
                  <tbody className="text-sm">
                    {users.map((u, i) => (
                      <tr key={i} className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                        <td className="py-4 px-6 text-gray-900 font-medium">{u.email}</td>
                        <td className="py-4 px-6">
                          <span className={`px-2.5 py-1 rounded-md text-xs font-semibold ${u.role === 'admin' ? 'bg-purple-100 text-purple-700' : 'bg-gray-100 text-gray-600'}`}>
                            {u.role.toUpperCase()}
                          </span>
                        </td>
                        <td className="py-4 px-6 text-gray-500">{new Date(u.createdAt).toLocaleDateString('en-US')}</td>
                        <td className="py-4 px-6 text-right">
                          <button 
                            onClick={() => handleOpenLimits(u)} 
                            className="px-3 py-1.5 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-blue-600 rounded text-xs font-semibold transition-colors focus:ring-2 focus:ring-blue-500"
                          >
                            Feature Limits
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {activeTab === 'billing' && (
            <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
               <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-8">
                  <h2 className="text-2xl font-bold text-gray-900 mb-2">Billing & Subscription</h2>
                  <p className="text-gray-500 text-sm mb-8">Choose the right plan to unlock Quantum XCU modules for your team.</p>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                     {packages.map(pkg => (
                       <div key={pkg.id} className="border border-gray-200 rounded-2xl p-6 hover:border-blue-500 transition-all group relative overflow-hidden">
                          <div className="font-bold text-lg text-gray-900 mb-1">{pkg.name}</div>
                          <div className="text-2xl font-black text-blue-600 mb-4">{pkg.price}</div>
                          <ul className="text-sm text-gray-500 space-y-2 mb-8">
                             {JSON.parse(pkg.features || '[]').slice(0, 4).map((f: string, idx: number) => (
                               <li key={idx} className="flex items-center gap-2">
                                  <svg className="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"></path></svg>
                                  {f}
                               </li>
                             ))}
                          </ul>
                          <button 
                            disabled={checkoutLoading}
                            onClick={() => handleCheckout(pkg.id)}
                            className="w-full py-3 bg-blue-600 text-white rounded-xl font-bold hover:bg-blue-700 transition-all disabled:opacity-50"
                          >
                            {checkoutLoading ? "Connecting..." : "Upgrade Now"}
                          </button>
                       </div>
                     ))}
                  </div>
               </div>
            </div>
          )}

          {activeTab === 'security' && (
            <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
               <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-8">
                  <div className="flex items-center gap-4 mb-8">
                      <div className="w-12 h-12 bg-blue-600 rounded-2xl flex items-center justify-center text-white shadow-lg">
                          <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"></path></svg>
                      </div>
                      <div>
                          <h2 className="text-2xl font-bold text-gray-900">Quantum Security Suite</h2>
                          <p className="text-gray-500 text-sm">Manage organizational cryptographic sovereignty and BYOK settings.</p>
                      </div>
                  </div>

                  {/* TLS SOVEREIGN MODULE - ?? la Carte */}
                  {(() => {
                    let tlsState = 'HIDDEN';
                    try {
                      const lic = typeof tenant.licenses === 'string' ? JSON.parse(tenant.licenses || '{}') : (tenant.licenses || {});
                      tlsState = lic['tls_sovereign'] || 'HIDDEN';
                    } catch {}
                    if (tlsState === 'HIDDEN') return null;
                    return (
                      <div className={`mb-8 rounded-2xl border overflow-hidden ${
                        tlsState === 'GRANTED'
                          ? 'bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 border-slate-700/50'
                          : 'bg-gradient-to-br from-amber-50 to-orange-50 border-amber-200'
                      }`}>
                        <div className="p-6">
                          <div className="flex items-center gap-4 mb-4">
                            <div className={`w-12 h-12 rounded-2xl flex items-center justify-center shadow-lg ${
                              tlsState === 'GRANTED'
                                ? 'bg-gradient-to-br from-cyan-500 to-blue-600 shadow-cyan-500/20'
                                : 'bg-gradient-to-br from-amber-400 to-orange-500 shadow-amber-500/20'
                            }`}>
                              <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                            </div>
                            <div>
                              <h3 className={`text-lg font-bold ${
                                tlsState === 'GRANTED' ? 'text-white' : 'text-amber-900'
                              }`}>TLS Sovereign Module</h3>
                              <p className={`text-xs ${
                                tlsState === 'GRANTED' ? 'text-slate-400' : 'text-amber-700'
                              }`}>?? la Carte ??? Sovereign Communication Infrastructure</p>
                            </div>
                          </div>

                          {tlsState === 'GRANTED' ? (
                            <div className="space-y-4">
                              <div className="flex items-center gap-3">
                                <div className={`px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-2 ${
                                  tenant.securityTier === 'SOVEREIGN'
                                    ? 'bg-cyan-500/10 text-cyan-400 border border-cyan-500/20'
                                    : tenant.securityTier === 'CLIENT_CA'
                                    ? 'bg-amber-500/10 text-amber-400 border border-amber-500/20'
                                    : 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
                                }`}>
                                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                                  {tenant.securityTier === 'SOVEREIGN' ? '\ud83d\udee1\ufe0f SOVEREIGN \u2014 Private CA (X)' : tenant.securityTier === 'CLIENT_CA' ? '\ud83c\udfdb\ufe0f CLIENT CA \u2014 Custom PKI' : '\ud83c\udf10 STANDARD \u2014 Let\'s Encrypt'}
                                </div>
                                <span className="relative flex h-2.5 w-2.5">
                                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                                  <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
                                </span>
                                <span className="text-[10px] text-emerald-400 font-bold uppercase">Active</span>
                              </div>
                              <div className="grid grid-cols-2 gap-3">
                                <div className="bg-white/5 rounded-xl p-3 border border-white/10">
                                  <div className="text-[10px] text-slate-500 font-bold uppercase mb-1">Mode</div>
                                  <div className="text-sm text-white font-bold">{tenant.securityTier === 'SOVEREIGN' ? 'Private CA (Offline-Ready)' : tenant.securityTier === 'CLIENT_CA' ? 'Client PKI (Custom CA)' : 'Let\'s Encrypt (Global)'}</div>
                                </div>
                                <div className="bg-white/5 rounded-xl p-3 border border-white/10">
                                  <div className="text-[10px] text-slate-500 font-bold uppercase mb-1">Validity</div>
                                  <div className="text-sm text-white font-bold">{tenant.securityTier === 'SOVEREIGN' ? '30 Years (RSA-4096)' : tenant.securityTier === 'CLIENT_CA' ? 'Per CA Policy' : 'Auto-Renew (90 Days)'}</div>
                                </div>
                              </div>
                              <p className="text-[11px] text-slate-500 mt-2">
                                {tenant.securityTier === 'SOVEREIGN'
                                  ? 'Organisasi Anda menggunakan Private CA dari X. Hubungi Supreme Admin untuk panduan install sertifikat di device.'
                                  : tenant.securityTier === 'CLIENT_CA'
                                  ? 'Organisasi Anda menggunakan CA sendiri (custom PKI). Sertifikat dan key di-manage oleh infrastruktur PKI internal organisasi.'
                                  : 'Koneksi menggunakan sertifikat Let\'s Encrypt yang dipercaya semua browser. Untuk beralih ke Private CA, hubungi Supreme Admin.'
                                }
                              </p>
                            </div>
                          ) : (
                            /* UPSELL STATE */
                            <div className="space-y-4">
                              <p className="text-sm text-amber-800 leading-relaxed">
                                Tingkatkan ke <strong>TLS Sovereign</strong> untuk mendapatkan infrastruktur komunikasi yang sepenuhnya tertutup 
                                dengan Private CA, zero-trust security, dan kemampuan operasi offline tanpa bergantung internet global.
                              </p>
                              <div className="grid grid-cols-3 gap-3">
                                <div className="bg-white rounded-xl p-3 border border-amber-200 text-center">
                                  <svg className="w-6 h-6 text-amber-600 mx-auto mb-1" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                                  <div className="text-[10px] font-bold text-amber-800">Private CA</div>
                                  <div className="text-[9px] text-amber-600">RSA-4096</div>
                                </div>
                                <div className="bg-white rounded-xl p-3 border border-amber-200 text-center">
                                  <svg className="w-6 h-6 text-amber-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636a9 9 0 010 12.728M5.636 18.364a9 9 0 010-12.728" /></svg>
                                  <div className="text-[10px] font-bold text-amber-800">Offline-Ready</div>
                                  <div className="text-[9px] text-amber-600">Zero Internet</div>
                                </div>
                                <div className="bg-white rounded-xl p-3 border border-amber-200 text-center">
                                  <svg className="w-6 h-6 text-amber-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
                                  <div className="text-[10px] font-bold text-amber-800">30 Years</div>
                                  <div className="text-[9px] text-amber-600">Certificate Life</div>
                                </div>
                              </div>
                              <button className="w-full py-3 bg-gradient-to-r from-amber-500 to-orange-500 text-white rounded-xl font-bold text-sm hover:shadow-lg hover:shadow-amber-500/20 transition-all hover:scale-[1.01] flex items-center justify-center gap-2">
                                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                                Upgrade ke TLS Sovereign
                              </button>
                            </div>
                          )}
                        </div>
                      </div>
                    );
                  })()}

                  <div className="bg-blue-50/50 border border-blue-100 rounded-2xl p-8">
                      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
                          <div className="flex-1">
                              <h3 className="text-lg font-bold text-blue-900 mb-2 uppercase tracking-wide">Organizational BYOK</h3>
                              <p className="text-sm text-blue-700 leading-relaxed max-w-xl">
                                  Aktifkan kedaulatan data total dengan menggunakan kunci enkripsi milik Anda sendiri. 
                                  Kunci ini akan digunakan untuk mengenkripsi semua transmisi video, audio, dan chat dalam organisasi Anda.
                              </p>
                          </div>
                          <div className="flex flex-col gap-4 w-full md:w-72">
                              <label className="flex items-center gap-3 cursor-pointer bg-white px-4 py-3 rounded-2xl border border-blue-200 shadow-sm transition-all hover:border-blue-400">
                                  <input 
                                      type="checkbox" 
                                      checked={orgByokEnabled} 
                                      onChange={e => setOrgByokEnabled(e.target.checked)} 
                                      className="w-5 h-5 text-blue-600 rounded-lg focus:ring-blue-500" 
                                  />
                                  <span className="text-xs font-black text-gray-700 uppercase tracking-widest">Enable BYOK Mode</span>
                              </label>
                              {orgByokEnabled && (
                                  <div className="space-y-2 animate-in fade-in slide-in-from-top-2 duration-300">
                                      <label className="text-[10px] font-black text-blue-600 uppercase ml-1">Custom Quantum Key</label>
                                      <input 
                                          type="text" 
                                          placeholder="Enter Encryption Key..." 
                                          value={orgByokKey} 
                                          onChange={e => setOrgByokKey(e.target.value)} 
                                          className="w-full text-xs font-mono bg-white border border-blue-200 rounded-2xl px-4 py-3 outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                      />
                                  </div>
                              )}
                          </div>
                      </div>
                      
                      <div className="mt-8 pt-8 border-t border-blue-100 flex justify-end">
                          <button 
                              onClick={handleSaveOrgByok}
                              className="px-8 py-3 bg-blue-600 text-white rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:bg-blue-700 transition-all shadow-lg hover:shadow-blue-500/20 active:scale-95"
                          >
                              Deploy Security Policy
                          </button>
                      </div>
                  </div>

                  <div className="mt-12">
                      <div className="flex items-center gap-2 text-emerald-600 mb-4">
                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"></path></svg>
                          <span className="text-xs font-black uppercase tracking-widest">Quantum Health Status: Protected</span>
                      </div>
                      <p className="text-[10px] text-gray-400 font-medium max-w-2xl italic">
                          Catatan: Setiap perubahan pada kebijakan keamanan akan dicatat dalam Quantum Ledger dan memerlukan waktu sinkronisasi hingga 50ms ke seluruh node global.
                      </p>
                  </div>
               </div>
            </div>
          )}
        </div>

      </main>

      {/* ADD USER MODAL */}
      {showAddUserModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
          <div className="bg-white p-8 rounded-xl shadow-2xl w-[400px]">
            <h2 className="text-xl font-bold mb-6 text-gray-900">Add New User</h2>
            <form onSubmit={handleAddUser}>
              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                <input type="email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500" required />
              </div>
              <div className="mb-6">
                <label className="block text-sm font-medium text-gray-700 mb-1">Temporary Password</label>
                <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500" required minLength={6} />
              </div>
              <div className="flex gap-3 justify-end">
                <button type="button" onClick={() => setShowAddUserModal(false)} className="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700">Add User</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* USER LIMITS MODAL (BYOK) */}
      {showLimitsModal && selectedUser && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
          <div className="bg-white w-full max-w-2xl rounded-xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
            <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
              <h2 className="text-xl font-bold text-gray-900">User Feature Limits</h2>
              <p className="text-sm text-gray-500 mt-1">Manage module access for <strong className="text-gray-800">{selectedUser.email}</strong>.</p>
            </div>
            
            <div className="p-6 overflow-y-auto flex-1">
               {/* USER LEVEL BYOK SECTION */}
               <div className="mb-10 bg-emerald-50/50 p-6 rounded-2xl border border-emerald-100">
                  <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                      <div className="flex-1">
                          <h3 className="text-sm font-black text-emerald-900 uppercase tracking-widest mb-1">User BYOK Sovereignty</h3>
                          <p className="text-[10px] text-emerald-700 font-medium">Berikan kedaulatan enkripsi individual kepada user ini. Kunci ini akan melampaui kunci organisasi.</p>
                      </div>
                      <div className="flex flex-col gap-2 w-full md:w-64">
                          <label className="flex items-center gap-2 cursor-pointer bg-white px-3 py-2 rounded-xl border border-emerald-200">
                              <input type="checkbox" checked={userByokEnabled} onChange={e => setUserByokEnabled(e.target.checked)} className="w-4 h-4 text-emerald-600 rounded" />
                              <span className="text-[10px] font-bold text-gray-700">Enable Individual BYOK</span>
                          </label>
                          {userByokEnabled && (
                              <input 
                                  type="text" 
                                  placeholder="Individual Quantum Key..." 
                                  value={userByokKey} 
                                  onChange={e => setUserByokKey(e.target.value)} 
                                  className="text-[10px] font-mono bg-white border border-emerald-200 rounded-xl px-3 py-2 outline-none focus:ring-2 focus:ring-emerald-500"
                              />
                          )}
                      </div>
                  </div>
               </div>

               <div className="space-y-4">
                {(() => {
                  // Get tenant's granted features
                  let tenantGranted: Record<string, string> = {};
                  try {
                    const raw = tenant?.licenses;
                    if (typeof raw === 'string') {
                      const js = JSON.parse(raw);
                      if (Array.isArray(js)) js.forEach((k: string) => tenantGranted[k] = "GRANTED");
                      else tenantGranted = js;
                    } else if (raw && typeof raw === 'object') {
                      if (Array.isArray(raw)) raw.forEach((k: string) => tenantGranted[k] = "GRANTED");
                      else tenantGranted = raw;
                    }
                  } catch(_e) {}

                  // Render features by category
                  return ['JVC', 'JC', 'XCU', 'XTM', 'IAM'].map(mod => {
                    const filtered = systemFeatures.filter(f => f.module === mod || (!f.module && mod === 'IAM'));
                    if (filtered.length === 0) return null;

                    return (
                      <div key={mod} className="mb-8 last:mb-0">
                        <div className="text-[10px] font-black text-gray-400 mb-3 tracking-[0.2em] border-l-4 border-blue-500 pl-3 uppercase">{mod} CAPABILITIES</div>
                        <div className="space-y-3">
                          {filtered.map((feat: Feature) => {
                            const tStatus = tenantGranted[feat.key] || 'HIDDEN';
                            
                            if (tStatus === 'HIDDEN') return null; // Invisible to tenant completely
                            
                            if (tStatus === 'UPSELL') {
                              return (
                                <div key={feat.key} className="flex justify-between items-center bg-gray-50 p-4 rounded-lg border border-gray-200 opacity-70">
                                  <div>
                                    <div className="font-bold text-gray-600 flex items-center gap-2 text-sm">
                                      <svg className="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd"></path></svg>
                                      {feat.name}
                                    </div>
                                    <div className="text-[10px] text-gray-500 font-mono mt-0.5">{feat.key}</div>
                                  </div>
                                  <div 
                                    onClick={() => setActiveTab('billing')}
                                    className="text-[10px] font-bold text-blue-600 px-3 py-1 bg-blue-50 border border-blue-200 rounded cursor-pointer hover:bg-blue-100 transition-colors uppercase tracking-wider"
                                  >
                                    Upgrade Plan
                                  </div>
                                </div>
                              );
                            }

                            // If GRANTED by Superadmin
                            const currentVal = userLicenses[feat.key] || 'GRANTED';
                            return (
                              <div key={feat.key} className="flex justify-between items-center bg-white p-4 rounded-lg border border-gray-200">
                                <div>
                                  <div className="font-bold text-gray-900 text-sm">{feat.name}</div>
                                  <div className="text-[10px] text-gray-500 font-mono mt-0.5">{feat.key}</div>
                                </div>
                                <select 
                                  value={currentVal}
                                  onChange={(e) => setUserLicenses({...userLicenses, [feat.key]: e.target.value})}
                                  className={`text-[10px] font-bold px-3 py-1.5 rounded outline-none border focus:ring-2 focus:ring-blue-500 ${
                                    currentVal === 'GRANTED' ? 'bg-green-50 text-green-700 border-green-200' : 'bg-red-50 text-red-700 border-red-200'
                                  }`}
                                >
                                  <option value="GRANTED">✅ ALLOWED</option>
                                  <option value="HIDDEN">🚫 BLOCKED</option>
                                </select>
                              </div>
                            );
                          })}
                        </div>
                      </div>
                    );
                  });
                })()}
              </div>
            </div>

            <div className="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end gap-3">
              <button onClick={() => setShowLimitsModal(false)} className="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
              <button onClick={handleSaveLimits} className="px-6 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700">Save Limits</button>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}