import React, { useState } from "react";
import { 
  SaaSTenant, 
  SaaSTicket, 
  SaaSTicketCategory, 
  SaaSTicketPriority, 
  SaaSTicketStatus, 
  SaaSTicketMessage,
  TenantMembershipHistory, 
  MembershipActivationType,
  SaaSPlanTier,
  SaaSStatus,
  SaaSEmailNotification,
  Employee
} from "../../types";
import { 
  buildTicketEmailTemplate, 
  buildMembershipEmailTemplate 
} from "../../data/saasTicketsAndOpsData";
import { 
  Headphones, 
  UserCheck, 
  Clock, 
  AlertTriangle, 
  CheckCircle2, 
  XCircle, 
  Plus, 
  Send, 
  Mail, 
  MessageSquare, 
  Filter, 
  Search, 
  Building2, 
  Calendar, 
  ShieldCheck, 
  Sparkles, 
  ChevronRight, 
  Layers, 
  CreditCard, 
  AlertCircle, 
  Eye, 
  User, 
  FileText, 
  Phone, 
  History,
  Timer,
  Check
} from "lucide-react";

interface SaasOperationsDeskProps {
  tenants: SaaSTenant[];
  onUpdateTenants: (updated: SaaSTenant[]) => void;
  tickets: SaaSTicket[];
  onUpdateTickets: (updated: SaaSTicket[]) => void;
  membershipHistories: TenantMembershipHistory[];
  onUpdateMembershipHistories: (updated: TenantMembershipHistory[]) => void;
  onDispatchEmail: (email: SaaSEmailNotification) => void;
  onOpenEmailOutbox: (preselectedId?: string) => void;
  currentUser?: Employee;
}

export const SaasOperationsDesk: React.FC<SaasOperationsDeskProps> = ({
  tenants,
  onUpdateTenants,
  tickets,
  onUpdateTickets,
  membershipHistories,
  onUpdateMembershipHistories,
  onDispatchEmail,
  onOpenEmailOutbox,
  currentUser
}) => {
  const [opsSubTab, setOpsSubTab] = useState<"tickets" | "membership">("tickets");

  // ==========================================
  // 1. TICKET MANAGEMENT STATES
  // ==========================================
  const [ticketSearch, setTicketSearch] = useState("");
  const [filterPriority, setFilterPriority] = useState<string>("ALL");
  const [filterStatus, setFilterStatus] = useState<string>("ALL");
  const [filterCategory, setFilterCategory] = useState<string>("ALL");

  const [activeTicket, setActiveTicket] = useState<SaaSTicket | null>(null);
  const [replyMessage, setReplyMessage] = useState("");
  const [isInternalNote, setIsInternalNote] = useState(false);
  const [targetTicketStatus, setTargetTicketStatus] = useState<SaaSTicketStatus>("In Progress");
  const [resolutionSummary, setResolutionSummary] = useState("");
  const [sendEmailOnReply, setSendEmailOnReply] = useState(true);

  const [isNewTicketModalOpen, setIsNewTicketModalOpen] = useState(false);
  const [newTicketTenantId, setNewTicketTenantId] = useState(tenants[0]?.id || "");
  const [newTicketTitle, setNewTicketTitle] = useState("");
  const [newTicketCategory, setNewTicketCategory] = useState<SaaSTicketCategory>("Bug / System Error");
  const [newTicketPriority, setNewTicketPriority] = useState<SaaSTicketPriority>("High");
  const [newTicketDescription, setNewTicketDescription] = useState("");
  const [newTicketContactName, setNewTicketContactName] = useState("");
  const [newTicketContactEmail, setNewTicketContactEmail] = useState("");

  // ==========================================
  // 2. MEMBERSHIP ACTIVATION STATES
  // ==========================================
  const [membershipSearch, setMembershipSearch] = useState("");
  const [filterMembershipStatus, setFilterMembershipStatus] = useState<string>("ALL");
  const [isActivationModalOpen, setIsActivationModalOpen] = useState(false);
  const [selectedTenantForActivation, setSelectedTenantForActivation] = useState<SaaSTenant | null>(null);
  const [activationType, setActivationType] = useState<MembershipActivationType>("TRIAL_7_DAYS");
  const [selectedPlanTier, setSelectedPlanTier] = useState<SaaSPlanTier>("Enterprise");
  const [customExpiryDate, setCustomExpiryDate] = useState("");
  const [activationNotes, setActivationNotes] = useState("");
  const [sendEmailOnActivation, setSendEmailOnActivation] = useState(true);

  const agentName = currentUser?.name || "Rina Kartika (Operasional Lead)";

  // Format currency
  const formatRupiah = (num: number) => {
    return new Intl.NumberFormat("id-ID", {
      style: "currency",
      currency: "IDR",
      maximumFractionDigits: 0
    }).format(num);
  };

  // Helper date calculations
  const calculateDefaultExpiry = (type: MembershipActivationType) => {
    const today = new Date();
    if (type === "TRIAL_7_DAYS") {
      today.setDate(today.getDate() + 7);
    } else if (type === "SUBSCRIBER_ACTIVE") {
      today.setFullYear(today.getFullYear() + 1); // 1 year default
    } else if (type === "INACTIVE_1_MONTH") {
      today.setDate(today.getDate() + 30); // 30 days grace period
    }
    return today.toISOString().split("T")[0];
  };

  // ==========================================
  // HANDLERS: TICKET MANAGEMENT
  // ==========================================
  const handleOpenTicketDetails = (t: SaaSTicket) => {
    setActiveTicket(t);
    setTargetTicketStatus(t.status);
    setReplyMessage("");
    setIsInternalNote(false);
    setResolutionSummary(t.resolutionSummary || "");
  };

  const handleSendTicketReply = () => {
    if (!activeTicket || !replyMessage.trim()) return;

    const newMessage: SaaSTicketMessage = {
      id: `msg-${Date.now()}`,
      senderType: "Operasional",
      senderName: agentName,
      senderRole: "Operasional Support Specialist",
      message: replyMessage.trim(),
      timestamp: new Date().toLocaleString("id-ID", { dateStyle: "short", timeStyle: "short" }),
      isInternalNote
    };

    const isResolved = targetTicketStatus === "Resolved" || targetTicketStatus === "Closed";
    const resolvedTime = isResolved ? new Date().toLocaleString("id-ID", { dateStyle: "short", timeStyle: "short" }) : activeTicket.resolvedAt;

    const updatedTicket: SaaSTicket = {
      ...activeTicket,
      status: targetTicketStatus,
      messages: [...activeTicket.messages, newMessage],
      resolvedAt: resolvedTime,
      resolutionSummary: isResolved ? (resolutionSummary.trim() || replyMessage.trim()) : activeTicket.resolutionSummary,
      emailNotifiedCount: sendEmailOnReply && !isInternalNote ? activeTicket.emailNotifiedCount + 1 : activeTicket.emailNotifiedCount
    };

    // If email checked & not internal note, generate email & dispatch
    if (sendEmailOnReply && !isInternalNote) {
      const emailObj = buildTicketEmailTemplate(
        updatedTicket,
        replyMessage.trim(),
        targetTicketStatus,
        agentName
      );
      onDispatchEmail(emailObj);
    }

    const updatedAll = tickets.map(t => t.id === updatedTicket.id ? updatedTicket : t);
    onUpdateTickets(updatedAll);
    setActiveTicket(updatedTicket);
    setReplyMessage("");
  };

  const handleCreateNewTicket = (e: React.FormEvent) => {
    e.preventDefault();
    const targetTenant = tenants.find(t => t.id === newTicketTenantId) || tenants[0];
    if (!targetTenant || !newTicketTitle.trim() || !newTicketDescription.trim()) return;

    const ticketId = `TCK-2026-${String(tickets.length + 801).padStart(4, "0")}`;
    const nowStr = new Date().toLocaleString("id-ID", { dateStyle: "short", timeStyle: "short" });

    const slaHoursMap: Record<SaaSTicketPriority, number> = {
      Critical: 4,
      High: 12,
      Medium: 24,
      Low: 48
    };

    const firstMsg: SaaSTicketMessage = {
      id: `msg-${Date.now()}`,
      senderType: "Client",
      senderName: newTicketContactName || targetTenant.contactPerson.name,
      senderRole: targetTenant.contactPerson.role || "Client Representative",
      message: newTicketDescription.trim(),
      timestamp: nowStr
    };

    const newTicket: SaaSTicket = {
      id: ticketId,
      tenantId: targetTenant.id,
      tenantName: targetTenant.name,
      tenantCode: targetTenant.code,
      clientContactName: newTicketContactName || targetTenant.contactPerson.name,
      clientEmail: newTicketContactEmail || targetTenant.contactPerson.email,
      clientPhone: targetTenant.contactPerson.phone,
      title: newTicketTitle.trim(),
      category: newTicketCategory,
      priority: newTicketPriority,
      status: "Open",
      assignedTo: agentName,
      slaDueHours: slaHoursMap[newTicketPriority],
      createdAt: nowStr,
      messages: [firstMsg],
      emailNotifiedCount: 1
    };

    // Send confirmation email to client
    const emailObj = buildTicketEmailTemplate(
      newTicket,
      `Keluhan Anda dengan nomor #${newTicket.id} telah diterima oleh Tim Operasional dan sedang dalam antrian penanganan dengan SLA ${newTicket.slaDueHours} jam.`,
      "Open (Diterima)",
      agentName
    );
    onDispatchEmail(emailObj);

    onUpdateTickets([newTicket, ...tickets]);
    setIsNewTicketModalOpen(false);
    // Reset form
    setNewTicketTitle("");
    setNewTicketDescription("");
  };

  // ==========================================
  // HANDLERS: MEMBERSHIP ACTIVATION
  // ==========================================
  const handleOpenActivationModal = (tenant: SaaSTenant, type: MembershipActivationType) => {
    setSelectedTenantForActivation(tenant);
    setActivationType(type);
    setSelectedPlanTier(tenant.plan || "Enterprise");
    setCustomExpiryDate(calculateDefaultExpiry(type));
    setActivationNotes(
      type === "TRIAL_7_DAYS" 
        ? "Aktivasi akses uji coba 7 hari untuk evaluasi modul lengkap."
        : type === "SUBSCRIBER_ACTIVE"
        ? "Aktivasi keanggotaan pelanggan resmi aktif dan lisensi produksi."
        : "Pengalihan ke masa inaktif (grace period 1 bulan) menunggu konfirmasi perpanjangan tagihan."
    );
    setIsActivationModalOpen(true);
  };

  const handleExecuteActivation = () => {
    if (!selectedTenantForActivation) return;

    const expiry = customExpiryDate || calculateDefaultExpiry(activationType);
    const nowStr = new Date().toLocaleString("id-ID", { dateStyle: "short", timeStyle: "short" });

    let newStatus: SaaSStatus = "Active";
    let actionLabel = "Pelanggan Aktif";
    let plan = selectedPlanTier;

    if (activationType === "TRIAL_7_DAYS") {
      newStatus = "Trial";
      actionLabel = "Uji Coba 7 Hari";
      plan = "Trial";
    } else if (activationType === "SUBSCRIBER_ACTIVE") {
      newStatus = "Active";
      actionLabel = `Pelanggan Aktif (${plan})`;
    } else if (activationType === "INACTIVE_1_MONTH") {
      newStatus = "Inactive (Grace Period)";
      actionLabel = "Masa Inaktif (1 Bulan)";
    }

    // Update Tenant
    const updatedTenant: SaaSTenant = {
      ...selectedTenantForActivation,
      status: newStatus,
      plan: plan,
      renewalDate: expiry
    };

    const updatedTenantsList = tenants.map(t => t.id === updatedTenant.id ? updatedTenant : t);
    onUpdateTenants(updatedTenantsList);

    // Record History
    const historyItem: TenantMembershipHistory = {
      id: `MEM-${Date.now()}`,
      tenantId: updatedTenant.id,
      tenantName: updatedTenant.name,
      actionType: activationType,
      actionLabel,
      previousStatus: selectedTenantForActivation.status,
      newStatus: newStatus,
      plan: plan,
      activatedBy: agentName,
      startDate: new Date().toISOString().split("T")[0],
      expiryDate: expiry,
      monthlyFee: updatedTenant.monthlyFee,
      notes: activationNotes.trim(),
      clientEmailSent: sendEmailOnActivation,
      clientEmailSubject: `[Aktivasi ${actionLabel}] Notifikasi Keanggotaan - ${updatedTenant.name}`,
      timestamp: nowStr
    };

    onUpdateMembershipHistories([historyItem, ...membershipHistories]);

    // Dispatch Email to Client
    if (sendEmailOnActivation) {
      const emailObj = buildMembershipEmailTemplate(
        updatedTenant,
        activationType,
        expiry,
        agentName,
        activationNotes.trim()
      );
      onDispatchEmail(emailObj);
    }

    setIsActivationModalOpen(false);
  };

  // Filtered Tickets
  const filteredTickets = tickets.filter(t => {
    const matchSearch = 
      t.title.toLowerCase().includes(ticketSearch.toLowerCase()) ||
      t.tenantName.toLowerCase().includes(ticketSearch.toLowerCase()) ||
      t.id.toLowerCase().includes(ticketSearch.toLowerCase()) ||
      t.clientContactName.toLowerCase().includes(ticketSearch.toLowerCase());

    const matchPriority = filterPriority === "ALL" || t.priority === filterPriority;
    const matchStatus = filterStatus === "ALL" || t.status === filterStatus;
    const matchCategory = filterCategory === "ALL" || t.category === filterCategory;

    return matchSearch && matchPriority && matchStatus && matchCategory;
  });

  // Filtered Tenants for Membership
  const filteredMembershipTenants = tenants.filter(t => {
    const matchSearch = 
      t.name.toLowerCase().includes(membershipSearch.toLowerCase()) ||
      t.code.toLowerCase().includes(membershipSearch.toLowerCase()) ||
      t.domain.toLowerCase().includes(membershipSearch.toLowerCase());

    const matchStatus = filterMembershipStatus === "ALL" || t.status === filterMembershipStatus;
    return matchSearch && matchStatus;
  });

  // Metrics
  const openTicketsCount = tickets.filter(t => t.status === "Open").length;
  const inProgressTicketsCount = tickets.filter(t => t.status === "In Progress").length;
  const criticalTicketsCount = tickets.filter(t => t.priority === "Critical" && t.status !== "Resolved" && t.status !== "Closed").length;
  const trialTenantsCount = tenants.filter(t => t.status === "Trial").length;
  const activeSubscribersCount = tenants.filter(t => t.status === "Active").length;
  const inactiveTenantsCount = tenants.filter(t => t.status === "Inactive (Grace Period)" || t.status === "Suspended" || t.status === "Past Due").length;

  return (
    <div className="space-y-6">
      
      {/* Top Banner & Navigation Sub-Tabs */}
      <div className="p-6 bg-gradient-to-r from-slate-900 via-sky-950/40 to-slate-900 border border-sky-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-sky-500/20 text-sky-400 border border-sky-500/40 rounded-xl">
              <Headphones 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 OPERASIONAL SAAS & TENANT SERVICE
                <span className="px-2 py-0.5 bg-sky-500/20 text-sky-300 border border-sky-500/40 text-[10px] rounded-full">
                  OPERATIONS DESK
                </span>
              </h2>
              <p className="text-xs text-slate-400">
                Pusat penanganan tiket keluhan pelanggan, aktivasi status membership (Uji Coba 7 Hari, Pelanggan, Masa Inaktif 1 Bulan), dan otomatisasi email klien.
              </p>
            </div>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={() => onOpenEmailOutbox()}
            className="px-3.5 py-2 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>Lihat Log Email Klien</span>
          </button>
        </div>
      </div>

      {/* SUB-TAB SELECTOR (A.1 vs A.2) */}
      <div className="flex items-center gap-2 border-b border-slate-800 pb-2">
        <button
          onClick={() => setOpsSubTab("tickets")}
          className={`px-4 py-2.5 rounded-xl font-mono text-xs font-bold transition-all flex items-center gap-2 cursor-pointer ${
            opsSubTab === "tickets"
              ? "bg-sky-500 text-slate-950 shadow-lg shadow-sky-500/20"
              : "bg-slate-900 text-slate-400 hover:text-white hover:bg-slate-800"
          }`}
        >
          <MessageSquare className="w-4 h-4" />
          <span>A.1 Penanganan Tiket Keluhan ({tickets.length})</span>
          {openTicketsCount > 0 && (
            <span className="px-1.5 py-0.2 bg-red-600 text-white rounded-full text-[10px] font-black">
              {openTicketsCount}
            </span>
          )}
        </button>

        <button
          onClick={() => setOpsSubTab("membership")}
          className={`px-4 py-2.5 rounded-xl font-mono text-xs font-bold transition-all flex items-center gap-2 cursor-pointer ${
            opsSubTab === "membership"
              ? "bg-sky-500 text-slate-950 shadow-lg shadow-sky-500/20"
              : "bg-slate-900 text-slate-400 hover:text-white hover:bg-slate-800"
          }`}
        >
          <UserCheck className="w-4 h-4" />
          <span>A.2 Aktivasi Membership Tenant ({tenants.length})</span>
        </button>
      </div>

      {/* ========================================================================= */}
      {/* SECTION A.1: MENANGANI TIKET KELUHAN PELANGGAN SAAS */}
      {/* ========================================================================= */}
      {opsSubTab === "tickets" && (
        <div className="space-y-6">
          
          {/* Quick 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>Tiket Baru (Open)</span>
                <AlertCircle className="w-3.5 h-3.5 text-amber-400" />
              </div>
              <div className="text-xl font-black text-amber-400">{openTicketsCount}</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 Ditangani</span>
                <Clock className="w-3.5 h-3.5 text-sky-400" />
              </div>
              <div className="text-xl font-black text-sky-400">{inProgressTicketsCount}</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>Tiket Critical SLA</span>
                <AlertTriangle className="w-3.5 h-3.5 text-red-400" />
              </div>
              <div className="text-xl font-black text-red-400">{criticalTicketsCount}</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>Email Notifikasi Terkirim</span>
                <Mail className="w-3.5 h-3.5 text-emerald-400" />
              </div>
              <div className="text-xl font-black text-emerald-400">
                {tickets.reduce((acc, t) => acc + t.emailNotifiedCount, 0)}
              </div>
            </div>
          </div>

          {/* Search, Filters, & Action */}
          <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 nomor tiket, judul, tenant, pemohon..."
                  value={ticketSearch}
                  onChange={(e) => setTicketSearch(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-sky-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-sky-500 cursor-pointer"
              >
                <option value="ALL">Semua Status</option>
                <option value="Open">Open (Baru)</option>
                <option value="In Progress">In Progress (Ditangani)</option>
                <option value="Waiting Client">Waiting Client</option>
                <option value="Resolved">Resolved (Selesai)</option>
                <option value="Closed">Closed</option>
              </select>

              <select
                value={filterPriority}
                onChange={(e) => setFilterPriority(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-sky-500 cursor-pointer"
              >
                <option value="ALL">Semua Prioritas</option>
                <option value="Critical">Critical (SLA 4 Jam)</option>
                <option value="High">High (SLA 12 Jam)</option>
                <option value="Medium">Medium (SLA 24 Jam)</option>
                <option value="Low">Low (SLA 48 Jam)</option>
              </select>
            </div>

            <button
              onClick={() => setIsNewTicketModalOpen(true)}
              className="px-4 py-2 bg-gradient-to-r from-sky-500 to-indigo-600 hover:from-sky-400 hover:to-indigo-500 text-slate-950 font-black text-xs rounded-xl shadow flex items-center gap-1.5 transition-all cursor-pointer shrink-0"
            >
              <Plus className="w-4 h-4" />
              <span>Buat Tiket Keluhan Baru</span>
            </button>
          </div>

          {/* Ticket List Table */}
          <div className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-lg">
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs font-mono">
                <thead className="bg-slate-950 text-slate-400 border-b border-slate-800 uppercase tracking-wider text-[10px]">
                  <tr>
                    <th className="py-3 px-4">No. Tiket & Tanggal</th>
                    <th className="py-3 px-4">Tenant / Pelanggan</th>
                    <th className="py-3 px-4">Subjek Keluhan</th>
                    <th className="py-3 px-4">Kategori & Prioritas</th>
                    <th className="py-3 px-4">Status & SLA</th>
                    <th className="py-3 px-4">Petugas Operasional</th>
                    <th className="py-3 px-4 text-right">Aksi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800 text-slate-200">
                  {filteredTickets.length === 0 ? (
                    <tr>
                      <td colSpan={7} className="py-8 text-center text-slate-500">
                        Tidak ada tiket keluhan yang sesuai dengan pencarian / filter.
                      </td>
                    </tr>
                  ) : (
                    filteredTickets.map((t) => (
                      <tr key={t.id} className="hover:bg-slate-800/50 transition-colors">
                        <td className="py-3 px-4">
                          <div className="font-bold text-sky-400">{t.id}</div>
                          <div className="text-[10px] text-slate-500">{t.createdAt}</div>
                        </td>

                        <td className="py-3 px-4">
                          <div className="font-bold text-white line-clamp-1">{t.tenantName}</div>
                          <div className="text-[10px] text-slate-400">{t.clientContactName}</div>
                        </td>

                        <td className="py-3 px-4 max-w-[280px]">
                          <div className="font-semibold text-slate-100 line-clamp-1">{t.title}</div>
                          <div className="text-[10px] text-slate-400 line-clamp-1">
                            {t.messages[t.messages.length - 1]?.message || "-"}
                          </div>
                        </td>

                        <td className="py-3 px-4">
                          <div className="text-[11px] text-slate-300">{t.category}</div>
                          <span className={`inline-block px-1.5 py-0.2 text-[9px] font-bold rounded mt-0.5 ${
                            t.priority === "Critical" ? "bg-red-500/20 text-red-400 border border-red-500/40" :
                            t.priority === "High" ? "bg-amber-500/20 text-amber-400 border border-amber-500/40" :
                            t.priority === "Medium" ? "bg-sky-500/20 text-sky-300 border border-sky-500/40" :
                            "bg-slate-700 text-slate-300"
                          }`}>
                            {t.priority} (SLA {t.slaDueHours}h)
                          </span>
                        </td>

                        <td className="py-3 px-4">
                          <span className={`px-2 py-0.5 text-[10px] font-bold rounded-full inline-block ${
                            t.status === "Open" ? "bg-amber-500/20 text-amber-300 border border-amber-500/40" :
                            t.status === "In Progress" ? "bg-sky-500/20 text-sky-300 border border-sky-500/40" :
                            t.status === "Waiting Client" ? "bg-purple-500/20 text-purple-300 border border-purple-500/40" :
                            t.status === "Resolved" ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/40" :
                            "bg-slate-800 text-slate-400 border border-slate-700"
                          }`}>
                            {t.status}
                          </span>
                          {t.emailNotifiedCount > 0 && (
                            <div className="text-[9px] text-emerald-400 flex items-center gap-1 mt-0.5">
                              <Mail className="w-2.5 h-2.5" />
                              <span>{t.emailNotifiedCount} email terkirim</span>
                            </div>
                          )}
                        </td>

                        <td className="py-3 px-4 text-slate-400 text-[11px]">
                          {t.assignedTo || "-"}
                        </td>

                        <td className="py-3 px-4 text-right">
                          <button
                            onClick={() => handleOpenTicketDetails(t)}
                            className="px-3 py-1.5 bg-sky-600 hover:bg-sky-500 text-white font-bold text-xs rounded-lg transition-all flex items-center gap-1 ml-auto cursor-pointer shadow"
                          >
                            <Headphones className="w-3.5 h-3.5" />
                            <span>Tangani & Respon</span>
                          </button>
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </div>

        </div>
      )}

      {/* ========================================================================= */}
      {/* SECTION A.2: AKTIVASI MEMBERSHIP TENANT STATUS */}
      {/* ========================================================================= */}
      {opsSubTab === "membership" && (
        <div className="space-y-6">
          
          {/* 3 Activation Cards Feature Overview */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            
            {/* 1. Uji Coba 7 Hari */}
            <div className="p-5 bg-slate-900 border border-emerald-500/40 rounded-2xl space-y-3 relative overflow-hidden group hover:border-emerald-400 transition-all shadow-lg">
              <div className="absolute top-0 right-0 w-24 h-24 bg-emerald-500/10 rounded-full blur-2xl -mr-6 -mt-6"></div>
              <div className="flex items-center justify-between">
                <span className="px-2.5 py-0.5 bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 rounded-full text-[10px] font-mono font-bold">
                  MODE AKTIVASI 1
                </span>
                <Sparkles className="w-4 h-4 text-emerald-400" />
              </div>
              <div>
                <h3 className="text-base font-black text-white font-mono">Uji Coba 7 Hari (Trial)</h3>
                <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                  Aktivasi instan mode sandbox evaluasi fitur selama 7 hari kalender. Akses modul penuh untuk pengujian calon pelanggan.
                </p>
              </div>
              <div className="pt-2 border-t border-slate-800/80 text-[11px] font-mono text-emerald-400 space-y-1">
                <div className="flex items-center gap-1.5">
                  <Check className="w-3.5 h-3.5" />
                  <span>Otomatis hitung Expired H+7</span>
                </div>
                <div className="flex items-center gap-1.5">
                  <Mail className="w-3.5 h-3.5" />
                  <span>Kirim Welcome Email & Login Sandbox</span>
                </div>
              </div>
            </div>

            {/* 2. Pelanggan Aktif */}
            <div className="p-5 bg-slate-900 border border-sky-500/40 rounded-2xl space-y-3 relative overflow-hidden group hover:border-sky-400 transition-all shadow-lg">
              <div className="absolute top-0 right-0 w-24 h-24 bg-sky-500/10 rounded-full blur-2xl -mr-6 -mt-6"></div>
              <div className="flex items-center justify-between">
                <span className="px-2.5 py-0.5 bg-sky-500/20 text-sky-300 border border-sky-500/40 rounded-full text-[10px] font-mono font-bold">
                  MODE AKTIVASI 2
                </span>
                <UserCheck className="w-4 h-4 text-sky-400" />
              </div>
              <div>
                <h3 className="text-base font-black text-white font-mono">Pelanggan Resmi (Active)</h3>
                <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                  Aktivasi status pelanggan resmi (Enterprise, Professional, Business Starter) dengan SLA 99.9% dan dukungan prioritas penuh.
                </p>
              </div>
              <div className="pt-2 border-t border-slate-800/80 text-[11px] font-mono text-sky-400 space-y-1">
                <div className="flex items-center gap-1.5">
                  <Check className="w-3.5 h-3.5" />
                  <span>Setup Lisensi Produksi & Kuota Karyawan</span>
                </div>
                <div className="flex items-center gap-1.5">
                  <Mail className="w-3.5 h-3.5" />
                  <span>Kirim Surat Konfirmasi & Invoice Aktif</span>
                </div>
              </div>
            </div>

            {/* 3. Masa Inaktif 1 Bulan */}
            <div className="p-5 bg-slate-900 border border-amber-500/40 rounded-2xl space-y-3 relative overflow-hidden group hover:border-amber-400 transition-all shadow-lg">
              <div className="absolute top-0 right-0 w-24 h-24 bg-amber-500/10 rounded-full blur-2xl -mr-6 -mt-6"></div>
              <div className="flex items-center justify-between">
                <span className="px-2.5 py-0.5 bg-amber-500/20 text-amber-300 border border-amber-500/40 rounded-full text-[10px] font-mono font-bold">
                  MODE AKTIVASI 3
                </span>
                <Timer className="w-4 h-4 text-amber-400" />
              </div>
              <div>
                <h3 className="text-base font-black text-white font-mono">Masa Inaktif (1 Bulan)</h3>
                <p className="text-xs text-slate-400 mt-1 leading-relaxed">
                  Pengalihan tenant ke masa tenggang 30 hari (Grace Period) karena invoice belum lunas sebelum pembersihan arsip permanen.
                </p>
              </div>
              <div className="pt-2 border-t border-slate-800/80 text-[11px] font-mono text-amber-400 space-y-1">
                <div className="flex items-center gap-1.5">
                  <Check className="w-3.5 h-3.5" />
                  <span>Penguncian Modul Transaksional</span>
                </div>
                <div className="flex items-center gap-1.5">
                  <Mail className="w-3.5 h-3.5" />
                  <span>Kirim Surat Peringatan Grace Period 30 Hari</span>
                </div>
              </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 tenant, kode, domain..."
                  value={membershipSearch}
                  onChange={(e) => setMembershipSearch(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-sky-500"
                />
              </div>

              <select
                value={filterMembershipStatus}
                onChange={(e) => setFilterMembershipStatus(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-sky-500 cursor-pointer"
              >
                <option value="ALL">Semua Status Membership</option>
                <option value="Active">Active (Pelanggan)</option>
                <option value="Trial">Trial (Uji Coba)</option>
                <option value="Inactive (Grace Period)">Masa Inaktif (Grace Period)</option>
                <option value="Suspended">Suspended</option>
                <option value="Past Due">Past Due</option>
              </select>
            </div>

            <div className="text-slate-400 text-xs">
              Total Tenant: <strong className="text-white">{tenants.length}</strong> | 
              Aktif: <strong className="text-emerald-400">{activeSubscribersCount}</strong> | 
              Trial: <strong className="text-sky-400">{trialTenantsCount}</strong> | 
              Inaktif: <strong className="text-amber-400">{inactiveTenantsCount}</strong>
            </div>
          </div>

          {/* Tenants Membership Table with Quick Action Triggers */}
          <div className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-lg">
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs font-mono">
                <thead className="bg-slate-950 text-slate-400 border-b border-slate-800 uppercase tracking-wider text-[10px]">
                  <tr>
                    <th className="py-3 px-4">Nama Tenant & Kode</th>
                    <th className="py-3 px-4">Paket SaaS</th>
                    <th className="py-3 px-4">Status Saat Ini</th>
                    <th className="py-3 px-4">Batas Berlaku / Renewal</th>
                    <th className="py-3 px-4">Kontak Klien (Email)</th>
                    <th className="py-3 px-4 text-center">Aksi Cepat Aktivasi Operasional</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-800 text-slate-200">
                  {filteredMembershipTenants.map((tenant) => (
                    <tr key={tenant.id} className="hover:bg-slate-800/50 transition-colors">
                      <td className="py-3 px-4">
                        <div className="font-bold text-white flex items-center gap-2">
                          <Building2 className="w-4 h-4 text-sky-400 shrink-0" />
                          <span>{tenant.name}</span>
                        </div>
                        <div className="text-[10px] text-slate-400 pl-6">
                          ID: <span className="text-sky-400 font-bold">{tenant.code}</span> | Domain: {tenant.domain}
                        </div>
                      </td>

                      <td className="py-3 px-4">
                        <span className="px-2 py-0.5 bg-slate-800 border border-slate-700 rounded text-[11px] font-bold text-slate-200">
                          {tenant.plan}
                        </span>
                        <div className="text-[10px] text-slate-400 mt-0.5">
                          {formatRupiah(tenant.monthlyFee)} / bln
                        </div>
                      </td>

                      <td className="py-3 px-4">
                        <span className={`px-2.5 py-1 text-[10px] font-bold rounded-full inline-block ${
                          tenant.status === "Active" ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/40" :
                          tenant.status === "Trial" ? "bg-sky-500/20 text-sky-300 border border-sky-500/40" :
                          tenant.status === "Inactive (Grace Period)" ? "bg-amber-500/20 text-amber-300 border border-amber-500/40" :
                          "bg-red-500/20 text-red-400 border border-red-500/40"
                        }`}>
                          {tenant.status === "Inactive (Grace Period)" ? "Masa Inaktif (1 Bulan)" : tenant.status}
                        </span>
                      </td>

                      <td className="py-3 px-4">
                        <div className="text-slate-200 font-semibold">{tenant.renewalDate || "-"}</div>
                        <div className="text-[10px] text-slate-400">{tenant.billingCycle}</div>
                      </td>

                      <td className="py-3 px-4 text-slate-300 text-[11px]">
                        <div>{tenant.contactPerson.name}</div>
                        <div className="text-[10px] text-slate-400 flex items-center gap-1">
                          <Mail className="w-3 h-3 text-sky-400" />
                          <span>{tenant.contactPerson.email}</span>
                        </div>
                      </td>

                      <td className="py-3 px-4">
                        <div className="flex items-center justify-center gap-1.5 flex-wrap">
                          {/* Quick 1: Uji Coba 7 Hari */}
                          <button
                            onClick={() => handleOpenActivationModal(tenant, "TRIAL_7_DAYS")}
                            className="px-2 py-1 bg-emerald-950 hover:bg-emerald-900 text-emerald-300 border border-emerald-500/50 rounded-lg text-[10px] font-bold transition-all cursor-pointer shadow"
                            title="Aktifkan Status Uji Coba 7 Hari & Kirim Email"
                          >
                            + Trial 7 Hari
                          </button>

                          {/* Quick 2: Pelanggan Aktif */}
                          <button
                            onClick={() => handleOpenActivationModal(tenant, "SUBSCRIBER_ACTIVE")}
                            className="px-2 py-1 bg-sky-600 hover:bg-sky-500 text-white rounded-lg text-[10px] font-bold transition-all cursor-pointer shadow"
                            title="Aktifkan Status Pelanggan Resmi & Kirim Email"
                          >
                            ✓ Pelanggan Aktif
                          </button>

                          {/* Quick 3: Masa Inaktif 1 Bulan */}
                          <button
                            onClick={() => handleOpenActivationModal(tenant, "INACTIVE_1_MONTH")}
                            className="px-2 py-1 bg-amber-950 hover:bg-amber-900 text-amber-300 border border-amber-500/50 rounded-lg text-[10px] font-bold transition-all cursor-pointer shadow"
                            title="Set Masa Inaktif 1 Bulan & Kirim Email Warning"
                          >
                            ⏳ Inaktif (1 Bulan)
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Audit Log Riwayat Aktivasi Membership */}
          <div className="p-4 bg-slate-900 border border-slate-800 rounded-xl space-y-3">
            <div className="flex items-center justify-between">
              <h4 className="text-xs font-bold text-white font-mono flex items-center gap-2">
                <History className="w-4 h-4 text-sky-400" />
                <span>Riwayat Audit Aktivasi & Perubahan Status Membership</span>
              </h4>
              <span className="text-[10px] font-mono text-slate-400">
                {membershipHistories.length} Log Aktivasi Tersimpan
              </span>
            </div>

            <div className="space-y-2">
              {membershipHistories.slice(0, 5).map((log) => (
                <div key={log.id} className="p-3 bg-slate-950 border border-slate-800 rounded-lg flex flex-wrap items-center justify-between gap-3 text-xs font-mono">
                  <div className="space-y-0.5">
                    <div className="flex items-center gap-2">
                      <strong className="text-white">{log.tenantName}</strong>
                      <span className="px-1.5 py-0.2 bg-sky-500/20 text-sky-300 text-[10px] rounded">
                        {log.actionLabel}
                      </span>
                    </div>
                    <p className="text-[11px] text-slate-400">{log.notes}</p>
                  </div>

                  <div className="text-right space-y-0.5">
                    <div className="text-[10px] text-slate-400">Oleh: {log.activatedBy}</div>
                    <div className="text-[10px] text-emerald-400 flex items-center gap-1 justify-end">
                      <CheckCircle2 className="w-3 h-3" />
                      <span>Email Terkirim ({log.timestamp})</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

        </div>
      )}

      {/* ========================================================================= */}
      {/* MODAL: DETAIL & RESPON TIKET KELUHAN OPERASIONAL */}
      {/* ========================================================================= */}
      {activeTicket && (
        <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-4xl max-h-[90vh] flex flex-col shadow-2xl overflow-hidden text-slate-100">
            
            {/* Modal Header */}
            <div className="px-6 py-4 bg-slate-800 border-b border-slate-700 flex items-center justify-between">
              <div className="space-y-1">
                <div className="flex items-center gap-2 font-mono">
                  <span className="text-xs font-bold text-sky-400">#{activeTicket.id}</span>
                  <span className={`px-2 py-0.5 text-[10px] font-bold rounded ${
                    activeTicket.priority === "Critical" ? "bg-red-500/20 text-red-400" :
                    activeTicket.priority === "High" ? "bg-amber-500/20 text-amber-400" : "bg-sky-500/20 text-sky-300"
                  }`}>
                    {activeTicket.priority} (SLA {activeTicket.slaDueHours}h)
                  </span>
                  <span className="px-2 py-0.5 bg-slate-700 text-slate-300 text-[10px] rounded">
                    {activeTicket.category}
                  </span>
                </div>
                <h3 className="text-sm font-bold text-white font-mono">
                  {activeTicket.title}
                </h3>
              </div>

              <button
                onClick={() => setActiveTicket(null)}
                className="p-2 hover:bg-slate-700 rounded-lg text-slate-400 hover:text-white transition-colors cursor-pointer"
              >
                ✕
              </button>
            </div>

            {/* Modal Content Layout */}
            <div className="flex-1 overflow-y-auto p-6 space-y-6">
              
              {/* Tenant & Client Contact Bar */}
              <div className="p-4 bg-slate-950 border border-slate-800 rounded-xl grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs font-mono">
                <div>
                  <span className="text-[10px] text-slate-500 uppercase">Tenant Perusahaan</span>
                  <div className="font-bold text-white">{activeTicket.tenantName} ({activeTicket.tenantCode})</div>
                </div>
                <div>
                  <span className="text-[10px] text-slate-500 uppercase">Kontak Klien / Pelapor</span>
                  <div className="font-bold text-sky-300">{activeTicket.clientContactName}</div>
                  <div className="text-[10px] text-slate-400">{activeTicket.clientEmail}</div>
                </div>
                <div>
                  <span className="text-[10px] text-slate-500 uppercase">Status & Petugas</span>
                  <div className="font-bold text-emerald-400">{activeTicket.status}</div>
                  <div className="text-[10px] text-slate-400">Assigned: {activeTicket.assignedTo || "-"}</div>
                </div>
              </div>

              {/* Message Thread */}
              <div className="space-y-3">
                <h4 className="text-xs font-bold text-slate-400 uppercase font-mono tracking-wider">
                  Riwayat Percakapan & Eskalasi Keluhan ({activeTicket.messages.length})
                </h4>

                <div className="space-y-3">
                  {activeTicket.messages.map((msg) => {
                    const isClient = msg.senderType === "Client";
                    return (
                      <div
                        key={msg.id}
                        className={`p-4 rounded-xl text-xs font-mono leading-relaxed ${
                          msg.isInternalNote
                            ? "bg-amber-950/40 border border-amber-500/40 text-amber-200"
                            : isClient
                            ? "bg-slate-950 border border-slate-800 text-slate-200"
                            : "bg-sky-950/40 border border-sky-500/40 text-sky-100"
                        }`}
                      >
                        <div className="flex items-center justify-between mb-1.5 pb-1 border-b border-slate-800/60">
                          <div className="flex items-center gap-2">
                            <strong className={isClient ? "text-amber-400" : "text-sky-400"}>
                              {msg.senderName}
                            </strong>
                            <span className="text-[10px] text-slate-400">({msg.senderRole})</span>
                            {msg.isInternalNote && (
                              <span className="px-1.5 py-0.2 bg-amber-500/20 text-amber-300 text-[9px] font-bold rounded">
                                CATATAN INTERNAL OPERASIONAL
                              </span>
                            )}
                          </div>
                          <span className="text-[10px] text-slate-500">{msg.timestamp}</span>
                        </div>
                        <p className="whitespace-pre-wrap">{msg.message}</p>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Response Form */}
              <div className="p-4 bg-slate-950 border border-slate-800 rounded-xl space-y-4 font-mono text-xs">
                <div className="flex items-center justify-between">
                  <h4 className="font-bold text-white flex items-center gap-2">
                    <Send className="w-4 h-4 text-sky-400" />
                    <span>Tulis Balasan / Tindakan Operasional</span>
                  </h4>

                  <label className="flex items-center gap-2 text-amber-300 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={isInternalNote}
                      onChange={(e) => setIsInternalNote(e.target.checked)}
                      className="rounded accent-amber-500"
                    />
                    <span>Catatan Internal (Tidak dikirim ke klien)</span>
                  </label>
                </div>

                <textarea
                  rows={4}
                  placeholder="Tuliskan jawaban tindak lanjut, solusi keluhan, atau instruksi teknis untuk klien..."
                  value={replyMessage}
                  onChange={(e) => setReplyMessage(e.target.value)}
                  className="w-full p-3 bg-slate-900 border border-slate-700 rounded-lg text-slate-100 placeholder-slate-500 focus:outline-none focus:border-sky-500 text-xs"
                />

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 items-center">
                  <div>
                    <label className="block text-[10px] text-slate-400 uppercase mb-1">Perbarui Status Tiket Menjadi:</label>
                    <select
                      value={targetTicketStatus}
                      onChange={(e) => setTargetTicketStatus(e.target.value as SaaSTicketStatus)}
                      className="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-lg text-slate-200 focus:outline-none focus:border-sky-500"
                    >
                      <option value="In Progress">In Progress (Sedang Ditangani)</option>
                      <option value="Waiting Client">Waiting Client (Menunggu Konfirmasi Klien)</option>
                      <option value="Resolved">Resolved (Masalah Selesai)</option>
                      <option value="Closed">Closed (Ditutup)</option>
                    </select>
                  </div>

                  <div className="space-y-1">
                    <label className="flex items-center gap-2 text-emerald-400 cursor-pointer pt-4">
                      <input
                        type="checkbox"
                        checked={sendEmailOnReply && !isInternalNote}
                        disabled={isInternalNote}
                        onChange={(e) => setSendEmailOnReply(e.target.checked)}
                        className="rounded accent-emerald-500"
                      />
                      <span className="font-bold">Otomatis kirim notifikasi email ke {activeTicket.clientEmail}</span>
                    </label>
                  </div>
                </div>

                {targetTicketStatus === "Resolved" && (
                  <div>
                    <label className="block text-[10px] text-emerald-400 uppercase mb-1 font-bold">
                      Ringkasan Solusi Akhir (Resolution Summary):
                    </label>
                    <input
                      type="text"
                      placeholder="e.g. Gateway WhatsApp telah direstart dan antrian clock-in telah kembali normal."
                      value={resolutionSummary}
                      onChange={(e) => setResolutionSummary(e.target.value)}
                      className="w-full px-3 py-2 bg-slate-900 border border-emerald-500/50 rounded-lg text-slate-100 placeholder-slate-500 focus:outline-none"
                    />
                  </div>
                )}
              </div>

            </div>

            {/* Modal Footer */}
            <div className="px-6 py-4 bg-slate-800 border-t border-slate-700 flex items-center justify-between">
              <button
                onClick={() => setActiveTicket(null)}
                className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-slate-200 font-bold text-xs rounded-xl transition-all cursor-pointer font-mono"
              >
                Tutup
              </button>

              <button
                onClick={handleSendTicketReply}
                disabled={!replyMessage.trim()}
                className={`px-5 py-2.5 rounded-xl font-bold text-xs font-mono flex items-center gap-2 transition-all cursor-pointer shadow-lg ${
                  replyMessage.trim()
                    ? "bg-gradient-to-r from-sky-500 to-indigo-600 hover:from-sky-400 hover:to-indigo-500 text-slate-950 font-black shadow-sky-500/20"
                    : "bg-slate-700 text-slate-500 cursor-not-allowed"
                }`}
              >
                <Send className="w-4 h-4" />
                <span>Kirim Respon & Notifikasi Email</span>
              </button>
            </div>

          </div>
        </div>
      )}

      {/* ========================================================================= */}
      {/* MODAL: BUAT TIKET KELUHAN BARU */}
      {/* ========================================================================= */}
      {isNewTicketModalOpen && (
        <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-2xl 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">
                <Headphones className="w-5 h-5 text-sky-400" />
                <h3 className="text-sm font-bold text-white">Buat Tiket Keluhan Pelanggan Baru</h3>
              </div>
              <button
                onClick={() => setIsNewTicketModalOpen(false)}
                className="p-1 hover:bg-slate-700 rounded text-slate-400 hover:text-white"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleCreateNewTicket} className="p-6 space-y-4 text-xs">
              <div>
                <label className="block text-slate-400 mb-1">Pilih Tenant / Pelanggan *</label>
                <select
                  value={newTicketTenantId}
                  onChange={(e) => {
                    const tid = e.target.value;
                    setNewTicketTenantId(tid);
                    const selected = tenants.find(t => t.id === tid);
                    if (selected) {
                      setNewTicketContactName(selected.contactPerson.name);
                      setNewTicketContactEmail(selected.contactPerson.email);
                    }
                  }}
                  className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-slate-100 focus:outline-none focus:border-sky-500"
                >
                  {tenants.map(t => (
                    <option key={t.id} value={t.id}>{t.name} ({t.code})</option>
                  ))}
                </select>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-slate-400 mb-1">Nama Kontak Pelapor</label>
                  <input
                    type="text"
                    placeholder="Nama Penanggung Jawab"
                    value={newTicketContactName}
                    onChange={(e) => setNewTicketContactName(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-sky-500"
                  />
                </div>
                <div>
                  <label className="block text-slate-400 mb-1">Email Klien (Notifikasi)</label>
                  <input
                    type="email"
                    placeholder="client@tenant.com"
                    value={newTicketContactEmail}
                    onChange={(e) => setNewTicketContactEmail(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-sky-500"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-slate-400 mb-1">Kategori Keluhan *</label>
                  <select
                    value={newTicketCategory}
                    onChange={(e) => setNewTicketCategory(e.target.value as SaaSTicketCategory)}
                    className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-slate-100 focus:outline-none focus:border-sky-500"
                  >
                    <option value="Bug / System Error">Bug / System Error</option>
                    <option value="Akses & Login">Akses & Login</option>
                    <option value="Billing & Invoice">Billing & Invoice</option>
                    <option value="Integrasi Domain & DNS">Integrasi Domain & DNS</option>
                    <option value="Permintaan Fitur (Feature Request)">Permintaan Fitur (Feature Request)</option>
                    <option value="Performa & Kuota Storage">Performa & Kuota Storage</option>
                  </select>
                </div>
                <div>
                  <label className="block text-slate-400 mb-1">Prioritas & SLA *</label>
                  <select
                    value={newTicketPriority}
                    onChange={(e) => setNewTicketPriority(e.target.value as SaaSTicketPriority)}
                    className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-slate-100 focus:outline-none focus:border-sky-500"
                  >
                    <option value="Critical">Critical (SLA 4 Jam)</option>
                    <option value="High">High (SLA 12 Jam)</option>
                    <option value="Medium">Medium (SLA 24 Jam)</option>
                    <option value="Low">Low (SLA 48 Jam)</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-slate-400 mb-1">Subjek Keluhan / Judul Tiket *</label>
                <input
                  type="text"
                  placeholder="e.g. Kendala Sinkronisasi Presensi GPS Cabang..."
                  value={newTicketTitle}
                  onChange={(e) => setNewTicketTitle(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-sky-500"
                  required
                />
              </div>

              <div>
                <label className="block text-slate-400 mb-1">Deskripsi Rinci Keluhan Masuk *</label>
                <textarea
                  rows={4}
                  placeholder="Uraikan keluhan yang disampaikan klien secara lengkap..."
                  value={newTicketDescription}
                  onChange={(e) => setNewTicketDescription(e.target.value)}
                  className="w-full p-3 bg-slate-950 border border-slate-700 rounded-lg text-slate-100 focus:outline-none focus:border-sky-500 text-xs"
                  required
                />
              </div>

              <div className="p-3 bg-slate-950 border border-sky-500/30 rounded-lg flex items-center justify-between text-[11px] text-sky-300">
                <span className="flex items-center gap-1.5">
                  <Mail className="w-4 h-4" />
                  <span>Sistem akan otomatis mengirimkan email konfirmasi nomor tiket ke klien</span>
                </span>
                <CheckCircle2 className="w-4 h-4 text-emerald-400" />
              </div>

              <div className="pt-3 border-t border-slate-800 flex items-center justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setIsNewTicketModalOpen(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-sky-600 hover:bg-sky-500 text-white font-bold rounded-lg cursor-pointer shadow"
                >
                  Simpan & Kirim Email ke Klien
                </button>
              </div>
            </form>

          </div>
        </div>
      )}

      {/* ========================================================================= */}
      {/* MODAL: KONFIGURASI AKTIVASI MEMBERSHIP TENANT */}
      {/* ========================================================================= */}
      {isActivationModalOpen && selectedTenantForActivation && (
        <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-2xl shadow-2xl overflow-hidden text-slate-100 font-mono">
            
            {/* Header */}
            <div className={`px-6 py-4 border-b flex items-center justify-between ${
              activationType === "TRIAL_7_DAYS" ? "bg-emerald-950/80 border-emerald-500/40 text-emerald-300" :
              activationType === "SUBSCRIBER_ACTIVE" ? "bg-sky-950/80 border-sky-500/40 text-sky-300" :
              "bg-amber-950/80 border-amber-500/40 text-amber-300"
            }`}>
              <div className="flex items-center gap-2">
                <UserCheck className="w-5 h-5" />
                <h3 className="text-sm font-black uppercase">
                  Aktivasi Membership: {activationType === "TRIAL_7_DAYS" ? "Uji Coba 7 Hari" : activationType === "SUBSCRIBER_ACTIVE" ? "Pelanggan Resmi Aktif" : "Masa Inaktif (1 Bulan)"}
                </h3>
              </div>
              <button
                onClick={() => setIsActivationModalOpen(false)}
                className="p-1 hover:bg-slate-800 rounded text-slate-400 hover:text-white"
              >
                ✕
              </button>
            </div>

            <div className="p-6 space-y-4 text-xs">
              
              {/* Tenant Meta Info */}
              <div className="p-3 bg-slate-950 border border-slate-800 rounded-lg flex items-center justify-between">
                <div>
                  <div className="font-bold text-white text-sm">{selectedTenantForActivation.name}</div>
                  <div className="text-[10px] text-slate-400">
                    Domain: {selectedTenantForActivation.domain} | Kontak: {selectedTenantForActivation.contactPerson.email}
                  </div>
                </div>
                <span className="px-2 py-0.5 bg-slate-800 text-slate-300 text-[10px] rounded font-bold">
                  Status Saat Ini: {selectedTenantForActivation.status}
                </span>
              </div>

              {/* Mode Selection */}
              <div>
                <label className="block text-slate-400 mb-1 uppercase text-[10px]">Pilih Mode Aktivasi Keanggotaan:</label>
                <div className="grid grid-cols-3 gap-2">
                  <button
                    type="button"
                    onClick={() => {
                      setActivationType("TRIAL_7_DAYS");
                      setCustomExpiryDate(calculateDefaultExpiry("TRIAL_7_DAYS"));
                    }}
                    className={`p-2.5 rounded-xl border text-center transition-all cursor-pointer ${
                      activationType === "TRIAL_7_DAYS"
                        ? "bg-emerald-500/20 border-emerald-400 text-emerald-300 font-bold"
                        : "bg-slate-950 border-slate-800 text-slate-400 hover:bg-slate-800"
                    }`}
                  >
                    Uji Coba 7 Hari
                  </button>

                  <button
                    type="button"
                    onClick={() => {
                      setActivationType("SUBSCRIBER_ACTIVE");
                      setCustomExpiryDate(calculateDefaultExpiry("SUBSCRIBER_ACTIVE"));
                    }}
                    className={`p-2.5 rounded-xl border text-center transition-all cursor-pointer ${
                      activationType === "SUBSCRIBER_ACTIVE"
                        ? "bg-sky-500/20 border-sky-400 text-sky-300 font-bold"
                        : "bg-slate-950 border-slate-800 text-slate-400 hover:bg-slate-800"
                    }`}
                  >
                    Pelanggan Aktif
                  </button>

                  <button
                    type="button"
                    onClick={() => {
                      setActivationType("INACTIVE_1_MONTH");
                      setCustomExpiryDate(calculateDefaultExpiry("INACTIVE_1_MONTH"));
                    }}
                    className={`p-2.5 rounded-xl border text-center transition-all cursor-pointer ${
                      activationType === "INACTIVE_1_MONTH"
                        ? "bg-amber-500/20 border-amber-400 text-amber-300 font-bold"
                        : "bg-slate-950 border-slate-800 text-slate-400 hover:bg-slate-800"
                    }`}
                  >
                    Masa Inaktif (1 Bln)
                  </button>
                </div>
              </div>

              {/* Plan & Expiry Date */}
              <div className="grid grid-cols-2 gap-3">
                {activationType === "SUBSCRIBER_ACTIVE" && (
                  <div>
                    <label className="block text-slate-400 mb-1">Paket Berlangganan</label>
                    <select
                      value={selectedPlanTier}
                      onChange={(e) => setSelectedPlanTier(e.target.value as SaaSPlanTier)}
                      className="w-full px-3 py-2 bg-slate-950 border border-slate-700 rounded-lg text-slate-100 focus:outline-none focus:border-sky-500"
                    >
                      <option value="Enterprise">Enterprise (Full Modules + Dedicated)</option>
                      <option value="Professional">Professional (Up to 200 Users)</option>
                      <option value="Business Starter">Business Starter (Up to 50 Users)</option>
                    </select>
                  </div>
                )}

                <div className={activationType !== "SUBSCRIBER_ACTIVE" ? "col-span-2" : ""}>
                  <label className="block text-slate-400 mb-1">Tanggal Kedaluwarsa / Batas Akhir</label>
                  <input
                    type="date"
                    value={customExpiryDate}
                    onChange={(e) => setCustomExpiryDate(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-sky-500"
                  />
                  <span className="text-[10px] text-slate-500 mt-0.5 block">
                    {activationType === "TRIAL_7_DAYS" ? "Dihitung otomatis 7 hari dari hari ini." :
                     activationType === "INACTIVE_1_MONTH" ? "Dihitung otomatis 30 hari masa tenggang (grace period)." :
                     "Batas perpanjangan lisensi pelanggan resmi."}
                  </span>
                </div>
              </div>

              {/* Notes */}
              <div>
                <label className="block text-slate-400 mb-1">Catatan Operasional</label>
                <input
                  type="text"
                  value={activationNotes}
                  onChange={(e) => setActivationNotes(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-sky-500"
                />
              </div>

              {/* Email Checkbox */}
              <div className="p-3 bg-slate-950 border border-slate-800 rounded-xl space-y-2">
                <label className="flex items-center gap-2 text-emerald-400 font-bold cursor-pointer">
                  <input
                    type="checkbox"
                    checked={sendEmailOnActivation}
                    onChange={(e) => setSendEmailOnActivation(e.target.checked)}
                    className="rounded accent-emerald-500"
                  />
                  <span>Kirim surat resmi & panduan akses otomatis ke email: {selectedTenantForActivation.contactPerson.email}</span>
                </label>
                <p className="text-[10px] text-slate-400 pl-6">
                  Surat email resmi akan memuat rincian masa berlaku, login portal URL, serta kontak tim Operasional PT Median.
                </p>
              </div>

              {/* Modal Actions */}
              <div className="pt-3 border-t border-slate-800 flex items-center justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setIsActivationModalOpen(false)}
                  className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg cursor-pointer"
                >
                  Batal
                </button>
                <button
                  type="button"
                  onClick={handleExecuteActivation}
                  className="px-5 py-2 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-slate-950 font-black rounded-lg cursor-pointer shadow-lg shadow-emerald-500/20 flex items-center gap-1.5"
                >
                  <Check className="w-4 h-4" />
                  <span>Eksekusi Aktivasi & Kirim Email</span>
                </button>
              </div>

            </div>

          </div>
        </div>
      )}

    </div>
  );
};