import React, { useState, useMemo } from 'react';
import {
  PeriodeAkuntansi,
  Jurnal,
  Akun,
  ProfilPerusahaan,
  User,
} from '../../types/accounting';
import { StorageService } from '../../services/storage';
import { AccountingEngine } from '../../services/accountingEngine';
import {
  Calendar,
  Lock,
  Unlock,
  CheckCircle2,
  AlertTriangle,
  Plus,
  RefreshCw,
  ArrowRight,
  Sparkles,
  Layers,
  BookOpen,
  Scale,
  FileText,
  Clock,
  Check,
  X,
  Trash2,
} from 'lucide-react';

interface PeriodeManagementViewProps {
  periodes: PeriodeAkuntansi[];
  activePeriode: PeriodeAkuntansi;
  journals: Jurnal[];
  akuns: Akun[];
  profile: ProfilPerusahaan;
  activeUser: User;
  onSelectPeriode: (periode: PeriodeAkuntansi) => void;
  onOpenTutupBuku: () => void;
  onRefreshData: () => void;
  onNavigateTab: (tab: string) => void;
}

const INDO_MONTHS = [
  'Januari',
  'Februari',
  'Maret',
  'April',
  'Mei',
  'Juni',
  'Juli',
  'Agustus',
  'September',
  'Oktober',
  'November',
  'Desember',
];

export const PeriodeManagementView: React.FC<PeriodeManagementViewProps> = ({
  periodes,
  activePeriode,
  journals,
  akuns,
  profile,
  activeUser,
  onSelectPeriode,
  onOpenTutupBuku,
  onRefreshData,
  onNavigateTab,
}) => {
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  const [newYear, setNewYear] = useState<number>(new Date().getFullYear());
  const [newMonth, setNewMonth] = useState<number>(new Date().getMonth() + 1);
  const [newPeriodName, setNewPeriodName] = useState<string>('');
  const [syncResult, setSyncResult] = useState<{
    updatedJournalsCount: number;
    newPeriodsAdded: string[];
  } | null>(null);

  // Auto-generate name when year/month changes in modal
  const suggestedName = useMemo(() => {
    return `${INDO_MONTHS[newMonth - 1] || 'Januari'} ${newYear}`;
  }, [newYear, newMonth]);

  // Per-period stats
  const periodStats = useMemo(() => {
    return periodes.map((p) => {
      const periodJournals = journals.filter((j) => j.bulan === p.namaPeriode);
      const juCount = periodJournals.filter((j) => j.tipe === 'JU').length;
      const ajpCount = periodJournals.filter((j) => j.tipe === 'AJP').length;
      const totalDebet = periodJournals.reduce((sum, j) => sum + (j.totalDebet || 0), 0);
      const totalKredit = periodJournals.reduce((sum, j) => sum + (j.totalKredit || 0), 0);
      const isBalanced = Math.abs(totalDebet - totalKredit) < 1;

      return {
        periode: p,
        totalJournals: periodJournals.length,
        juCount,
        ajpCount,
        totalDebet,
        totalKredit,
        isBalanced,
      };
    });
  }, [periodes, journals]);

  // Detect any unsynchronized transactions (tanggal month != bulan)
  const unsyncedJournals = useMemo(() => {
    return journals.filter((j) => {
      if (!j.tanggal) return false;
      const parts = j.tanggal.split('-');
      if (parts.length < 2) return false;
      const m = parseInt(parts[1], 10);
      const y = parseInt(parts[0], 10);
      if (isNaN(m) || isNaN(y) || m < 1 || m > 12) return false;
      const expected = `${INDO_MONTHS[m - 1]} ${y}`;
      return j.bulan !== expected;
    });
  }, [journals]);

  // Active period specific metrics
  const activeStats = useMemo(() => {
    const activeJournals = journals.filter((j) => j.bulan === activePeriode.namaPeriode);
    const tb = AccountingEngine.calculateNeracaSaldo(akuns, activeJournals);
    const lr = AccountingEngine.calculateLabaRugi(akuns, activeJournals, profile);

    return {
      count: activeJournals.length,
      totalDebet: activeJournals.reduce((sum, j) => sum + j.totalDebet, 0),
      isBalanced: tb.isBalanced,
      labaBersih: lr.labaBersihSetelahPajak,
      totalPendapatan: lr.totalPendapatan,
    };
  }, [journals, activePeriode, akuns, profile]);

  const handleOpenAdd = () => {
    // Next month from latest period
    if (periodes.length > 0) {
      const last = periodes[periodes.length - 1];
      let nextM = last.bulan + 1;
      let nextY = last.tahun;
      if (nextM > 12) {
        nextM = 1;
        nextY += 1;
      }
      setNewYear(nextY);
      setNewMonth(nextM);
      setNewPeriodName(`${INDO_MONTHS[nextM - 1]} ${nextY}`);
    } else {
      setNewYear(2026);
      setNewMonth(1);
      setNewPeriodName('Januari 2026');
    }
    setIsAddModalOpen(true);
  };

  const handleCreatePeriod = (e: React.FormEvent) => {
    e.preventDefault();
    const finalName = newPeriodName.trim() || suggestedName;
    const pid = `per-${newYear}-${String(newMonth).padStart(2, '0')}`;

    if (periodes.some((p) => p.id === pid || p.namaPeriode.toLowerCase() === finalName.toLowerCase())) {
      alert(`Periode "${finalName}" sudah terdaftar dalam sistem!`);
      return;
    }

    const newP: PeriodeAkuntansi = {
      id: pid,
      tahun: newYear,
      bulan: newMonth,
      namaPeriode: finalName,
      isClosed: false,
    };

    StorageService.addPeriode(newP);
    setIsAddModalOpen(false);
    onRefreshData();
  };

  const handleRunSync = () => {
    const res = StorageService.syncAllJournalsToPeriods();
    setSyncResult(res);
    onRefreshData();
  };

  const handleReopen = (p: PeriodeAkuntansi) => {
    if (window.confirm(`Yakin ingin membuka kembali periode "${p.namaPeriode}" untuk revisi pembukuan?`)) {
      StorageService.reopenPeriode(p.id);
      onRefreshData();
    }
  };

  const handleDelete = (p: PeriodeAkuntansi) => {
    const hasJournals = journals.some((j) => j.bulan === p.namaPeriode);
    if (hasJournals) {
      alert(`Periode "${p.namaPeriode}" tidak dapat dihapus karena memiliki transaksi jurnal tercatat.`);
      return;
    }
    if (window.confirm(`Hapus periode "${p.namaPeriode}"?`)) {
      StorageService.deletePeriode(p.id);
      onRefreshData();
    }
  };

  return (
    <div className="space-y-6">
      {/* Top Banner */}
      <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-xs">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div className="flex items-center gap-3.5">
            <div className="rounded-xl bg-linear-to-br from-blue-600 to-indigo-700 p-3 text-white shadow-xs">
              <Calendar className="h-6 w-6" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-lg font-bold text-slate-900 tracking-tight">
                  Manajemen Periode Akuntansi & Sinkronisasi
                </h1>
                <span className="rounded-full bg-blue-100 text-blue-800 font-bold px-2 py-0.5 text-xs">
                  {periodes.length} Periode
                </span>
              </div>
              <p className="text-xs text-slate-500 mt-0.5">
                Kontrol siklus pembukuan bulanan, tutup buku otomatis, dan sinkronkan transaksi jurnal ke seluruh laporan keuangan
              </p>
            </div>
          </div>

          {/* Quick Action Buttons */}
          <div className="flex flex-wrap items-center gap-2">
            <button
              onClick={handleRunSync}
              className="inline-flex items-center gap-1.5 rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-xs font-bold text-indigo-700 hover:bg-indigo-100 shadow-2xs transition-colors cursor-pointer"
              title="Periksa dan sinkronkan tanggal semua transaksi agar sesuai dengan nama periodenya"
            >
              <RefreshCw className="h-3.5 w-3.5 text-indigo-600" />
              <span>Sinkronkan Transaksi & Periode</span>
            </button>
            <button
              onClick={handleOpenAdd}
              className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-xs hover:bg-blue-700 transition-colors cursor-pointer"
            >
              <Plus className="h-3.5 w-3.5" />
              <span>+ Tambah Periode Baru</span>
            </button>
            <button
              onClick={onOpenTutupBuku}
              className="inline-flex items-center gap-1.5 rounded-lg bg-amber-600 px-3 py-2 text-xs font-bold text-white shadow-xs hover:bg-amber-700 transition-colors cursor-pointer"
            >
              <Lock className="h-3.5 w-3.5" />
              <span>Tutup Buku Periode Ini</span>
            </button>
          </div>
        </div>

        {/* Sync notification if recently run */}
        {syncResult && (
          <div className="mt-4 rounded-lg border border-emerald-300 bg-emerald-50 p-3 text-xs text-emerald-900 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-4 w-4 text-emerald-600 shrink-0" />
              <span>
                <strong>Sinkronisasi Selesai:</strong> {syncResult.updatedJournalsCount} transaksi jurnal telah
                disesuaikan periode bulannya dengan tanggal faktur.
                {syncResult.newPeriodsAdded.length > 0 &&
                  ` ${syncResult.newPeriodsAdded.length} periode baru otomatis dibuat (${syncResult.newPeriodsAdded.join(', ')}).`}
              </span>
            </div>
            <button
              onClick={() => setSyncResult(null)}
              className="text-emerald-700 hover:text-emerald-900 font-bold ml-2"
            >
              ✕
            </button>
          </div>
        )}

        {/* Discrepancy warning banner if any un-synchronized transactions detected */}
        {unsyncedJournals.length > 0 && (
          <div className="mt-4 rounded-lg border border-amber-300 bg-amber-50 p-3 text-xs text-amber-900 flex flex-wrap items-center justify-between gap-2">
            <div className="flex items-center gap-2">
              <AlertTriangle className="h-4 w-4 text-amber-600 shrink-0" />
              <span>
                Terdeteksi <strong>{unsyncedJournals.length} transaksi</strong> yang tanggal fakturnya berbeda dengan
                nama periode pembukuan yang tersimpan.
              </span>
            </div>
            <button
              onClick={handleRunSync}
              className="rounded bg-amber-600 text-white px-3 py-1 font-bold text-[11px] hover:bg-amber-700 shadow-2xs"
            >
              Perbaiki & Sinkronkan Sekarang
            </button>
          </div>
        )}
      </div>

      {/* Active Period Highlight Card */}
      <div className="rounded-xl border-2 border-blue-400 bg-linear-to-r from-blue-900 via-slate-900 to-indigo-950 p-6 text-white shadow-md">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
          <div className="space-y-2">
            <div className="flex items-center gap-2">
              <span className="rounded-full bg-blue-500/30 border border-blue-400/40 px-2.5 py-0.5 text-[10px] font-bold tracking-wider uppercase text-blue-200">
                Konteks Periode Aktif Sistem
              </span>
              {activePeriode.isClosed ? (
                <span className="rounded-full bg-amber-500/20 text-amber-300 border border-amber-400/30 px-2 py-0.5 text-[10px] font-bold flex items-center gap-1">
                  <Lock className="h-2.5 w-2.5" /> Ditutup
                </span>
              ) : (
                <span className="rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 px-2 py-0.5 text-[10px] font-bold flex items-center gap-1">
                  <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                  Terbuka (Open)
                </span>
              )}
            </div>
            <h2 className="text-2xl font-black tracking-tight text-white uppercase">
              {activePeriode.namaPeriode}
            </h2>
            <p className="text-xs text-blue-200/90 leading-relaxed max-w-xl">
              Semua laporan keuangan (Neraca Saldo, Laba Rugi, Posisi Keuangan, Arus Kas, dan Rasio)
              secara langsung disinkronkan menyajikan data transaksi pada periode aktif ini.
            </p>
          </div>

          {/* Quick Metrics of Active Period */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 bg-white/5 border border-white/10 p-3.5 rounded-xl backdrop-blur-xs text-left">
            <div>
              <span className="text-[10px] text-blue-200 uppercase font-semibold block">Total Jurnal</span>
              <span className="text-base font-bold text-white font-mono mt-0.5 block">
                {activeStats.count} Transaksi
              </span>
            </div>
            <div>
              <span className="text-[10px] text-blue-200 uppercase font-semibold block">Mutasi Debet</span>
              <span className="text-base font-bold text-white font-mono mt-0.5 block truncate">
                Rp {activeStats.totalDebet.toLocaleString('id-ID')}
              </span>
            </div>
            <div>
              <span className="text-[10px] text-blue-200 uppercase font-semibold block">Pendapatan</span>
              <span className="text-base font-bold text-emerald-300 font-mono mt-0.5 block truncate">
                Rp {activeStats.totalPendapatan.toLocaleString('id-ID')}
              </span>
            </div>
            <div>
              <span className="text-[10px] text-blue-200 uppercase font-semibold block">Laba Bersih</span>
              <span className="text-base font-bold text-amber-300 font-mono mt-0.5 block truncate">
                Rp {activeStats.labaBersih.toLocaleString('id-ID')}
              </span>
            </div>
          </div>
        </div>

        {/* Shortcuts from active period */}
        <div className="mt-5 pt-4 border-t border-white/10 flex flex-wrap items-center gap-2 text-xs">
          <span className="text-blue-200 font-medium">Buka Laporan Periode Ini:</span>
          <button
            onClick={() => onNavigateTab('jurnal')}
            className="rounded bg-white/10 hover:bg-white/20 px-2.5 py-1 text-[11px] font-semibold text-white transition-colors"
          >
            Jurnal Umum
          </button>
          <button
            onClick={() => onNavigateTab('neracasaldo')}
            className="rounded bg-white/10 hover:bg-white/20 px-2.5 py-1 text-[11px] font-semibold text-white transition-colors"
          >
            Neraca Saldo
          </button>
          <button
            onClick={() => onNavigateTab('laporan-labarugi')}
            className="rounded bg-white/10 hover:bg-white/20 px-2.5 py-1 text-[11px] font-semibold text-white transition-colors"
          >
            Laba Rugi
          </button>
          <button
            onClick={() => onNavigateTab('laporan-balancesheet')}
            className="rounded bg-white/10 hover:bg-white/20 px-2.5 py-1 text-[11px] font-semibold text-white transition-colors"
          >
            Posisi Keuangan (Neraca)
          </button>
          <button
            onClick={() => onNavigateTab('laporan-aruskas')}
            className="rounded bg-white/10 hover:bg-white/20 px-2.5 py-1 text-[11px] font-semibold text-white transition-colors"
          >
            Arus Kas
          </button>
        </div>
      </div>

      {/* Period Table Card */}
      <div className="rounded-xl border border-slate-200 bg-white shadow-xs overflow-hidden">
        <div className="p-4 border-b border-slate-200 flex flex-wrap items-center justify-between gap-3 bg-slate-50/70">
          <div>
            <h3 className="text-sm font-bold uppercase tracking-wider text-slate-800">
              Daftar Periode Pembukuan & Status Tutup Buku
            </h3>
            <p className="text-xs text-slate-500">
              Pilih salah satu periode untuk mengubah konteks aktif sistem secara keseluruhan
            </p>
          </div>
          <span className="text-xs text-slate-500 font-medium">
            Total Jurnal Terdaftar: <strong className="text-slate-800">{journals.length} transaksi</strong>
          </span>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs border-collapse">
            <thead className="bg-slate-100 text-slate-700 uppercase font-semibold border-b border-slate-200">
              <tr>
                <th className="py-3 px-4">Nama Periode</th>
                <th className="py-3 px-3">Tahun & Bulan</th>
                <th className="py-3 px-3 text-center">Status Periode</th>
                <th className="py-3 px-3 text-center">Jurnal (JU / AJP)</th>
                <th className="py-3 px-4 text-right">Mutasi Debet & Kredit</th>
                <th className="py-3 px-3 text-center">Keseimbangan</th>
                <th className="py-3 px-4 text-center">Aksi & Kontrol</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {periodStats.map(({ periode: p, totalJournals, juCount, ajpCount, totalDebet, totalKredit, isBalanced }) => {
                const isActive = p.id === activePeriode.id;

                return (
                  <tr
                    key={p.id}
                    className={`transition-colors ${
                      isActive ? 'bg-blue-50/70 font-semibold' : 'hover:bg-slate-50'
                    }`}
                  >
                    {/* Nama Periode */}
                    <td className="py-3.5 px-4">
                      <div className="flex items-center gap-2">
                        {isActive && (
                          <span className="h-2 w-2 rounded-full bg-blue-600 animate-ping" />
                        )}
                        <div>
                          <div className="font-bold text-slate-900 text-sm flex items-center gap-1.5">
                            <span>{p.namaPeriode}</span>
                            {isActive && (
                              <span className="rounded bg-blue-600 text-white text-[10px] px-2 py-0.5 font-bold uppercase">
                                Aktif
                              </span>
                            )}
                          </div>
                          <span className="text-[10px] text-slate-500 font-mono">{p.id}</span>
                        </div>
                      </div>
                    </td>

                    {/* Tahun & Bulan */}
                    <td className="py-3.5 px-3 text-slate-700">
                      Tahun {p.tahun} &bull; Bulan ke-{p.bulan}
                    </td>

                    {/* Status */}
                    <td className="py-3.5 px-3 text-center">
                      {p.isClosed ? (
                        <div className="inline-flex flex-col items-center">
                          <span className="rounded-full bg-slate-200 text-slate-700 px-2.5 py-0.5 text-[10px] font-bold flex items-center gap-1">
                            <Lock className="h-3 w-3" />
                            Tutup Buku
                          </span>
                          {p.closedAt && (
                            <span className="text-[9px] text-slate-400 mt-0.5">
                              {p.closedAt.split(' ')[0]}
                            </span>
                          )}
                        </div>
                      ) : (
                        <span className="rounded-full bg-emerald-100 text-emerald-800 px-2.5 py-0.5 text-[10px] font-bold flex items-center justify-center gap-1 w-fit mx-auto">
                          <Unlock className="h-3 w-3 text-emerald-600" />
                          Terbuka
                        </span>
                      )}
                    </td>

                    {/* Jurnal */}
                    <td className="py-3.5 px-3 text-center font-mono">
                      <span className="font-bold text-slate-900">{totalJournals}</span>
                      <span className="text-[10px] text-slate-500 block">
                        ({juCount} JU &bull; {ajpCount} AJP)
                      </span>
                    </td>

                    {/* Mutasi */}
                    <td className="py-3.5 px-4 text-right font-mono">
                      <div className="text-slate-900 font-bold">
                        Rp {totalDebet.toLocaleString('id-ID')}
                      </div>
                      <div className="text-[10px] text-slate-500">
                        Debet = Kredit
                      </div>
                    </td>

                    {/* Keseimbangan */}
                    <td className="py-3.5 px-3 text-center">
                      {totalJournals === 0 ? (
                        <span className="text-slate-400 text-[10px] italic">N/A</span>
                      ) : isBalanced ? (
                        <span className="inline-flex items-center gap-1 rounded bg-emerald-50 text-emerald-700 px-2 py-0.5 text-[10px] font-bold border border-emerald-200">
                          <Check className="h-3 w-3 text-emerald-600" />
                          Balance
                        </span>
                      ) : (
                        <span className="inline-flex items-center gap-1 rounded bg-rose-50 text-rose-700 px-2 py-0.5 text-[10px] font-bold border border-rose-200">
                          <AlertTriangle className="h-3 w-3 text-rose-600" />
                          Selisih!
                        </span>
                      )}
                    </td>

                    {/* Aksi */}
                    <td className="py-3.5 px-4 text-center">
                      <div className="flex items-center justify-center gap-1.5">
                        {!isActive && (
                          <button
                            onClick={() => onSelectPeriode(p)}
                            className="rounded bg-blue-600 hover:bg-blue-700 text-white px-2.5 py-1 text-[11px] font-bold shadow-2xs transition-colors cursor-pointer"
                            title="Aktifkan periode ini sebagai konteks kerja saat ini"
                          >
                            Pilih Aktif
                          </button>
                        )}

                        {p.isClosed ? (
                          <button
                            onClick={() => handleReopen(p)}
                            className="rounded border border-amber-300 bg-amber-50 text-amber-800 hover:bg-amber-100 px-2 py-1 text-[11px] font-semibold transition-colors cursor-pointer"
                            title="Buka kembali periode ini untuk perbaikan jurnal"
                          >
                            Buka Kembali
                          </button>
                        ) : (
                          isActive && (
                            <button
                              onClick={onOpenTutupBuku}
                              className="rounded border border-slate-300 bg-white text-slate-700 hover:bg-slate-100 px-2 py-1 text-[11px] font-semibold transition-colors cursor-pointer"
                              title="Tutup buku periode ini"
                            >
                              Tutup Buku
                            </button>
                          )
                        )}

                        {periodes.length > 1 && !isActive && totalJournals === 0 && (
                          <button
                            onClick={() => handleDelete(p)}
                            className="p-1 rounded text-slate-400 hover:text-rose-600 hover:bg-rose-50 cursor-pointer"
                            title="Hapus periode kosong"
                          >
                            <Trash2 className="h-3.5 w-3.5" />
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Modal: Tambah Periode Baru */}
      {isAddModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-4 backdrop-blur-xs">
          <div className="w-full max-w-md rounded-xl bg-white shadow-2xl overflow-hidden border border-slate-200">
            <div className="flex items-center justify-between border-b border-slate-200 bg-blue-900 px-5 py-4 text-white">
              <div className="flex items-center gap-2">
                <Calendar className="h-5 w-5 text-blue-300" />
                <h3 className="text-sm font-bold">Tambah Periode Akuntansi Baru</h3>
              </div>
              <button
                onClick={() => setIsAddModalOpen(false)}
                className="text-slate-400 hover:text-white"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            <form onSubmit={handleCreatePeriod} className="p-5 space-y-4 text-xs">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Tahun Anggaran *</label>
                  <input
                    type="number"
                    min="2020"
                    max="2035"
                    required
                    value={newYear}
                    onChange={(e) => {
                      const y = parseInt(e.target.value, 10);
                      setNewYear(y);
                      setNewPeriodName(`${INDO_MONTHS[newMonth - 1]} ${y}`);
                    }}
                    className="w-full rounded border border-slate-300 px-3 py-2 font-mono font-medium focus:border-blue-500 focus:outline-hidden"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Bulan Pembukuan *</label>
                  <select
                    value={newMonth}
                    onChange={(e) => {
                      const m = parseInt(e.target.value, 10);
                      setNewMonth(m);
                      setNewPeriodName(`${INDO_MONTHS[m - 1]} ${newYear}`);
                    }}
                    className="w-full rounded border border-slate-300 bg-white px-3 py-2 font-medium focus:border-blue-500 focus:outline-hidden"
                  >
                    {INDO_MONTHS.map((name, idx) => (
                      <option key={idx} value={idx + 1}>
                        Bulan {idx + 1} - {name}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">
                  Nama Resmi Periode (Ditampilkan di Laporan) *
                </label>
                <input
                  type="text"
                  required
                  placeholder={suggestedName}
                  value={newPeriodName}
                  onChange={(e) => setNewPeriodName(e.target.value)}
                  className="w-full rounded border border-slate-300 px-3 py-2 font-bold text-slate-900 focus:border-blue-500 focus:outline-hidden"
                />
              </div>

              <div className="rounded-lg border border-blue-200 bg-blue-50/60 p-3 text-[11px] text-blue-900 space-y-1">
                <span className="font-bold block">Keterangan Siklus Pembukuan:</span>
                <p>
                  Periode baru yang dibuat akan langsung tersedia di menu dropdown navbar atas dan dapat
                  menerima transaksi jurnal umum, penyesuaian (AJP), serta kartu rekanan virtual ledger.
                </p>
              </div>

              <div className="flex justify-end gap-2 pt-3 border-t border-slate-200">
                <button
                  type="button"
                  onClick={() => setIsAddModalOpen(false)}
                  className="rounded-lg px-4 py-2 font-semibold text-slate-600 hover:bg-slate-100"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className="rounded-lg bg-blue-600 hover:bg-blue-700 px-4 py-2 font-bold text-white shadow-xs cursor-pointer"
                >
                  Simpan Periode Baru
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};