import React, { useState } from 'react';
import { Akun, Jurnal, ProfilPerusahaan, User, AsetTetap } from '../../types/accounting';
import { SqlGeneratorService } from '../../services/sqlGenerator';
import { testDbConnection, DbTestResult } from '../../services/apiConfig';
import {
  Database,
  Download,
  Copy,
  Check,
  Code2,
  FileCode,
  Server,
  Layers,
  RefreshCw,
  Globe,
  Activity,
  CheckCircle2,
  AlertTriangle,
  ShieldCheck,
  Terminal,
} from 'lucide-react';

interface DatabaseCI4ViewProps {
  profile: ProfilPerusahaan;
  akuns: Akun[];
  journals: Jurnal[];
  users: User[];
  asetTetap?: AsetTetap[];
  onResetData: () => void;
}

export const DatabaseCI4View: React.FC<DatabaseCI4ViewProps> = ({
  profile,
  akuns,
  journals,
  users,
  asetTetap = [],
  onResetData,
}) => {
  const [activeTab, setActiveTab] = useState<'connection' | 'mysql' | 'postgres' | 'ci4' | 'backup'>('connection');
  const [copied, setCopied] = useState<string | null>(null);
  const [testingDb, setTestingDb] = useState(false);
  const [dbTestResult, setDbTestResult] = useState<DbTestResult | null>(null);
  const [dbTestError, setDbTestError] = useState<string | null>(null);

  const handleRunDbTest = async () => {
    setTestingDb(true);
    setDbTestError(null);
    try {
      const res = await testDbConnection();
      setDbTestResult(res);
    } catch (err: any) {
      setDbTestError(err.message || 'Gagal menghubungi server');
    } finally {
      setTestingDb(false);
    }
  };

  const mysqlSql = SqlGeneratorService.generateMySQL(profile, akuns, journals, users, asetTetap);
  const postgresSql = SqlGeneratorService.generatePostgreSQL(profile, akuns, journals, users, asetTetap);
  const seedsSql = SqlGeneratorService.generateSeedsOnly(profile, akuns, journals, users, asetTetap);
  const ci4Code = SqlGeneratorService.generateCI4Code();

  const handleCopy = (text: string, label: string) => {
    navigator.clipboard.writeText(text);
    setCopied(label);
    setTimeout(() => setCopied(null), 2500);
  };

  const handleDownloadFile = (filename: string, content: string, type: string) => {
    const blob = new Blob([content], { type });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="space-y-5">
      <div className="rounded-lg border border-slate-200 bg-white shadow-xs">
        {/* Header */}
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 bg-slate-50/70 px-5 py-3.5">
          <div className="flex items-center gap-2">
            <Database className="h-4 w-4 text-blue-600" />
            <h2 className="text-sm font-bold uppercase tracking-wider text-slate-800">
              Database MySQL, PostgreSQL & CodeIgniter 4 (CI4) Architecture
            </h2>
          </div>

          <div className="flex flex-wrap gap-1">
            <button
              onClick={() => setActiveTab('connection')}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded ${
                activeTab === 'connection' ? 'bg-blue-600 text-white' : 'text-slate-600 hover:bg-slate-100'
              }`}
            >
              <Activity className="h-3.5 w-3.5" />
              Status Koneksi (Hosting &amp; Lokal)
            </button>
            <button
              onClick={() => setActiveTab('mysql')}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded ${
                activeTab === 'mysql' ? 'bg-blue-600 text-white' : 'text-slate-600 hover:bg-slate-100'
              }`}
            >
              <Server className="h-3.5 w-3.5" />
              MySQL 8.0+ / MariaDB DDL
            </button>
            <button
              onClick={() => setActiveTab('postgres')}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded ${
                activeTab === 'postgres' ? 'bg-blue-600 text-white' : 'text-slate-600 hover:bg-slate-100'
              }`}
            >
              <Database className="h-3.5 w-3.5" />
              PostgreSQL 14+ DDL
            </button>
            <button
              onClick={() => setActiveTab('ci4')}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded ${
                activeTab === 'ci4' ? 'bg-blue-600 text-white' : 'text-slate-600 hover:bg-slate-100'
              }`}
            >
              <Code2 className="h-3.5 w-3.5" />
              CodeIgniter 4 (CI4) Code
            </button>
            <button
              onClick={() => setActiveTab('backup')}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded ${
                activeTab === 'backup' ? 'bg-blue-600 text-white' : 'text-slate-600 hover:bg-slate-100'
              }`}
            >
              <RefreshCw className="h-3.5 w-3.5" />
              Backup & Reset Demo
            </button>
          </div>
        </div>

        {/* Tab 0: Status & Uji Koneksi Database (Hosting & Lokal) */}
        {activeTab === 'connection' && (
          <div className="p-5 space-y-5">
            {/* Live Test Banner */}
            <div className="rounded-xl border border-indigo-200 bg-linear-to-r from-indigo-50/80 via-blue-50/50 to-white p-4">
              <div className="flex flex-wrap items-center justify-between gap-3">
                <div className="space-y-1">
                  <div className="flex items-center gap-2">
                    <Activity className="h-4 w-4 text-indigo-600" />
                    <h3 className="font-bold text-slate-900 text-sm">
                      Diagnostik Koneksi Server &amp; Database MySQL
                    </h3>
                  </div>
                  <p className="text-xs text-slate-600">
                    Periksa status konektivitas pool MySQL ke database aktif (baik di <code>localhost</code> maupun server hosting cPanel).
                  </p>
                </div>

                <button
                  type="button"
                  onClick={handleRunDbTest}
                  disabled={testingDb}
                  className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-400 text-white px-4 py-2 text-xs font-bold shadow-xs cursor-pointer transition-all"
                >
                  <RefreshCw className={`h-3.5 w-3.5 ${testingDb ? 'animate-spin' : ''}`} />
                  <span>{testingDb ? 'Memeriksa Koneksi...' : 'Uji Koneksi MySQL Sekarang'}</span>
                </button>
              </div>

              {/* Hasil Pengujian Live */}
              {dbTestResult && (
                <div
                  className={`mt-4 rounded-lg border p-4 text-xs space-y-2 ${
                    dbTestResult.connected
                      ? 'border-emerald-300 bg-emerald-50 text-emerald-950'
                      : 'border-amber-300 bg-amber-50 text-amber-950'
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2 font-bold text-sm">
                      {dbTestResult.connected ? (
                        <>
                          <CheckCircle2 className="h-5 w-5 text-emerald-600" />
                          <span>Status: Database MySQL Berhasil Terhubung!</span>
                        </>
                      ) : (
                        <>
                          <AlertTriangle className="h-5 w-5 text-amber-600" />
                          <span>Status: Belum Terhubung ke MySQL</span>
                        </>
                      )}
                    </div>
                    <span className="font-mono text-[11px] px-2 py-0.5 rounded bg-white/80 border border-slate-200">
                      Env: {dbTestResult.environment?.toUpperCase() || 'DEVELOPMENT'}
                    </span>
                  </div>

                  <p className="text-xs">{dbTestResult.message}</p>

                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 pt-2 border-t border-slate-200/60 font-mono text-[11px]">
                    <div className="bg-white/70 p-2 rounded">
                      <span className="text-slate-500 block text-[10px]">Database Aktif:</span>
                      <strong className="text-slate-900">{dbTestResult.database || '-'}</strong>
                    </div>
                    <div className="bg-white/70 p-2 rounded">
                      <span className="text-slate-500 block text-[10px]">Tabel Terpasang:</span>
                      <strong className="text-slate-900">{dbTestResult.tableCount ?? 0} Tabel</strong>
                    </div>
                    <div className="bg-white/70 p-2 rounded">
                      <span className="text-slate-500 block text-[10px]">Versi MySQL:</span>
                      <strong className="text-slate-900 truncate block">{dbTestResult.mysqlVersion || '-'}</strong>
                    </div>
                    <div className="bg-white/70 p-2 rounded">
                      <span className="text-slate-500 block text-[10px]">Waktu Database:</span>
                      <strong className="text-slate-900">{dbTestResult.dbTime ? new Date(dbTestResult.dbTime).toLocaleTimeString('id-ID') : '-'}</strong>
                    </div>
                  </div>
                </div>
              )}

              {dbTestError && (
                <div className="mt-4 rounded-lg border border-rose-300 bg-rose-50 p-3 text-xs text-rose-900 flex items-start gap-2">
                  <AlertTriangle className="h-4 w-4 text-rose-600 shrink-0 mt-0.5" />
                  <div>
                    <strong>Gagal Melakukan Pengujian:</strong> {dbTestError}
                    <div className="mt-1 text-[11px] text-rose-700">
                      Pastikan service Node.js/Express backend aktif dan port yang ditentukan telah dibuka.
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Perbandingan Konfigurasi Hosting vs Lokal */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
              {/* Card Hosting */}
              <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs space-y-3">
                <div className="flex items-center justify-between border-b border-slate-100 pb-2.5">
                  <div className="flex items-center gap-2">
                    <Globe className="h-4 w-4 text-indigo-600" />
                    <h4 className="font-bold text-slate-900">1. Konfigurasi Hosting (Produksi)</h4>
                  </div>
                  <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-indigo-50 text-indigo-700 border border-indigo-200">
                    PORT 3001 &bull; /akuntansi
                  </span>
                </div>

                <div className="space-y-1.5 text-[11px] text-slate-600 font-mono bg-slate-50 p-3 rounded-lg border border-slate-200">
                  <div>NODE_ENV=production</div>
                  <div>BASE_PATH=/akuntansi</div>
                  <div>APP_URL=https://tiomanjaya.com/akuntansi</div>
                  <div>PORT=3001</div>
                  <div>DB_TYPE=mysql</div>
                  <div>MYSQLHOST=localhost</div>
                  <div>MYSQLPORT=3306</div>
                  <div>MYSQLUSER=tiomanj1_akuntansi</div>
                  <div>MYSQLPASSWORD=mypassword</div>
                  <div>MYSQLDATABASE=tiomanj1_db_akuntansis1</div>
                </div>

                <div className="flex items-center justify-between pt-1">
                  <span className="text-[11px] text-slate-500">Berkas: <code>.env.hosting.example</code></span>
                  <button
                    type="button"
                    onClick={() => {
                      const text = `NODE_ENV=production\nBASE_PATH=/akuntansi\nAPP_URL=https://tiomanjaya.com/akuntansi\nPORT=3001\nDB_TYPE=mysql\nMYSQLHOST=localhost\nMYSQLPORT=3306\nMYSQLUSER=tiomanj1_akuntansi\nMYSQLPASSWORD=mypassword\nMYSQLDATABASE=tiomanj1_db_akuntansis1\nMYSQL_URL=mysql://tiomanj1_akuntansi:mypassword@localhost:3306/tiomanj1_db_akuntansis1`;
                      handleCopy(text, 'hosting_env');
                    }}
                    className="inline-flex items-center gap-1 rounded bg-indigo-50 hover:bg-indigo-100 text-indigo-700 border border-indigo-200 px-2.5 py-1 text-[11px] font-semibold cursor-pointer"
                  >
                    {copied === 'hosting_env' ? <Check className="h-3 w-3 text-emerald-600" /> : <Copy className="h-3 w-3" />}
                    <span>{copied === 'hosting_env' ? 'Tersalin!' : 'Salin Env Hosting'}</span>
                  </button>
                </div>
              </div>

              {/* Card Lokal */}
              <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-2xs space-y-3">
                <div className="flex items-center justify-between border-b border-slate-100 pb-2.5">
                  <div className="flex items-center gap-2">
                    <Terminal className="h-4 w-4 text-blue-600" />
                    <h4 className="font-bold text-slate-900">2. Konfigurasi Lokal (Localhost)</h4>
                  </div>
                  <span className="px-2 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-700 border border-blue-200">
                    PORT 3000 &bull; / (Root)
                  </span>
                </div>

                <div className="space-y-1.5 text-[11px] text-slate-600 font-mono bg-slate-50 p-3 rounded-lg border border-slate-200">
                  <div>NODE_ENV=development</div>
                  <div>BASE_PATH=/</div>
                  <div>PORT=3000</div>
                  <div>DB_TYPE=mysql</div>
                  <div>MYSQLHOST=localhost</div>
                  <div>MYSQLPORT=3306</div>
                  <div>MYSQLUSER=root</div>
                  <div>MYSQLPASSWORD=</div>
                  <div>MYSQLDATABASE=db_akuntansis1</div>
                  <div>MYSQL_URL=mysql://root:@localhost:3306/db_akuntansis1</div>
                </div>

                <div className="flex items-center justify-between pt-1">
                  <span className="text-[11px] text-slate-500">Berkas: <code>.env.local.example</code></span>
                  <button
                    type="button"
                    onClick={() => {
                      const text = `DB_TYPE=mysql\nMYSQL_URL=mysql://root:@localhost:3306/db_akuntansis1\nMYSQLHOST=localhost\nMYSQLPORT=3306\nMYSQLUSER=root\nMYSQLPASSWORD=\nMYSQLDATABASE=db_akuntansis1`;
                      handleCopy(text, 'local_env');
                    }}
                    className="inline-flex items-center gap-1 rounded bg-blue-50 hover:bg-blue-100 text-blue-700 border border-blue-200 px-2.5 py-1 text-[11px] font-semibold cursor-pointer"
                  >
                    {copied === 'local_env' ? <Check className="h-3 w-3 text-emerald-600" /> : <Copy className="h-3 w-3" />}
                    <span>{copied === 'local_env' ? 'Tersalin!' : 'Salin Env Lokal'}</span>
                  </button>
                </div>
              </div>
            </div>

            {/* Quick SQL Dump Downloads for Hosting & Local */}
            <div className="rounded-xl border border-slate-200 bg-slate-50 p-4 space-y-2">
              <h4 className="font-bold text-slate-800 text-xs flex items-center gap-1.5">
                <Download className="h-3.5 w-3.5 text-blue-600" />
                <span>Unduh Berkas Database MySQL Lengkap Siap Impor:</span>
              </h4>
              <p className="text-[11px] text-slate-600 leading-relaxed">
                Gunakan berkas SQL di bawah untuk diimpor ke database hosting (<code>tiomanj1_db_akuntansis1</code>) atau komputer lokal (<code>db_akuntansis1</code>):
              </p>
              <div className="flex flex-wrap gap-2 pt-1">
                <button
                  type="button"
                  onClick={() =>
                    handleDownloadFile(
                      'mysql_full_dump.sql',
                      mysqlSql,
                      'application/sql;charset=utf-8;'
                    )
                  }
                  className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 text-xs font-semibold shadow-2xs cursor-pointer"
                >
                  <Download className="h-3.5 w-3.5" />
                  <span>Unduh mysql_full_dump.sql (Skema + Seeds Lengkap)</span>
                </button>
                <button
                  type="button"
                  onClick={() =>
                    handleDownloadFile(
                      'mysql_seeds.sql',
                      seedsSql,
                      'application/sql;charset=utf-8;'
                    )
                  }
                  className="inline-flex items-center gap-1.5 rounded-lg bg-white hover:bg-slate-100 text-slate-700 border border-slate-300 px-3 py-1.5 text-xs font-semibold cursor-pointer"
                >
                  <Download className="h-3.5 w-3.5" />
                  <span>Unduh Data Seeds Saja (.sql)</span>
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Tab 1: MySQL */}
        {activeTab === 'mysql' && (
          <div className="p-5 space-y-4">
            <div className="flex flex-wrap items-center justify-between gap-3 bg-blue-50 p-3 rounded border border-blue-200 text-xs text-blue-900">
              <div>
                <strong>Skema MySQL Lengkap + Data Seed Riil:</strong> Berisi skrip DDL tabel (akun,
                jurnal, jurnal_item, profil_perusahaan, users, audit_trail) dan SEED SQL dari data
                aktif PT Tio Mandiri Jaya.
              </div>
              <div className="flex gap-2">
                <button
                  onClick={() => handleCopy(mysqlSql, 'mysql')}
                  className="inline-flex items-center gap-1 rounded bg-white px-3 py-1 text-xs font-semibold text-slate-700 border border-slate-300 hover:bg-slate-50"
                >
                  {copied === 'mysql' ? <Check className="h-3.5 w-3.5 text-emerald-600" /> : <Copy className="h-3.5 w-3.5" />}
                  {copied === 'mysql' ? 'Tersalin!' : 'Salin SQL'}
                </button>
                <button
                  onClick={() =>
                    handleDownloadFile(
                      'accounting_tmj_mysql_seed.sql',
                      mysqlSql,
                      'application/sql;charset=utf-8;'
                    )
                  }
                  className="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1 text-xs font-semibold text-white hover:bg-blue-700"
                >
                  <Download className="h-3.5 w-3.5" /> Unduh file .SQL
                </button>
              </div>
            </div>

            <div className="relative">
              <pre className="max-h-[500px] overflow-y-auto rounded-lg bg-slate-900 p-4 font-mono text-[11px] text-emerald-400">
                {mysqlSql}
              </pre>
            </div>
          </div>
        )}

        {/* Tab 2: PostgreSQL */}
        {activeTab === 'postgres' && (
          <div className="p-5 space-y-4">
            <div className="flex flex-wrap items-center justify-between gap-3 bg-emerald-50 p-3 rounded border border-emerald-200 text-xs text-emerald-950">
              <div>
                <strong>Skema PostgreSQL DDL + Seeds:</strong> Kompatibel penuh dengan PostgreSQL 14+,
                pgAdmin, Supabase, Neon, atau Cloud SQL.
              </div>
              <div className="flex gap-2">
                <button
                  onClick={() => handleCopy(postgresSql, 'pg')}
                  className="inline-flex items-center gap-1 rounded bg-white px-3 py-1 text-xs font-semibold text-slate-700 border border-slate-300 hover:bg-slate-50"
                >
                  {copied === 'pg' ? <Check className="h-3.5 w-3.5 text-emerald-600" /> : <Copy className="h-3.5 w-3.5" />}
                  {copied === 'pg' ? 'Tersalin!' : 'Salin SQL'}
                </button>
                <button
                  onClick={() =>
                    handleDownloadFile(
                      'accounting_tmj_postgres_seed.sql',
                      postgresSql,
                      'application/sql;charset=utf-8;'
                    )
                  }
                  className="inline-flex items-center gap-1 rounded bg-emerald-700 px-3 py-1 text-xs font-semibold text-white hover:bg-emerald-800"
                >
                  <Download className="h-3.5 w-3.5" /> Unduh file PostgreSQL .SQL
                </button>
              </div>
            </div>

            <pre className="max-h-[500px] overflow-y-auto rounded-lg bg-slate-900 p-4 font-mono text-[11px] text-cyan-300">
              {postgresSql}
            </pre>
          </div>
        )}

        {/* Tab 3: CI4 Code */}
        {activeTab === 'ci4' && (
          <div className="p-5 space-y-6">
            <div className="rounded bg-slate-50 border border-slate-200 p-3 text-xs text-slate-700">
              <strong>Struktur Arsitektur CodeIgniter 4 (CI4):</strong>
              <p className="mt-1 text-slate-500">
                Berikut adalah template resmi file CI4 yang dapat langsung Anda letakkan di folder project
                CodeIgniter 4 Anda:
              </p>
            </div>

            {/* Migration */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="font-mono text-xs font-bold text-slate-800 flex items-center gap-1">
                  <FileCode className="h-3.5 w-3.5 text-amber-600" />
                  app/Database/Migrations/CreateAccountingTables.php
                </span>
                <button
                  onClick={() => handleCopy(ci4Code.migration, 'migration')}
                  className="text-xs text-blue-600 hover:underline"
                >
                  {copied === 'migration' ? 'Tersalin!' : 'Salin Kode'}
                </button>
              </div>
              <pre className="max-h-60 overflow-y-auto rounded bg-slate-900 p-3 font-mono text-[11px] text-amber-300">
                {ci4Code.migration}
              </pre>
            </div>

            {/* Controller */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="font-mono text-xs font-bold text-slate-800 flex items-center gap-1">
                  <FileCode className="h-3.5 w-3.5 text-blue-600" />
                  app/Controllers/Akuntansi.php
                </span>
                <button
                  onClick={() => handleCopy(ci4Code.controller, 'controller')}
                  className="text-xs text-blue-600 hover:underline"
                >
                  {copied === 'controller' ? 'Tersalin!' : 'Salin Kode'}
                </button>
              </div>
              <pre className="max-h-60 overflow-y-auto rounded bg-slate-900 p-3 font-mono text-[11px] text-cyan-300">
                {ci4Code.controller}
              </pre>
            </div>

            {/* Models */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="font-mono text-xs font-bold text-slate-800 flex items-center gap-1">
                  <FileCode className="h-3.5 w-3.5 text-emerald-600" />
                  app/Models/JurnalModel.php
                </span>
                <button
                  onClick={() => handleCopy(ci4Code.jurnalModel, 'jurnalModel')}
                  className="text-xs text-blue-600 hover:underline"
                >
                  {copied === 'jurnalModel' ? 'Tersalin!' : 'Salin Kode'}
                </button>
              </div>
              <pre className="max-h-60 overflow-y-auto rounded bg-slate-900 p-3 font-mono text-[11px] text-emerald-300">
                {ci4Code.jurnalModel}
              </pre>
            </div>
          </div>
        )}

        {/* Tab 4: Backup & Reset */}
        {activeTab === 'backup' && (
          <div className="p-6 space-y-6 max-w-2xl mx-auto text-xs">
            <div className="rounded-lg border border-slate-200 bg-white p-4 space-y-3">
              <h3 className="font-bold text-slate-800 uppercase tracking-wider">
                Unduh Cadangan JSON (Full Database Dump)
              </h3>
              <p className="text-slate-600">
                Simpan seluruh data master akun, transaksi jurnal, profil instansi, dan riwayat audit trail ke
                dalam format file JSON portabel.
              </p>
              <button
                onClick={() => {
                  const dump = {
                    profile,
                    akuns,
                    journals,
                    users,
                    exportedAt: new Date().toISOString(),
                  };
                  handleDownloadFile(
                    `backup_tmj_akuntansi_${new Date().toISOString().substring(0, 10)}.json`,
                    JSON.stringify(dump, null, 2),
                    'application/json'
                  );
                }}
                className="inline-flex items-center gap-1.5 rounded bg-blue-600 px-4 py-2 font-semibold text-white hover:bg-blue-700"
              >
                <Download className="h-4 w-4" /> Download Backup Data (.json)
              </button>
            </div>

            <div className="rounded-lg border border-red-200 bg-red-50 p-4 space-y-3">
              <h3 className="font-bold text-red-900 uppercase tracking-wider">
                Reset ke Data Demo Awal (PT Tio Mandiri Jaya)
              </h3>
              <p className="text-red-700">
                Jika Anda ingin mengembalikan sistem ke kondisi data awal yang seimbang dan terverifikasi
                lengkap dengan jurnal simulasi 2026.
              </p>
              <button
                onClick={() => {
                  if (confirm('Yakin ingin mereset seluruh data kembali ke data demo awal? Semua perubahan baru akan digantikan.')) {
                    onResetData();
                  }
                }}
                className="inline-flex items-center gap-1.5 rounded bg-red-600 px-4 py-2 font-semibold text-white hover:bg-red-700"
              >
                <RefreshCw className="h-4 w-4" /> Kembalikan ke Data Demo Standar
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};