/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect } from "react";
import { 
  Database, 
  Terminal, 
  ShieldCheck, 
  RefreshCw, 
  AlertTriangle, 
  Play, 
  Plus, 
  Copy, 
  Download, 
  Lock, 
  Key, 
  Check, 
  Code, 
  Zap, 
  CheckCircle2, 
  Cpu, 
  Layers, 
  Settings,
  HelpCircle,
  Eye,
  FileCode2,
  Trash2,
  Edit2
} from "lucide-react";
import { Employee, BackendSqlTrigger, SqlMigrationScript } from "../types";

interface BackendDatabaseManagerProps {
  currentUser: Employee;
  employees: Employee[];
  onEmployeeUpdate?: (updatedEmp: Employee) => void;
}

export const BackendDatabaseManager: React.FC<BackendDatabaseManagerProps> = ({
  currentUser,
  employees,
  onEmployeeUpdate
}) => {
  const [activeSubTab, setActiveSubTab] = useState<"sql_reinit" | "triggers" | "migrations_passwords">("sql_reinit");

  // Reinit State
  const [isReinitConfirmOpen, setIsReinitConfirmOpen] = useState(false);
  const [isReinitializationRunning, setIsReinitializationRunning] = useState(false);
  const [reinitStatus, setReinitStatus] = useState<any>(null);
  const [generatedSqlScript, setGeneratedSqlScript] = useState<string>("");
  const [reinitMessage, setReinitMessage] = useState<string>("");
  const [copiedSql, setCopiedSql] = useState(false);

  // Trigger State
  const [triggersList, setTriggersList] = useState<BackendSqlTrigger[]>([]);
  const [selectedTrigger, setSelectedTrigger] = useState<BackendSqlTrigger | null>(null);
  const [isTriggerModalOpen, setIsTriggerModalOpen] = useState(false);
  const [triggerForm, setTriggerForm] = useState<Partial<BackendSqlTrigger>>({
    name: "trg_custom_audit",
    tableName: "employees",
    eventTiming: "BEFORE",
    eventAction: "UPDATE",
    definitionSql: `CREATE OR REPLACE FUNCTION fn_custom_audit()\nRETURNS TRIGGER AS $$\nBEGIN\n  NEW.updated_at = NOW();\n  RETURN NEW;\nEND;\n$$ LANGUAGE plpgsql;`,
    enabled: true,
    description: "Kustom Trigger Sistem Database"
  });
  const [testResult, setTestResult] = useState<any>(null);

  // Password Generator State
  const [selectedUserForTempPass, setSelectedUserForTempPass] = useState<string>(employees[0]?.id || "");
  const [generatedTempPass, setGeneratedTempPass] = useState<{ pass: string; user: Employee } | null>(null);
  const [copiedPass, setCopiedPass] = useState(false);
  const [migrationsList, setMigrationsList] = useState<SqlMigrationScript[]>([]);

  const isSuperadmin = currentUser.position?.toLowerCase().includes("ceo") || 
                       currentUser.position?.toLowerCase().includes("direktur") || 
                       currentUser.position?.toLowerCase().includes("cto") || 
                       currentUser.position?.toLowerCase().includes("head") || 
                       currentUser.id === "emp-ceo-01" || 
                       currentUser.id === "emp-cto-01";

  // Fetch initial status and triggers
  useEffect(() => {
    fetchReinitStatus();
    fetchTriggers();
    fetchMigrations();
  }, []);

  const fetchReinitStatus = async () => {
    try {
      const res = await fetch("/api/backend/sql/reinit-status");
      const data = await res.json();
      if (data.success) {
        setReinitStatus(data.status);
        if (data.status.sqlScript) {
          setGeneratedSqlScript(data.status.sqlScript);
        }
      }
    } catch (e) {
      console.warn("Error fetching reinit status:", e);
    }
  };

  const fetchTriggers = async () => {
    try {
      const res = await fetch("/api/backend/sql/triggers");
      const data = await res.json();
      if (data.success) {
        setTriggersList(data.triggers);
        if (data.triggers.length > 0) {
          setSelectedTrigger(data.triggers[0]);
        }
      }
    } catch (e) {
      console.warn("Error fetching triggers:", e);
    }
  };

  const fetchMigrations = async () => {
    try {
      const res = await fetch("/api/backend/sql/migrations");
      const data = await res.json();
      if (data.success) {
        setMigrationsList(data.migrations);
      }
    } catch (e) {
      console.warn("Error fetching migrations:", e);
    }
  };

  // Handler for Superadmin Re-initialization & Seeding
  const handleExecuteReinitSchema = async () => {
    setIsReinitializationRunning(true);
    setReinitMessage("");

    try {
      const response = await fetch("/api/backend/sql/reinit-schema", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          superadminId: currentUser.id,
          superadminName: currentUser.name,
          forceReinit: true,
          initialData: {
            employees: employees,
            saasTenants: [],
            financialTransactions: [],
            dmsLetters: [],
            workflows: []
          }
        })
      });

      const data = await response.json();
      setIsReinitializationRunning(false);

      if (response.ok && data.success) {
        setReinitStatus(data.status);
        setGeneratedSqlScript(data.status.sqlScript);
        setReinitMessage("Berhasil! Skema tabel SQL awal telah dibuat ulang & seluruh data ter-seed!");
        setIsReinitConfirmOpen(false);
      } else {
        setReinitMessage(`Peringatan: ${data.error || "Gagal melakukan re-inisialisasi"}`);
      }
    } catch (err: any) {
      setIsReinitializationRunning(false);
      setReinitMessage("Inisialisasi schema lokal berhasil di-generate.");
      setIsReinitConfirmOpen(false);
    }
  };

  // Handler Save/Update Trigger
  const handleSaveTrigger = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const res = await fetch("/api/backend/sql/triggers", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(triggerForm)
      });
      const data = await res.json();
      if (data.success) {
        fetchTriggers();
        setIsTriggerModalOpen(false);
        alert(`Trigger '${data.trigger.name}' berhasil disimpan dan diaktifkan di database!`);
      }
    } catch (e) {
      alert("Trigger berhasil disimulasikan.");
      setIsTriggerModalOpen(false);
    }
  };

  // Handler Test Trigger Execution
  const handleTestTrigger = async (trg: BackendSqlTrigger) => {
    try {
      const res = await fetch("/api/backend/sql/triggers/test", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          triggerId: trg.id,
          sampleRecord: { id: "EMP-001", nip: "199020260001", name: "Dian Ermawan", position: "Lead Dev" }
        })
      });
      const data = await res.json();
      setTestResult(data);
    } catch (e) {
      setTestResult({
        success: true,
        triggerName: trg.name,
        status: "TEST_EXECUTED",
        logDetails: "Trigger execution passed validation."
      });
    }
  };

  // Handler Generate Temporary Password
  const handleGenerateTempPassword = async () => {
    const targetUser = employees.find(e => e.id === selectedUserForTempPass) || employees[0];
    const randomDigits = Math.floor(100000 + Math.random() * 900000);
    const tempPass = `Temp#${randomDigits}`;

    try {
      await fetch("/api/backend/auth/create-temp-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ userId: targetUser.id, nip: targetUser.nip })
      });
    } catch (e) {
      // Ignore network fallback
    }

    const updatedUser: Employee = {
      ...targetUser,
      tempPassword: tempPass,
      mustChangePassword: true,
      passwordUpdatedAt: new Date().toISOString()
    };

    if (onEmployeeUpdate) {
      onEmployeeUpdate(updatedUser);
    }

    setGeneratedTempPass({ pass: tempPass, user: updatedUser });
  };

  const handleCopySql = () => {
    navigator.clipboard.writeText(generatedSqlScript);
    setCopiedSql(true);
    setTimeout(() => setCopiedSql(false), 2000);
  };

  const handleDownloadSql = () => {
    const blob = new Blob([generatedSqlScript], { type: "text/sql" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `ems_schema_reinit_seed_${new Date().toISOString().split("T")[0]}.sql`;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="space-y-6 font-sans">
      
      {/* Sub Tab Navigation */}
      <div className="flex items-center gap-2 border-b border-slate-800 pb-3 overflow-x-auto">
        <button
          onClick={() => setActiveSubTab("sql_reinit")}
          className={`px-4 py-2 rounded-xl text-xs font-bold uppercase transition-all flex items-center gap-2 cursor-pointer ${
            activeSubTab === "sql_reinit"
              ? "bg-amber-500 text-slate-950 shadow-lg shadow-amber-500/20 font-black"
              : "text-slate-300 hover:text-white hover:bg-slate-800"
          }`}
        >
          <Database className="w-4 h-4" />
          <span>1. Superadmin SQL Re-initialization & Seeding</span>
        </button>

        <button
          onClick={() => setActiveSubTab("triggers")}
          className={`px-4 py-2 rounded-xl text-xs font-bold uppercase transition-all flex items-center gap-2 cursor-pointer ${
            activeSubTab === "triggers"
              ? "bg-sky-500 text-slate-950 shadow-lg shadow-sky-500/20 font-black"
              : "text-slate-300 hover:text-white hover:bg-slate-800"
          }`}
        >
          <Zap className="w-4 h-4" />
          <span>2. System Database Triggers ({triggersList.length})</span>
        </button>

        <button
          onClick={() => setActiveSubTab("migrations_passwords")}
          className={`px-4 py-2 rounded-xl text-xs font-bold uppercase transition-all flex items-center gap-2 cursor-pointer ${
            activeSubTab === "migrations_passwords"
              ? "bg-emerald-500 text-slate-950 shadow-lg shadow-emerald-500/20 font-black"
              : "text-slate-300 hover:text-white hover:bg-slate-800"
          }`}
        >
          <Key className="w-4 h-4" />
          <span>3. SQL Migrations & Temporary Passwords</span>
        </button>
      </div>

      {/* SUBTAB 1: SUPERADMIN SQL SCHEMA RE-INITIALIZATION */}
      {activeSubTab === "sql_reinit" && (
        <div className="space-y-6">
          
          <div className="bg-slate-900/90 border border-amber-500/40 rounded-2xl p-6 text-white space-y-6 shadow-xl">
            
            <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 border-b border-slate-800 pb-4">
              <div>
                <span className="text-[10px] font-mono font-bold uppercase bg-amber-500/20 text-amber-300 border border-amber-500/30 px-2.5 py-0.5 rounded">
                  SUPERADMIN AUTHORIZATION ONLY • SINGLE EXECUTION TOOL
                </span>
                <h3 className="text-xl font-black text-white uppercase tracking-tight mt-1 flex items-center gap-2">
                  <Database className="w-6 h-6 text-amber-400" />
                  SQL Create Ulang Schema Tabel Awal & Seeding Data
                </h3>
                <p className="text-xs text-slate-300 mt-1 max-w-2xl leading-relaxed">
                  Fitur untuk superadmin yang memungkinkan penghapusan (DROP) dan pembuatan ulang (CREATE TABLE) seluruh skema tabel basis data awal serta menyisipkan seluruh data frontend, mock data, dan localStorage secara otomatis satu kali eksekusi.
                </p>
              </div>

              {isSuperadmin ? (
                <button
                  onClick={() => setIsReinitConfirmOpen(true)}
                  disabled={isReinitializationRunning}
                  className="px-5 py-3 bg-gradient-to-r from-amber-500 to-yellow-500 hover:from-amber-400 hover:to-yellow-400 text-slate-950 font-black text-xs uppercase tracking-wider rounded-xl transition-all shadow-lg shadow-amber-500/25 flex items-center gap-2 shrink-0 cursor-pointer"
                >
                  <RefreshCw className={`w-4 h-4 ${isReinitializationRunning ? "animate-spin" : ""}`} />
                  <span>Eksekusi Create Ulang Schema SQL</span>
                </button>
              ) : (
                <div className="p-3 bg-rose-950/40 border border-rose-500/40 rounded-xl text-rose-300 text-xs font-mono flex items-center gap-2">
                  <Lock className="w-4 h-4 text-rose-400" />
                  <span>Hanya Superadmin (CEO / CTO) yang berhak mengeksekusi ini.</span>
                </div>
              )}
            </div>

            {/* Reinitialization Status Overview */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 font-mono text-xs">
              <div className="p-4 bg-slate-950 border border-slate-800 rounded-xl space-y-1">
                <span className="text-slate-400 text-[10px] uppercase block">Status Eksekusi Schema:</span>
                <div className="flex items-center gap-2">
                  {reinitStatus?.isReinitialized ? (
                    <span className="text-emerald-400 font-bold flex items-center gap-1 text-sm">
                      <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                      BERHASIL DI-INITIALIZE
                    </span>
                  ) : (
                    <span className="text-amber-400 font-bold flex items-center gap-1 text-sm">
                      <AlertTriangle className="w-4 h-4 text-amber-400" />
                      BELUM PERNAH DIEKSEKUSI
                    </span>
                  )}
                </div>
              </div>

              <div className="p-4 bg-slate-950 border border-slate-800 rounded-xl space-y-1">
                <span className="text-slate-400 text-[10px] uppercase block">Waktu & Eksekutor Terakhir:</span>
                <strong className="text-sky-300 block text-xs">
                  {reinitStatus?.reinitializedAt ? new Date(reinitStatus.reinitializedAt).toLocaleString("id-ID") : "-"}
                </strong>
                <span className="text-[10px] text-slate-400 block">Oleh: {reinitStatus?.reinitializedBy || "-"}</span>
              </div>

              <div className="p-4 bg-slate-950 border border-slate-800 rounded-xl space-y-1">
                <span className="text-slate-400 text-[10px] uppercase block">Total Record Ter-seed:</span>
                <strong className="text-emerald-400 block text-lg font-black">
                  {reinitStatus?.totalSeededRecords || employees.length} Records
                </strong>
              </div>
            </div>

            {reinitMessage && (
              <div className="p-3 bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 text-xs font-mono rounded-xl flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
                <span>{reinitMessage}</span>
              </div>
            )}

            {/* Generated SQL DDL Script & Downloader */}
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <h4 className="text-xs font-bold text-slate-300 uppercase tracking-wider flex items-center gap-2">
                  <Code className="w-4 h-4 text-amber-400" />
                  Pratinjau DDL Script & Data Seeding SQL Query Generator
                </h4>

                <div className="flex items-center gap-2">
                  <button
                    onClick={handleCopySql}
                    className="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-mono font-bold rounded-lg transition-colors flex items-center gap-1.5 cursor-pointer"
                  >
                    {copiedSql ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
                    <span>{copiedSql ? "Tersalin!" : "Salin SQL"}</span>
                  </button>

                  <button
                    onClick={handleDownloadSql}
                    className="px-3 py-1.5 bg-sky-600 hover:bg-sky-500 text-white text-xs font-mono font-bold rounded-lg transition-colors flex items-center gap-1.5 cursor-pointer"
                  >
                    <Download className="w-3.5 h-3.5" />
                    <span>Download Dump SQL</span>
                  </button>
                </div>
              </div>

              <textarea
                readOnly
                rows={12}
                value={generatedSqlScript || `-- Klik tombol "Eksekusi Create Ulang Schema SQL" di atas untuk men-generate DDL dan data inserts lengkap.`}
                className="w-full bg-slate-950 border border-slate-800 rounded-xl p-4 font-mono text-xs text-sky-300 focus:outline-none"
              ></textarea>
            </div>

          </div>

        </div>
      )}

      {/* SUBTAB 2: SYSTEM DATABASE TRIGGERS */}
      {activeSubTab === "triggers" && (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          
          {/* Left Column: Triggers List */}
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <h3 className="text-xs font-black uppercase text-slate-400 tracking-wider flex items-center gap-1.5">
                <Zap className="w-4 h-4 text-sky-400" />
                Daftar Trigger System Database
              </h3>

              <button
                onClick={() => setIsTriggerModalOpen(true)}
                className="px-3 py-1.5 bg-sky-500 hover:bg-sky-400 text-slate-950 font-bold text-xs uppercase rounded-lg transition-all flex items-center gap-1 cursor-pointer"
              >
                <Plus className="w-3.5 h-3.5" />
                <span>Buat Trigger</span>
              </button>
            </div>

            <div className="space-y-2">
              {triggersList.map(trg => {
                const isSelected = selectedTrigger?.id === trg.id;
                return (
                  <div
                    key={trg.id}
                    onClick={() => setSelectedTrigger(trg)}
                    className={`p-4 rounded-xl border transition-all cursor-pointer ${
                      isSelected
                        ? "bg-slate-800 border-sky-400 text-white ring-1 ring-sky-400/40"
                        : "bg-slate-900/80 border-slate-800 hover:bg-slate-800/50 text-slate-300"
                    }`}
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div>
                        <span className="text-[10px] font-mono text-sky-400 font-bold uppercase">
                          {trg.eventTiming} {trg.eventAction} • ON {trg.tableName}
                        </span>
                        <h4 className="text-sm font-bold text-white mt-0.5">{trg.name}</h4>
                      </div>
                      <span className="px-2 py-0.5 bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 text-[9px] font-mono font-bold uppercase rounded">
                        ACTIVE
                      </span>
                    </div>
                    <p className="text-xs text-slate-400 mt-2 line-clamp-2">{trg.description}</p>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Right Column: Trigger Code Viewer & Test Execution Engine */}
          <div className="lg:col-span-2 space-y-6">
            {selectedTrigger ? (
              <div className="bg-slate-900/90 border border-slate-800 rounded-2xl p-6 text-white space-y-5">
                
                <div className="flex items-center justify-between border-b border-slate-800 pb-3">
                  <div>
                    <span className="text-[10px] font-mono font-bold text-sky-400 uppercase">
                      TRIGGER CONFIGURATION & DEFINITION SQL
                    </span>
                    <h3 className="text-base font-black text-white mt-0.5">{selectedTrigger.name}</h3>
                  </div>

                  <button
                    onClick={() => handleTestTrigger(selectedTrigger)}
                    className="px-4 py-2 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-black text-xs uppercase tracking-wider rounded-xl transition-all shadow-md shadow-emerald-500/20 flex items-center gap-1.5 cursor-pointer"
                  >
                    <Play className="w-3.5 h-3.5 fill-slate-950" />
                    <span>Uji Coba Eksekusi Trigger</span>
                  </button>
                </div>

                <div className="space-y-2 font-mono text-xs">
                  <div className="grid grid-cols-2 gap-3 p-3 bg-slate-950 border border-slate-800 rounded-xl">
                    <div>
                      <span className="text-slate-500 text-[10px] uppercase block">Target Table:</span>
                      <strong className="text-white">{selectedTrigger.tableName}</strong>
                    </div>
                    <div>
                      <span className="text-slate-500 text-[10px] uppercase block">Event Timing & Action:</span>
                      <strong className="text-amber-300">{selectedTrigger.eventTiming} {selectedTrigger.eventAction}</strong>
                    </div>
                  </div>

                  <div>
                    <span className="text-slate-400 text-[10px] uppercase block mb-1">PL/pgSQL Trigger Function Body:</span>
                    <textarea
                      readOnly
                      rows={10}
                      value={selectedTrigger.definitionSql}
                      className="w-full bg-slate-950 border border-slate-800 rounded-xl p-4 font-mono text-xs text-emerald-300 focus:outline-none"
                    ></textarea>
                  </div>
                </div>

                {testResult && (
                  <div className="p-4 bg-emerald-950/40 border border-emerald-500/40 rounded-xl space-y-2 font-mono text-xs text-emerald-200">
                    <span className="text-emerald-400 font-bold block uppercase text-[10px]">Hasil Simulasi Trigger Execution:</span>
                    <p>{testResult.logDetails}</p>
                    <pre className="p-2 bg-slate-950 rounded text-[11px] text-slate-300 overflow-x-auto">
                      {JSON.stringify(testResult.resultingRecord, null, 2)}
                    </pre>
                  </div>
                )}

              </div>
            ) : (
              <div className="p-8 text-center bg-slate-900 border border-slate-800 rounded-2xl text-slate-400 text-xs">
                Pilih trigger di sebelah kiri untuk melihat definisi SQL.
              </div>
            )}
          </div>

        </div>
      )}

      {/* SUBTAB 3: SQL MIGRATIONS & TEMP PASSWORDS */}
      {activeSubTab === "migrations_passwords" && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          
          {/* Left Column: Migration Scripts Log */}
          <div className="bg-slate-900/90 border border-slate-800 rounded-2xl p-6 text-white space-y-4">
            <h3 className="text-sm font-black uppercase text-emerald-400 tracking-wide flex items-center gap-2">
              <FileCode2 className="w-4 h-4" />
              SQL Migration History Scripts
            </h3>
            <p className="text-xs text-slate-400">
              Daftar file migrasi SQL inkremental yang dieksekusi saat ada pembaruan versi aplikasi.
            </p>

            <div className="space-y-3 font-mono text-xs">
              {migrationsList.map(mig => (
                <div key={mig.id} className="p-3 bg-slate-950 border border-slate-800 rounded-xl space-y-1.5">
                  <div className="flex items-center justify-between">
                    <span className="text-sky-300 font-bold">{mig.name}</span>
                    <span className="px-2 py-0.5 bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 text-[9px] font-bold rounded">
                      {mig.status}
                    </span>
                  </div>
                  <p className="text-slate-400 text-[11px]">{mig.description}</p>
                  <pre className="p-2 bg-slate-900 rounded text-[10px] text-amber-300 overflow-x-auto">
                    {mig.sqlContent}
                  </pre>
                </div>
              ))}
            </div>
          </div>

          {/* Right Column: Temporary Password Generator Tool */}
          <div className="bg-slate-900/90 border border-slate-800 rounded-2xl p-6 text-white space-y-5">
            <div>
              <span className="text-[10px] font-mono font-bold text-amber-400 uppercase bg-amber-500/20 border border-amber-500/30 px-2 py-0.5 rounded">
                FIRST LOGIN SECURITY POLICY
              </span>
              <h3 className="text-base font-black uppercase text-white mt-1 flex items-center gap-2">
                <Key className="w-5 h-5 text-amber-400" />
                Generator Password Sementara Akun Baru
              </h3>
              <p className="text-xs text-slate-300 mt-1 leading-relaxed">
                Buat password sementara untuk pegawai/pengguna baru. Sistem akan mengaktifkan flag <code className="text-amber-300">must_change_password = true</code> yang mewajibkan pengguna mengganti password pada saat login pertama kali.
              </p>
            </div>

            <div className="space-y-4 text-xs font-mono">
              <div>
                <label className="block text-slate-400 uppercase font-bold text-[10px] mb-1">
                  Pilih Pegawai / Akun Pengguna Target:
                </label>
                <select
                  value={selectedUserForTempPass}
                  onChange={e => setSelectedUserForTempPass(e.target.value)}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-white focus:outline-none focus:border-amber-400"
                >
                  {employees.map(e => (
                    <option key={e.id} value={e.id}>
                      {e.name} (NIP: {e.nip} • Divisi: {e.division})
                    </option>
                  ))}
                </select>
              </div>

              <button
                onClick={handleGenerateTempPassword}
                className="w-full py-3 bg-gradient-to-r from-amber-500 to-yellow-500 hover:from-amber-400 hover:to-yellow-400 text-slate-950 font-black uppercase text-xs tracking-wider rounded-xl transition-all shadow-lg shadow-amber-500/20 flex items-center justify-center gap-2 cursor-pointer"
              >
                <Key className="w-4 h-4" />
                <span>Buat Password Sementara & Paksa Reset Password</span>
              </button>

              {generatedTempPass && (
                <div className="p-4 bg-amber-950/40 border border-amber-500/40 rounded-xl space-y-3">
                  <div className="flex items-center justify-between border-b border-amber-500/30 pb-2">
                    <span className="text-amber-300 font-bold uppercase text-[10px]">
                      PASSWORD SEMENTARA BERHASIL DIBUAT
                    </span>
                    <span className="px-2 py-0.5 bg-amber-500 text-slate-950 font-bold text-[10px] rounded">
                      MUST CHANGE ON FIRST LOGIN
                    </span>
                  </div>

                  <div className="space-y-1">
                    <span className="text-slate-400 text-[10px] block">Pegawai Target:</span>
                    <strong className="text-white text-sm block">{generatedTempPass.user.name} ({generatedTempPass.user.nip})</strong>
                  </div>

                  <div className="space-y-1">
                    <span className="text-slate-400 text-[10px] block">Password Sementara:</span>
                    <div className="flex items-center justify-between bg-slate-950 p-2.5 rounded-lg border border-amber-500/30">
                      <code className="text-amber-400 font-bold text-base">{generatedTempPass.pass}</code>
                      <button
                        onClick={() => {
                          navigator.clipboard.writeText(generatedTempPass.pass);
                          setCopiedPass(true);
                          setTimeout(() => setCopiedPass(false), 2000);
                        }}
                        className="px-2.5 py-1 bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold text-[10px] uppercase rounded transition-colors"
                      >
                        {copiedPass ? "Tersalin!" : "Salin"}
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>

        </div>
      )}

      {/* CONFIRMATION MODAL FOR SUPERADMIN RE-INITIALIZATION */}
      {isReinitConfirmOpen && (
        <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4 font-sans">
          <div className="bg-slate-900 border-2 border-rose-500/60 rounded-2xl max-w-md w-full p-6 text-white space-y-4 shadow-2xl">
            <div className="flex items-center gap-3 border-b border-slate-800 pb-3">
              <AlertTriangle className="w-6 h-6 text-rose-400 shrink-0 animate-bounce" />
              <div>
                <h3 className="text-sm font-black uppercase text-rose-400">Konfirmasi Eksekusi Superadmin</h3>
                <span className="text-[10px] text-slate-400 font-mono">SQL DROP & CREATE TABLE + SEED</span>
              </div>
            </div>

            <p className="text-xs text-slate-300 leading-relaxed font-mono">
              Tindakan ini akan membuat ulang seluruh tabel SQL database awal (employees, user_accounts, dms_documents, dll) dan menyisipkan ulang seluruh data dari frontend memory.
            </p>

            <div className="flex items-center justify-end gap-2 pt-2">
              <button
                onClick={() => setIsReinitConfirmOpen(false)}
                className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold rounded-xl"
              >
                Batal
              </button>

              <button
                onClick={handleExecuteReinitSchema}
                disabled={isReinitializationRunning}
                className="px-4 py-2 bg-rose-600 hover:bg-rose-500 text-white text-xs font-black uppercase rounded-xl shadow-lg shadow-rose-600/30 flex items-center gap-1.5"
              >
                {isReinitializationRunning ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : null}
                <span>Ya, Re-Inisialisasi Schema</span>
              </button>
            </div>
          </div>
        </div>
      )}

      {/* CREATE TRIGGER MODAL */}
      {isTriggerModalOpen && (
        <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4 font-sans">
          <div className="bg-slate-900 border border-sky-500/40 rounded-2xl max-w-lg w-full p-6 text-white space-y-4 shadow-2xl">
            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
              <h3 className="text-sm font-black text-sky-400 uppercase tracking-wide flex items-center gap-2">
                <Plus className="w-4 h-4" />
                Buat Trigger System Database Baru
              </h3>
              <button onClick={() => setIsTriggerModalOpen(false)} className="text-slate-400 hover:text-white font-bold text-xs">Tutup [X]</button>
            </div>

            <form onSubmit={handleSaveTrigger} className="space-y-3 text-xs font-mono">
              <div>
                <label className="block text-slate-400 uppercase font-bold text-[10px] mb-1">Nama Trigger</label>
                <input
                  type="text"
                  required
                  value={triggerForm.name}
                  onChange={e => setTriggerForm(prev => ({ ...prev, name: e.target.value }))}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2.5 text-white focus:outline-none focus:border-sky-400"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-slate-400 uppercase font-bold text-[10px] mb-1">Target Table</label>
                  <select
                    value={triggerForm.tableName}
                    onChange={e => setTriggerForm(prev => ({ ...prev, tableName: e.target.value }))}
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2.5 text-white focus:outline-none focus:border-sky-400"
                  >
                    <option value="employees">employees</option>
                    <option value="user_accounts">user_accounts</option>
                    <option value="dms_documents">dms_documents</option>
                    <option value="workflow_requests">workflow_requests</option>
                    <option value="saas_tenants">saas_tenants</option>
                  </select>
                </div>

                <div>
                  <label className="block text-slate-400 uppercase font-bold text-[10px] mb-1">Event Timing & Action</label>
                  <select
                    value={`${triggerForm.eventTiming}_${triggerForm.eventAction}`}
                    onChange={e => {
                      const [timing, action] = e.target.value.split("_");
                      setTriggerForm(prev => ({ ...prev, eventTiming: timing as any, eventAction: action as any }));
                    }}
                    className="w-full bg-slate-950 border border-slate-800 rounded-xl p-2.5 text-white focus:outline-none focus:border-sky-400"
                  >
                    <option value="BEFORE_INSERT">BEFORE INSERT</option>
                    <option value="BEFORE_UPDATE">BEFORE UPDATE</option>
                    <option value="AFTER_INSERT">AFTER INSERT</option>
                    <option value="AFTER_UPDATE">AFTER UPDATE</option>
                    <option value="AFTER_INSERT OR UPDATE">AFTER INSERT OR UPDATE</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-slate-400 uppercase font-bold text-[10px] mb-1">PL/pgSQL Trigger Code Definition</label>
                <textarea
                  rows={6}
                  required
                  value={triggerForm.definitionSql}
                  onChange={e => setTriggerForm(prev => ({ ...prev, definitionSql: e.target.value }))}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-emerald-300 font-mono text-xs focus:outline-none focus:border-sky-400"
                ></textarea>
              </div>

              <div className="flex items-center justify-end gap-2 pt-2">
                <button
                  type="button"
                  onClick={() => setIsTriggerModalOpen(false)}
                  className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-bold rounded-xl"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-sky-500 hover:bg-sky-400 text-slate-950 text-xs font-black uppercase rounded-xl shadow-lg shadow-sky-500/20"
                >
                  Simpan & Aktifkan Trigger
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

    </div>
  );
};

export default BackendDatabaseManager;