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

interface KelolaPeriodeModalProps {
  isOpen: boolean;
  onClose: () => void;
  periodes: PeriodeAkuntansi[];
  activePeriode: PeriodeAkuntansi;
  journals: Jurnal[];
  akuns: Akun[];
  profile: ProfilPerusahaan;
  onSelectPeriode: (p: PeriodeAkuntansi) => void;
  onOpenTutupBuku: () => void;
  onRefreshData: () => void;
}

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

export const KelolaPeriodeModal: React.FC<KelolaPeriodeModalProps> = ({
  isOpen,
  onClose,
  periodes,
  activePeriode,
  journals,
  akuns,
  profile,
  onSelectPeriode,
  onOpenTutupBuku,
  onRefreshData,
}) => {
  const [isAddingPeriode, setIsAddingPeriode] = useState(false);
  const [newMonth, setNewMonth] = useState<number>(new Date().getMonth() + 1);
  const [newYear, setNewYear] = useState<number>(new Date().getFullYear());
  const [syncFeedback, setSyncFeedback] = useState<{
    msg: string;
    type: 'success' | 'info';
  } | null>(null);

  if (!isOpen) return null;

  // Calculate statistics for each period
  const periodStats = periodes.map((p) => {
    const periodJournals = AccountingEngine.filterJurnal(journals, p.namaPeriode);
    const totalDebet = periodJournals.reduce((s, j) => s + (j.totalDebet || 0), 0);
    const totalKredit = periodJournals.reduce((s, j) => s + (j.totalKredit || 0), 0);
    const isBalanced = Math.abs(totalDebet - totalKredit) < 0.01;
    const juCount = periodJournals.filter((j) => j.tipe === 'JU').length;
    const ajpCount = periodJournals.filter((j) => j.tipe === 'AJP').length;

    return {
      period: p,
      journalsCount: periodJournals.length,
      juCount,
      ajpCount,
      totalDebet,
      totalKredit,
      isBalanced,
      isActive: p.id === activePeriode.id || p.namaPeriode === activePeriode.namaPeriode,
    };
  });

  // Handler: Run sync of all journals & periods
  const handleRunSync = () => {
    const res = StorageService.syncAllJournalsToPeriods();
    onRefreshData();
    setSyncFeedback({
      msg: `Sinkronisasi Selesai: ${res.updatedJournalsCount} transaksi disinkronkan dengan tanggal kalendernya. ${
        res.newPeriodsAdded.length > 0
          ? `${res.newPeriodsAdded.length} periode baru berhasil dibuat otomatis (${res.newPeriodsAdded.join(', ')}).`
          : 'Semua transaksi sudah sinkron dengan periode akuntansinya.'
      }`,
      type: 'success',
    });
  };

  // Handler: Add new period
  const handleAddNewPeriod = (e: React.FormEvent) => {
    e.preventDefault();
    const monthName = INDO_MONTHS[newMonth - 1];
    const periodName = `${monthName} ${newYear}`;
    const pid = `per-${newYear}-${String(newMonth).padStart(2, '0')}`;

    if (periodes.some((p) => p.id === pid || p.namaPeriode.toLowerCase() === periodName.toLowerCase())) {
      alert(`Periode ${periodName} sudah ada dalam daftar.`);
      return;
    }

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

    StorageService.addPeriode(newPeriodObj);
    onRefreshData();
    setIsAddingPeriode(false);
    setSyncFeedback({
      msg: `Periode baru "${periodName}" berhasil ditambahkan ke dalam sistem!`,
      type: 'success',
    });
  };

  // Handler: Reopen period
  const handleReopen = (periodId: string, namaPeriode: string) => {
    if (
      !confirm(
        `Buka kembali periode "${namaPeriode}"? Periode ini akan dapat menerima transaksi baru kembali.`
      )
    )
      return;

    StorageService.reopenPeriode(periodId);
    onRefreshData();
    setSyncFeedback({
      msg: `Periode "${namaPeriode}" berhasil dibuka kembali (Reopened).`,
      type: 'info',
    });
  };

  // Handler: Delete empty period
  const handleDeletePeriod = (periodId: string, namaPeriode: string) => {
    if (periodId === activePeriode.id) {
      alert('Tidak dapat menghapus periode yang sedang aktif!');
      return;
    }

    const linkedJournals = AccountingEngine.filterJurnal(journals, namaPeriode);
    if (linkedJournals.length > 0) {
      alert(
        `Periode "${namaPeriode}" memiliki ${linkedJournals.length} transaksi jurnal. Periode tidak boleh dihapus demi integritas pembukuan.`
      );
      return;
    }

    if (!confirm(`Hapus periode kosong "${namaPeriode}"?`)) return;

    const ok = StorageService.deletePeriode(periodId);
    if (ok) {
      onRefreshData();
      setSyncFeedback({
        msg: `Periode "${namaPeriode}" berhasil dihapus.`,
        type: 'info',
      });
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-3 sm:p-4 backdrop-blur-xs overflow-y-auto">
      <div className="flex max-h-[92vh] w-full max-w-4xl flex-col rounded-xl bg-white shadow-2xl overflow-hidden border border-slate-200 my-auto">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-blue-700 bg-linear-to-r from-slate-900 via-blue-950 to-slate-900 px-6 py-4 text-white">
          <div className="flex items-center gap-3">
            <div className="rounded-lg bg-blue-600/40 border border-blue-400/30 p-2">
              <Calendar className="h-5 w-5 text-blue-300" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h3 className="text-base font-bold text-white tracking-wide">
                  Kelola Periode Akuntansi & Sinkronisasi Laporan
                </h3>
                <span className="rounded-full bg-blue-500/30 border border-blue-400/40 px-2.5 py-0.5 text-[10px] font-semibold text-blue-200">
                  Sinkron Otomatis
                </span>
              </div>
              <p className="text-xs text-blue-200/80">
                Pilih periode aktif, periksa keseimbangan per periode, sinkronkan transaksi tanggal, dan buka/tutup buku
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="rounded-lg p-1 text-slate-400 hover:bg-slate-800 hover:text-white transition-colors cursor-pointer"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Action Bar */}
        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 bg-slate-50 px-6 py-3">
          <div className="flex items-center gap-2">
            <span className="text-xs text-slate-500">Periode Aktif Saat Ini:</span>
            <span className="inline-flex items-center gap-1.5 rounded-full bg-blue-100 px-3 py-1 text-xs font-bold text-blue-900 border border-blue-200">
              <span className="h-2 w-2 rounded-full bg-blue-600 animate-pulse"></span>
              {activePeriode.namaPeriode}
              {activePeriode.isClosed ? ' (Tutup Buku)' : ' (Berjalan)'}
            </span>
          </div>

          <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-1.5 text-xs font-semibold text-indigo-700 hover:bg-indigo-100 transition-colors shadow-2xs cursor-pointer"
              title="Periksa dan sinkronkan semua tanggal transaksi dengan periode bulanan"
            >
              <RefreshCw className="h-3.5 w-3.5 text-indigo-600" />
              <span>Sinkronkan Transaksi & Periode</span>
            </button>

            <button
              onClick={() => setIsAddingPeriode(!isAddingPeriode)}
              className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700 transition-colors shadow-2xs cursor-pointer"
            >
              <Plus className="h-3.5 w-3.5" />
              <span>Tambah Periode Baru</span>
            </button>

            <button
              onClick={() => {
                onClose();
                onOpenTutupBuku();
              }}
              className="inline-flex items-center gap-1.5 rounded-lg bg-amber-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-amber-700 transition-colors shadow-2xs cursor-pointer"
              title="Tutup buku periode berjalan dan salurkan saldo laba ke modal"
            >
              <Lock className="h-3.5 w-3.5" />
              <span>Tutup Buku Periode</span>
            </button>
          </div>
        </div>

        {/* Sync Feedback Message */}
        {syncFeedback && (
          <div className="mx-6 mt-4 flex items-start justify-between gap-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3 text-xs text-emerald-900">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="h-4 w-4 text-emerald-600 shrink-0" />
              <span>{syncFeedback.msg}</span>
            </div>
            <button
              onClick={() => setSyncFeedback(null)}
              className="text-emerald-700 hover:text-emerald-900 font-bold"
            >
              &times;
            </button>
          </div>
        )}

        {/* Add Period Form Card */}
        {isAddingPeriode && (
          <form
            onSubmit={handleAddNewPeriod}
            className="mx-6 mt-4 rounded-lg border border-blue-300 bg-blue-50/60 p-4 space-y-3"
          >
            <div className="flex items-center justify-between">
              <h4 className="text-xs font-bold text-blue-950 flex items-center gap-1.5">
                <Plus className="h-4 w-4 text-blue-700" />
                Tambah Periode Akuntansi Baru
              </h4>
              <button
                type="button"
                onClick={() => setIsAddingPeriode(false)}
                className="text-xs text-slate-500 hover:text-slate-800"
              >
                Batal
              </button>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
              <div>
                <label className="block text-[11px] font-semibold text-slate-700 mb-1">
                  Bulan
                </label>
                <select
                  value={newMonth}
                  onChange={(e) => setNewMonth(Number(e.target.value))}
                  className="w-full rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-800 focus:border-blue-500 focus:outline-hidden"
                >
                  {INDO_MONTHS.map((m, idx) => (
                    <option key={m} value={idx + 1}>
                      {m}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-[11px] font-semibold text-slate-700 mb-1">
                  Tahun
                </label>
                <input
                  type="number"
                  min="2020"
                  max="2035"
                  value={newYear}
                  onChange={(e) => setNewYear(Number(e.target.value))}
                  className="w-full rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-xs font-medium text-slate-800 focus:border-blue-500 focus:outline-hidden"
                />
              </div>

              <div className="flex items-end">
                <button
                  type="submit"
                  className="w-full inline-flex items-center justify-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-blue-700 transition-colors shadow-xs cursor-pointer"
                >
                  <Check className="h-3.5 w-3.5" />
                  Simpan Periode: {INDO_MONTHS[newMonth - 1]} {newYear}
                </button>
              </div>
            </div>
          </form>
        )}

        {/* Main Periods Table */}
        <div className="flex-1 overflow-y-auto p-6 space-y-4">
          <div className="rounded-lg border border-slate-200 overflow-hidden shadow-xs">
            <table className="w-full text-left text-xs border-collapse">
              <thead className="bg-slate-100 text-slate-700 font-semibold uppercase text-[10px] tracking-wider border-b border-slate-200">
                <tr>
                  <th className="py-2.5 px-4">Nama Periode</th>
                  <th className="py-2.5 px-3">Status</th>
                  <th className="py-2.5 px-3 text-center">Jumlah Transaksi</th>
                  <th className="py-2.5 px-3 text-right">Mutasi Debet</th>
                  <th className="py-2.5 px-3 text-right">Mutasi Kredit</th>
                  <th className="py-2.5 px-3 text-center">Keseimbangan</th>
                  <th className="py-2.5 px-4 text-center">Aksi & Pilihan</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200">
                {periodStats.map(
                  ({
                    period,
                    journalsCount,
                    juCount,
                    ajpCount,
                    totalDebet,
                    totalKredit,
                    isBalanced,
                    isActive,
                  }) => (
                    <tr
                      key={period.id}
                      className={`hover:bg-slate-50 transition-colors ${
                        isActive ? 'bg-blue-50/70 font-medium' : ''
                      }`}
                    >
                      {/* Periode Name */}
                      <td className="py-3 px-4">
                        <div className="flex items-center gap-2">
                          <Calendar className={`h-4 w-4 ${isActive ? 'text-blue-600' : 'text-slate-400'}`} />
                          <div>
                            <span className="font-bold text-slate-900 text-xs">
                              {period.namaPeriode}
                            </span>
                            <span className="block text-[10px] text-slate-500 font-mono">
                              ID: {period.id} ({period.bulan}/{period.tahun})
                            </span>
                          </div>
                        </div>
                      </td>

                      {/* Status */}
                      <td className="py-3 px-3">
                        {isActive ? (
                          <span className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-bold text-blue-800 border border-blue-300">
                            <span className="h-1.5 w-1.5 rounded-full bg-blue-600"></span>
                            Aktif Sekarang
                          </span>
                        ) : period.isClosed ? (
                          <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold text-amber-800 border border-amber-300">
                            <Lock className="h-2.5 w-2.5" />
                            Ditutup
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-700 border border-slate-300">
                            <Unlock className="h-2.5 w-2.5 text-slate-500" />
                            Terbuka
                          </span>
                        )}
                      </td>

                      {/* Transaksi Count */}
                      <td className="py-3 px-3 text-center">
                        <span className="font-bold text-slate-800">{journalsCount}</span>
                        <span className="block text-[10px] text-slate-500">
                          {juCount} JU | {ajpCount} AJP
                        </span>
                      </td>

                      {/* Debet */}
                      <td className="py-3 px-3 text-right font-mono text-slate-800">
                        Rp {totalDebet.toLocaleString('id-ID')}
                      </td>

                      {/* Kredit */}
                      <td className="py-3 px-3 text-right font-mono text-slate-800">
                        Rp {totalKredit.toLocaleString('id-ID')}
                      </td>

                      {/* Keseimbangan */}
                      <td className="py-3 px-3 text-center">
                        {journalsCount === 0 ? (
                          <span className="text-[11px] text-slate-400">-</span>
                        ) : isBalanced ? (
                          <span className="inline-flex items-center gap-1 rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-bold text-emerald-800">
                            <CheckCircle2 className="h-3 w-3" />
                            Seimbang
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1 rounded bg-red-100 px-1.5 py-0.5 text-[10px] font-bold text-red-800">
                            <AlertTriangle className="h-3 w-3" />
                            Selisih
                          </span>
                        )}
                      </td>

                      {/* Actions */}
                      <td className="py-3 px-4 text-center">
                        <div className="flex items-center justify-center gap-1.5">
                          {!isActive ? (
                            <button
                              onClick={() => {
                                onSelectPeriode(period);
                                setSyncFeedback({
                                  msg: `Periode aktif berhasil dialihkan ke: ${period.namaPeriode}. Semua laporan keuangan telah disinkronkan.`,
                                  type: 'success',
                                });
                              }}
                              className="inline-flex items-center gap-1 rounded bg-blue-600 px-2.5 py-1 text-[11px] font-semibold text-white hover:bg-blue-700 transition-colors cursor-pointer"
                              title="Jadikan periode aktif untuk pembukuan dan laporan keuangan"
                            >
                              <span>Pilih Aktif</span>
                              <ArrowRight className="h-3 w-3" />
                            </button>
                          ) : (
                            <span className="text-[11px] font-bold text-blue-700 bg-blue-100/70 rounded px-2 py-0.5 border border-blue-200">
                              Sedang Digunakan
                            </span>
                          )}

                          {period.isClosed ? (
                            <button
                              onClick={() => handleReopen(period.id, period.namaPeriode)}
                              className="rounded border border-amber-300 bg-amber-50 px-2 py-1 text-[11px] font-semibold text-amber-800 hover:bg-amber-100 cursor-pointer"
                              title="Buka kembali periode yang ditutup untuk revisi"
                            >
                              Buka
                            </button>
                          ) : null}

                          {journalsCount === 0 && !isActive && (
                            <button
                              onClick={() => handleDeletePeriod(period.id, period.namaPeriode)}
                              className="rounded p-1 text-slate-400 hover:bg-red-50 hover:text-red-600 transition-colors cursor-pointer"
                              title="Hapus periode kosong"
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </button>
                          )}
                        </div>
                      </td>
                    </tr>
                  )
                )}
              </tbody>
            </table>
          </div>

          {/* Sync & Accounting SOP Info Card */}
          <div className="rounded-lg border border-blue-200 bg-blue-50/60 p-4 text-xs text-blue-950 space-y-2">
            <div className="flex items-center gap-2 font-bold text-blue-900">
              <Sparkles className="h-4 w-4 text-blue-600" />
              <span>Mekanisme Sinkronisasi Otomatis Periode & Transaksi:</span>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-slate-700 text-[11px] mt-1">
              <div className="rounded bg-white p-3 border border-blue-100 space-y-1">
                <span className="font-bold text-blue-900 block">
                  1. Sinkronisasi Tanggal Transaksi:
                </span>
                <p>
                  Setiap transaksi (Jurnal Umum, AJP, transaksi Virtual Account, dan buku pembantu) yang diinput dengan tanggal tertentu otomatis dikelompokkan ke bulan & tahun yang sesuai. Jika periodenya belum terdaftar, sistem akan mendaftarkannya secara otomatis.
                </p>
              </div>
              <div className="rounded bg-white p-3 border border-blue-100 space-y-1">
                <span className="font-bold text-blue-900 block">
                  2. Kesinambungan Laporan Keuangan:
                </span>
                <p>
                  Mengubah periode aktif di sini atau di navigasi atas secara instan memperbarui data Neraca Saldo, Neraca Lajur (Worksheet), Laba Rugi, Balance Sheet Stafel, Neraca Skontro, Arus Kas, dan Analisis Rasio secara simultan tanpa reload halaman.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between border-t border-slate-200 bg-slate-50 px-6 py-3">
          <div className="text-[11px] text-slate-500">
            Perusahaan: <strong>{profile.namaPerusahaan}</strong> | Total Periode:{' '}
            <strong>{periodes.length}</strong>
          </div>
          <button
            onClick={onClose}
            className="rounded-lg bg-slate-200 px-4 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-300 transition-colors cursor-pointer"
          >
            Tutup
          </button>
        </div>
      </div>
    </div>
  );
};