import React from 'react';
import {
  BookOpen,
  CheckCircle,
  HelpCircle,
  Layers,
  FileText,
  Scale,
  RefreshCw,
  Printer,
  Database,
  Lock,
  CreditCard,
  Globe,
  Calendar,
} from 'lucide-react';

export const PanduanPemakaianView: React.FC = () => {
  return (
    <div className="space-y-6 max-w-5xl mx-auto">
      {/* Top Banner */}
      <div className="rounded-lg border border-blue-200 bg-linear-to-r from-blue-900 to-slate-900 p-6 text-white shadow-md">
        <div className="flex items-center gap-3">
          <BookOpen className="h-8 w-8 text-blue-400" />
          <div>
            <h2 className="text-lg font-bold uppercase tracking-wider">
              Buku Panduan & Petunjuk Operasional Akuntansi
            </h2>
            <p className="text-xs text-blue-200">
              Standar Operasional Prosedur (SOP) Pembukuan Keuangan Terpadu PT Tio Mandiri Jaya
            </p>
          </div>
        </div>
      </div>

      {/* Alur Akuntansi Visual Steps */}
      <div className="rounded-lg border border-slate-200 bg-white p-6 shadow-xs space-y-6">
        <h3 className="text-sm font-bold uppercase tracking-wider text-slate-800 border-b border-slate-200 pb-2">
          Alur Siklus Akuntansi (Accounting Cycle Workflow)
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div className="rounded-lg border border-blue-200 bg-blue-50/50 p-4 space-y-2">
            <div className="flex items-center justify-between">
              <span className="h-6 w-6 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
                1
              </span>
              <span className="text-[10px] font-bold uppercase tracking-wider text-blue-700">Setup Awal</span>
            </div>
            <h4 className="font-bold text-xs text-slate-900">Daftar Akun (COA) & Saldo Awal</h4>
            <p className="text-[11px] text-slate-600">
              Input akun standar dan tentukan saldo awal manual di periode permulaan sistem.
            </p>
          </div>

          <div className="rounded-lg border border-emerald-200 bg-emerald-50/50 p-4 space-y-2">
            <div className="flex items-center justify-between">
              <span className="h-6 w-6 rounded-full bg-emerald-600 text-white flex items-center justify-center font-bold text-xs">
                2
              </span>
              <span className="text-[10px] font-bold uppercase tracking-wider text-emerald-700">Harian & Bulanan</span>
            </div>
            <h4 className="font-bold text-xs text-slate-900">Jurnal Umum & Penyesuaian (AJP)</h4>
            <p className="text-[11px] text-slate-600">
              Catat transaksi masuk/keluar. Nama Akun otomatis mengisi Kode Akun dengan validasi keseimbangan.
            </p>
          </div>

          <div className="rounded-lg border border-purple-200 bg-purple-50/50 p-4 space-y-2">
            <div className="flex items-center justify-between">
              <span className="h-6 w-6 rounded-full bg-purple-600 text-white flex items-center justify-center font-bold text-xs">
                3
              </span>
              <span className="text-[10px] font-bold uppercase tracking-wider text-purple-700">Pemeriksaan</span>
            </div>
            <h4 className="font-bold text-xs text-slate-900">Neraca Saldo & Neraca Lajur</h4>
            <p className="text-[11px] text-slate-600">
              Review 10-kolom worksheet untuk memastikan posisi keuangan telah seimbang sebelum pelaporan.
            </p>
          </div>

          <div className="rounded-lg border border-amber-200 bg-amber-50/50 p-4 space-y-2">
            <div className="flex items-center justify-between">
              <span className="h-6 w-6 rounded-full bg-amber-600 text-white flex items-center justify-center font-bold text-xs">
                4
              </span>
              <span className="text-[10px] font-bold uppercase tracking-wider text-amber-700">Akhir Periode</span>
            </div>
            <h4 className="font-bold text-xs text-slate-900">Laporan Resmi & Tutup Buku</h4>
            <p className="text-[11px] text-slate-600">
              Cetak Laba Rugi, Neraca Skontro, Arus Kas, lalu lakukan Tutup Buku otomatis untuk roll-over saldo!
            </p>
          </div>
        </div>
      </div>

      {/* Detailed Steps List */}
      <div className="space-y-4">
        {/* Step 1 */}
        <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-xs">
          <div className="flex items-start gap-3">
            <div className="p-2 rounded bg-blue-100 text-blue-700 mt-0.5">
              <FileText className="h-4 w-4" />
            </div>
            <div className="space-y-2 text-xs">
              <h4 className="font-bold text-sm text-slate-900">
                1. Cara Mengisi dan Mengelola Daftar Akun (Chart of Accounts)
              </h4>
              <p className="text-slate-600 leading-relaxed">
                Buka menu <strong>Daftar Akun</strong> pada sidebar AdminLTE. Anda dapat:
              </p>
              <ul className="list-disc pl-5 space-y-1 text-slate-700">
                <li>
                  Klik tombol <strong>+ Tambah Akun Baru</strong> untuk mendaftarkan akun baru. Masukkan
                  Kode Akun (misal <code>1-1008</code>), Nama Akun, Pos Saldo (Debet/Kredit), Pos Laporan (Neraca / Laba Rugi), dan Saldo Awal.
                </li>
                <li>
                  <strong>Saldo Awal Manual di Awal Periode:</strong> Pada awal mula penggunaan aplikasi,
                  Anda dapat mengisi Saldo Awal secara manual. Total saldo awal Debet dan Kredit harus
                  seimbang (muncul indikator hijau SEIMBANG).
                </li>
                <li>
                  <strong>Import & Export Excel:</strong> Anda dapat mengunduh daftar akun ke format Excel (.xls) atau mengimpor data akun massal via file CSV.
                </li>
              </ul>
            </div>
          </div>
        </div>

        {/* Step 2 */}
        <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-xs">
          <div className="flex items-start gap-3">
            <div className="p-2 rounded bg-emerald-100 text-emerald-700 mt-0.5">
              <Layers className="h-4 w-4" />
            </div>
            <div className="space-y-2 text-xs">
              <h4 className="font-bold text-sm text-slate-900">
                2. Cara Mencatat Jurnal Umum (JU) dan Ayat Jurnal Penyesuaian (AJP)
              </h4>
              <p className="text-slate-600 leading-relaxed">
                Buka menu <strong>Jurnal Umum</strong>:
              </p>
              <ul className="list-disc pl-5 space-y-1 text-slate-700">
                <li>
                  Klik <strong>+ Input Jurnal Umum (JU)</strong> untuk transaksi operasional harian atau{' '}
                  <strong>+ Input Penyesuaian (AJP)</strong> untuk transaksi penyesuaian akhir bulan (seperti amortisasi sewa dibayar dimuka atau depresiasi aset tetap).
                </li>
                <li>
                  <strong>Pemilihan Akun Otomatis:</strong> Pilih <em>Nama Akun</em> pada kotak pilihan, maka <em>Kode Akun</em> akan otomatis terisi dan terkunci secara akurat tanpa takut salah ketik.
                </li>
                <li>
                  <strong>Validasi Keseimbangan (Double-Entry):</strong> Sistem memvalidasi apakah jumlah Debet sama dengan Kredit secara real-time. Tombol simpan hanya aktif saat transaksi seimbang (Rp 0 selisih).
                </li>
              </ul>
            </div>
          </div>
        </div>

        {/* Step 3 */}
        <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-xs">
          <div className="flex items-start gap-3">
            <div className="p-2 rounded bg-purple-100 text-purple-700 mt-0.5">
              <Scale className="h-4 w-4" />
            </div>
            <div className="space-y-2 text-xs">
              <h4 className="font-bold text-sm text-slate-900">
                3. Membaca Neraca Saldo dan Neraca Lajur (10-Kolom Worksheet)
              </h4>
              <p className="text-slate-600 leading-relaxed">
                Di menu <strong>Neraca Saldo</strong>, Anda dapat melihat perbandingan 3 tahap pembukuan:
              </p>
              <ul className="list-disc pl-5 space-y-1 text-slate-700">
                <li>
                  <strong>Post Closing Trial Balance:</strong> Saldo awal yang dibawa dari periode sebelumnya.
                </li>
                <li>
                  <strong>Transaksi Mutasi:</strong> Akumulasi mutasi Debet dan Kredit dari seluruh jurnal selama periode ini.
                </li>
                <li>
                  <strong>Neraca Saldo Akhir:</strong> Saldo akhir setelah memperhitungkan mutasi.
                </li>
                <li>
                  Di menu <strong>Neraca Lajur</strong>, kertas kerja 10-kolom mengintegrasikan Neraca Saldo, AJP, Neraca Disesuaikan (NSD), Rugi Laba, dan Neraca dengan penyeimbang Laba Bersih Tahun Berjalan otomatis!
                </li>
              </ul>
            </div>
          </div>
        </div>

        {/* Step 4 */}
        <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-xs">
          <div className="flex items-start gap-3">
            <div className="p-2 rounded bg-amber-100 text-amber-700 mt-0.5">
              <RefreshCw className="h-4 w-4" />
            </div>
            <div className="space-y-2 text-xs">
              <h4 className="font-bold text-sm text-slate-900">
                4. Fitur Manual vs Otomatis & Tutup Buku (Roll-Over Periode)
              </h4>
              <p className="text-slate-600 leading-relaxed">
                Salah satu fitur unggulan sistem ini adalah otomatisasi pergantian periode akuntansi:
              </p>
              <ul className="list-disc pl-5 space-y-1 text-slate-700">
                <li>
                  <strong>Di Awal:</strong> Saldo awal dapat diinput atau diedit manual saat pertama kali inisialisasi akun.
                </li>
                <li>
                  <strong>Di Periode Berikutnya:</strong> Klik tombol <strong>Tutup Buku Periode</strong> pada navbar atas. Sistem akan:
                  <ol className="list-decimal pl-5 mt-1 space-y-1">
                    <li>Memindahkan laba bersih periode berjalan ke Laba Ditahan (Retained Earnings).</li>
                    <li>Mengosongkan saldo akun nominal (Pendapatan & Biaya) menjadi 0.</li>
                    <li>
                      <strong>Secara otomatis memindahkan saldo akhir akun riil (Neraca Saldo Akhir) menjadi Post Closing Trial Balance / Saldo Awal periode berikutnya!</strong>
                    </li>
                    <li>Mengunci periode lama dan mengaktifkan periode baru.</li>
                  </ol>
                </li>
              </ul>
            </div>
          </div>
        </div>

        {/* Step 5 */}
        <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-xs">
          <div className="flex items-start gap-3">
            <div className="p-2 rounded bg-slate-100 text-slate-700 mt-0.5">
              <Database className="h-4 w-4" />
            </div>
            <div className="space-y-2 text-xs">
              <h4 className="font-bold text-sm text-slate-900">
                5. Database MySQL, PostgreSQL & CodeIgniter 4 (CI4)
              </h4>
              <p className="text-slate-600 leading-relaxed">
                Di menu <strong>Database & CI4</strong>, Anda dapat mengekspor seluruh skema dan seed SQL:
              </p>
              <ul className="list-disc pl-5 space-y-1 text-slate-700">
                <li>
                  <strong>MySQL / MariaDB DDL:</strong> Unduh file <code>accounting_tmj_mysql_seed.sql</code> untuk langsung di-import ke phpMyAdmin atau MySQL Workbench.
                </li>
                <li>
                  <strong>PostgreSQL DDL:</strong> Unduh file <code>accounting_tmj_postgres_seed.sql</code> untuk pgAdmin atau cloud PostgreSQL.
                </li>
                <li>
                  <strong>CodeIgniter 4 Code:</strong> Telah disediakan file Migrasi, Seeder, Model (AkunModel, JurnalModel), dan Controller (Akuntansi.php) yang siap di-copy ke project CI4 Anda.
                </li>
              </ul>
            </div>
          </div>
        </div>

        {/* Step 6: SOP Transaksi Virtual Account (VA) */}
        <div className="rounded-lg border-2 border-indigo-300 bg-linear-to-b from-indigo-50/50 to-white p-6 shadow-sm">
          <div className="flex items-start gap-3.5">
            <div className="p-2.5 rounded-lg bg-indigo-600 text-white shadow-xs">
              <CreditCard className="h-5 w-5" />
            </div>
            <div className="space-y-4 text-xs flex-1">
              <div>
                <div className="inline-flex items-center gap-1.5 rounded-full bg-indigo-100 text-indigo-800 px-2.5 py-0.5 text-[10px] font-bold uppercase mb-1">
                  Fitur Unggulan SAK EMKM / PSAK
                </div>
                <h4 className="font-bold text-base text-slate-900">
                  6. Tata Cara Memasukkan Transaksi Virtual Account (VA) ke Jurnal Umum & Laporan Keuangan Lainnya
                </h4>
                <p className="text-slate-600 leading-relaxed mt-1">
                  Jika perusahaan memiliki banyak rekanan vendor, supplier, dan pelanggan, transaksi pembayaran seringkali
                  menggunakan nomor <strong>Virtual Account (VA)</strong> perbankan (BCA, Mandiri, BNI, BRI, Permata, dll.).
                  Berikut adalah panduan lengkap bagaimana transaksi tersebut dicatat dan otomatis mengalir ke seluruh laporan keuangan:
                </p>
              </div>

              {/* 2 Metode Input di Aplikasi */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="rounded-lg border border-indigo-200 bg-white p-4 space-y-2">
                  <div className="flex items-center gap-2 text-indigo-700 font-bold">
                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-indigo-600 text-white text-[10px]">A</span>
                    <span>Metode 1: Dari Menu Jurnal Umum</span>
                  </div>
                  <p className="text-[11px] text-slate-600 leading-relaxed">
                    1. Buka menu <strong>2. Jurnal Umum & Penyesuaian</strong>.<br />
                    2. Klik tombol warna ungu: <strong className="text-indigo-700">+ Transaksi Virtual Account (VA)</strong>.<br />
                    3. Pilih Rekanan (Vendor/Customer) & nomor VA yang dituju.<br />
                    4. Pilih skenario (Pelunasan Utang, Penerimaan Piutang, Pembelian Kredit, atau Pendapatan).<br />
                    5. Masukkan nominal & tanggal. Sistem otomatis menyusun 2 baris jurnal seimbang dan
                    memperbarui kartu buku pembantu (Virtual Ledger) sekaligus.
                  </p>
                </div>

                <div className="rounded-lg border border-indigo-200 bg-white p-4 space-y-2">
                  <div className="flex items-center gap-2 text-indigo-700 font-bold">
                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-indigo-600 text-white text-[10px]">B</span>
                    <span>Metode 2: Dari Menu Virtual Ledger Rekanan</span>
                  </div>
                  <p className="text-[11px] text-slate-600 leading-relaxed">
                    1. Buka menu <strong>Rekanan & Virtual Ledger</strong>.<br />
                    2. Pada tab <em>Buku Pembantu (VL)</em>, klik <strong>+ Input Transaksi VL</strong>.<br />
                    3. Centang opsi: <em>"Otomatis posting ke Jurnal Umum & Laporan Keuangan"</em>.<br />
                    4. Untuk transaksi lama yang belum terposting, cukup klik tombol <strong>+ Posting JU</strong>
                    pada baris tabel yang bersangkutan.
                  </p>
                </div>
              </div>

              {/* 4 Skema Jurnal Standar */}
              <div className="rounded-lg border border-slate-200 bg-slate-50 p-4 space-y-3">
                <h5 className="font-bold text-xs text-slate-900 uppercase tracking-wide">
                  Standar Pencatatan Akuntansi (Debet & Kredit):
                </h5>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-[11px] font-mono">
                  <div className="rounded bg-white p-3 border border-slate-200">
                    <span className="font-bold font-sans text-indigo-900 block mb-1">
                      1. Bayar Pelunasan Utang ke VA Vendor:
                    </span>
                    <span className="text-emerald-700 font-bold">(D) 2-1010 Utang Usaha</span><br />
                    <span className="text-amber-700 font-bold">(K) 1-1020 Bank Operasional</span><br />
                    <span className="font-sans text-[10px] text-slate-500">
                      Efek: Utang di Neraca turun, Kas Bank di Neraca & Arus Kas turun.
                    </span>
                  </div>

                  <div className="rounded bg-white p-3 border border-slate-200">
                    <span className="font-bold font-sans text-indigo-900 block mb-1">
                      2. Terima Pelunasan Piutang via VA Customer:
                    </span>
                    <span className="text-emerald-700 font-bold">(D) 1-1020 Bank Operasional</span><br />
                    <span className="text-amber-700 font-bold">(K) 1-1030 Piutang Usaha</span><br />
                    <span className="font-sans text-[10px] text-slate-500">
                      Efek: Kas Bank di Neraca & Arus Kas naik, Piutang di Neraca turun.
                    </span>
                  </div>

                  <div className="rounded bg-white p-3 border border-slate-200">
                    <span className="font-bold font-sans text-indigo-900 block mb-1">
                      3. Pembelian Bahan/Tempo dgn Tagihan VA:
                    </span>
                    <span className="text-emerald-700 font-bold">(D) 1-1040 Persediaan / Beban</span><br />
                    <span className="text-amber-700 font-bold">(K) 2-1010 Utang Usaha</span><br />
                    <span className="font-sans text-[10px] text-slate-500">
                      Efek: Aset Persediaan bertambah, Utang di Neraca bertambah.
                    </span>
                  </div>

                  <div className="rounded bg-white p-3 border border-slate-200">
                    <span className="font-bold font-sans text-indigo-900 block mb-1">
                      4. Pendapatan Jasa Langsung via VA:
                    </span>
                    <span className="text-emerald-700 font-bold">(D) 1-1020 Bank Operasional</span><br />
                    <span className="text-amber-700 font-bold">(K) 4-1000 Pendapatan Usaha</span><br />
                    <span className="font-sans text-[10px] text-slate-500">
                      Efek: Laba Bersih di Laba Rugi naik, Kas Bank & Ekuitas di Neraca naik.
                    </span>
                  </div>
                </div>
              </div>

              {/* Alur ke Seluruh Laporan */}
              <div className="rounded-lg border border-emerald-200 bg-emerald-50/60 p-4">
                <h5 className="font-bold text-xs text-emerald-950 uppercase tracking-wide mb-2">
                  Bagaimana Transaksi Tampil di Seluruh Laporan Keuangan Lainnya?
                </h5>
                <ul className="list-disc pl-5 space-y-1.5 text-[11px] text-emerald-900">
                  <li>
                    <strong>Buku Besar (General Ledger):</strong> Akun Bank (1-1020) dan Utang Usaha (2-1010) mencatat
                    mutasi penambahan/pengurangan dengan saldo akhir terkini.
                  </li>
                  <li>
                    <strong>Neraca Saldo (Trial Balance):</strong> Nilai mutasi debet & kredit bergerak seimbang tanpa
                    menimbulkan selisih (balanced).
                  </li>
                  <li>
                    <strong>Laporan Posisi Keuangan (Neraca):</strong> Menampilkan pengurangan kewajiban Utang Usaha
                    di sisi Pasiva dan pengurangan saldo Kas Bank di sisi Aktiva.
                  </li>
                  <li>
                    <strong>Laporan Arus Kas:</strong> Otomatis mengidentifikasi mutasi Bank Operasional dan menyajikannya
                    pada bagian <em>Arus Kas dari Aktivitas Operasi</em>.
                  </li>
                  <li>
                    <strong>Laporan Laba Rugi:</strong> Jika transaksi terkait pengakuan beban atau pendapatan, nilai GOP
                    dan Laba Bersih langsung terhitung ulang.
                  </li>
                  <li>
                    <strong>Kartu Virtual Ledger Rekanan:</strong> Riwayat pembayaran tertera rapi dengan status LUNAS
                    dan nomor referensi bank untuk kemudahan audit.
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* Step 7: Profil PT & Website Resmi */}
        <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-xs">
          <div className="flex items-start gap-3">
            <div className="p-2 rounded bg-blue-100 text-blue-700 mt-0.5">
              <Globe className="h-4 w-4" />
            </div>
            <div className="space-y-2 text-xs">
              <h4 className="font-bold text-sm text-slate-900">
                7. Profil Perusahaan & Portal Website Resmi (PT Tio Mandiri Jaya)
              </h4>
              <p className="text-slate-600 leading-relaxed">
                Di <strong>Profil PT</strong>, alamat website resmi perusahaan (<code>https://tiomandirijaya.co.id</code>)
                telah terintegrasi penuh di seluruh komponen aplikasi:
              </p>
              <ul className="list-disc pl-5 space-y-1 text-slate-700">
                <li>
                  <strong>Top Navigation Bar:</strong> Terdapat tombol pintas <em>Web PT</em> yang dapat diklik langsung untuk mengunjungi portal web perusahaan.
                </li>
                <li>
                  <strong>Kop Surat Dokumen Cetak (PrintHeader):</strong> Setiap kali Anda mencetak Laporan Keuangan, Neraca Saldo, Buku Besar, atau Faktur ke format PDF/Printer, alamat website tercantum resmi di kop surat perusahaan.
                </li>
                <li>
                  <strong>Dashboard Eksekutif:</strong> Tautan website aktif tersedia pada welcome banner utama di sebelah nama perusahaan dan badan hukum PT.
                </li>
                <li>
                  <strong>Modal Profil Perusahaan:</strong> Anda dapat mengedit URL portal web, nomor telepon, NPWP, NIB, serta logo perusahaan (melalui kamera, file lokal, atau tautan cloud).
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};