import React, { useState } from 'react';
import { Proposal } from '../types';
import { formatRupiah } from '../data/storage';
import {
  X,
  Printer,
  FileText,
  Award,
  CheckCircle2,
  Building,
  GraduationCap,
  Download
} from 'lucide-react';

interface DocumentExportModalProps {
  proposal?: Proposal;
  allProposals: Proposal[];
  initialDocType?: 'lembar_pengesahan' | 'berita_acara' | 'kontrak_spk';
  onClose: () => void;
}

export const DocumentExportModal: React.FC<DocumentExportModalProps> = ({
  proposal,
  allProposals,
  initialDocType = 'lembar_pengesahan',
  onClose,
}) => {
  const [docType, setDocType] = useState<'lembar_pengesahan' | 'berita_acara' | 'kontrak_spk'>(
    initialDocType
  );

  // Selected proposal or first available
  const currentProp = proposal || allProposals[0];

  const handlePrint = () => {
    window.print();
  };

  const handleDownloadJSON = () => {
    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(allProposals, null, 2));
    const downloadAnchor = document.createElement('a');
    downloadAnchor.setAttribute("href", dataStr);
    downloadAnchor.setAttribute("download", `Data_LPPM_SIMLPPM_${new Date().toISOString().split('T')[0]}.json`);
    document.body.appendChild(downloadAnchor);
    downloadAnchor.click();
    downloadAnchor.remove();
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-3 sm:p-4">
      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 w-full max-w-4xl max-h-[92vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200">
        {/* Header */}
        <div className="px-6 py-4 bg-slate-900 text-white flex items-center justify-between print:hidden">
          <div className="flex items-center gap-2">
            <GraduationCap className="w-5 h-5 text-blue-400" />
            <div>
              <h2 className="text-base font-bold text-white">Generator Dokumen Resmi LPPM</h2>
              <p className="text-xs text-slate-300">Format Standar Akreditasi & Tata Kelola LPPM</p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={handlePrint}
              className="bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold px-3.5 py-1.5 rounded-lg flex items-center gap-1.5 transition-colors cursor-pointer"
            >
              <Printer className="w-3.5 h-3.5" /> Cetak / Simpan PDF
            </button>
            <button
              onClick={handleDownloadJSON}
              className="bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold px-3 py-1.5 rounded-lg flex items-center gap-1.5 transition-colors cursor-pointer"
              title="Unduh Cadangan Seluruh Data Usulan"
            >
              <Download className="w-3.5 h-3.5" /> Ekspor JSON
            </button>
            <button
              onClick={onClose}
              className="p-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white transition-colors cursor-pointer"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Doc type selector tabs */}
        <div className="bg-slate-50 border-b border-slate-200 px-6 py-2 flex items-center gap-2 text-xs print:hidden">
          <button
            onClick={() => setDocType('lembar_pengesahan')}
            className={`px-3 py-1.5 rounded-lg font-medium cursor-pointer transition-colors ${
              docType === 'lembar_pengesahan'
                ? 'bg-blue-600 text-white font-bold'
                : 'text-slate-600 hover:bg-slate-200'
            }`}
          >
            1. Lembar Pengesahan Usulan
          </button>
          <button
            onClick={() => setDocType('kontrak_spk')}
            className={`px-3 py-1.5 rounded-lg font-medium cursor-pointer transition-colors ${
              docType === 'kontrak_spk'
                ? 'bg-blue-600 text-white font-bold'
                : 'text-slate-600 hover:bg-slate-200'
            }`}
          >
            2. Kontrak Penugasan (SPK Hibah)
          </button>
          <button
            onClick={() => setDocType('berita_acara')}
            className={`px-3 py-1.5 rounded-lg font-medium cursor-pointer transition-colors ${
              docType === 'berita_acara'
                ? 'bg-blue-600 text-white font-bold'
                : 'text-slate-600 hover:bg-slate-200'
            }`}
          >
            3. Berita Acara Seleksi Pleno LPPM
          </button>
        </div>

        {/* Document Printable Area */}
        <div className="p-8 overflow-y-auto flex-1 bg-white text-slate-900 font-serif leading-relaxed text-xs">
          {/* Institutional Header (KOP SURAT) */}
          <div className="text-center border-b-2 border-slate-900 pb-4 mb-6">
            <div className="uppercase font-bold text-xs tracking-wider text-slate-600">
              Kementerian Pendidikan Tinggi, Sains, dan Teknologi
            </div>
            <div className="uppercase font-extrabold text-base tracking-wide text-slate-900 mt-0.5">
              LEMBAGA PENELITIAN DAN PENGABDIAN KEPADA MASYARAKAT (LPPM)
            </div>
            <div className="uppercase font-bold text-sm text-slate-800">
              UNIVERSITAS KAMPUS NUSANTARA
            </div>
            <div className="text-[10px] text-slate-600 font-sans mt-1">
              Gedung Rektorat Lt. 3, Kampus Terpadu • Telp: (022) 7123456 • Email: lppm@univ.ac.id • Web: lppm.univ.ac.id
            </div>
          </div>

          {/* DOKUMEN 1: LEMBAR PENGESAHAN */}
          {docType === 'lembar_pengesahan' && currentProp && (
            <div className="space-y-4">
              <div className="text-center mb-5">
                <h3 className="font-extrabold text-sm uppercase underline decoration-1">
                  LEMBAR PENGESAHAN PROPOSAL {currentProp.type === 'penelitian' ? 'PENELITIAN' : 'PENGABDIAN KEPADA MASYARAKAT'}
                </h3>
                <div className="text-[11px] font-mono text-slate-600 mt-0.5">Nomor Registrasi: {currentProp.code}</div>
              </div>

              <table className="w-full text-left text-xs border-collapse">
                <tbody>
                  <tr className="border-b border-slate-200">
                    <td className="py-2 font-bold w-48 align-top">1. Judul Kegiatan</td>
                    <td className="py-2 text-justify font-bold text-slate-900">{currentProp.title}</td>
                  </tr>
                  <tr className="border-b border-slate-200">
                    <td className="py-2 font-bold align-top">2. Bidang Fokus & Skema</td>
                    <td className="py-2">
                      {currentProp.focusArea} ({currentProp.scheme})
                    </td>
                  </tr>
                  <tr className="border-b border-slate-200">
                    <td className="py-2 font-bold align-top">3. Tingkat Kesiapterapan (TKT)</td>
                    <td className="py-2">
                      TKT Saat Ini: Level {currentProp.tktCurrent} → Target Akhir: Level {currentProp.tktTarget}
                    </td>
                  </tr>
                  <tr className="border-b border-slate-200">
                    <td className="py-2 font-bold align-top">4. Ketua Tim Pengusul</td>
                    <td className="py-2">
                      <div className="font-bold">{currentProp.leader.name}</div>
                      <div>NIDN: {currentProp.leader.nidn}</div>
                      <div>Jabatan Fungsional: Lektor Kepala / Dosen Tetap</div>
                      <div>Fakultas / Program Studi: {currentProp.leader.department}, {currentProp.leader.faculty}</div>
                      <div>Email & SINTA ID: {currentProp.leader.email} | ID {currentProp.leader.sintaId || '-'}</div>
                    </td>
                  </tr>
                  <tr className="border-b border-slate-200">
                    <td className="py-2 font-bold align-top">5. Anggota Tim Dosen</td>
                    <td className="py-2">
                      <ul className="list-disc pl-4 space-y-1">
                        {currentProp.members
                          .filter((m) => m.roleInTeam === 'anggota_dosen')
                          .map((m, i) => (
                            <li key={i}>
                              {m.name} (NIDN: {m.nidn}) - {m.department}
                            </li>
                          ))}
                      </ul>
                    </td>
                  </tr>
                  <tr className="border-b border-slate-200">
                    <td className="py-2 font-bold align-top">6. Mahasiswa Terlibat (MBKM)</td>
                    <td className="py-2">
                      <ul className="list-disc pl-4 space-y-1">
                        {currentProp.members
                          .filter((m) => m.roleInTeam === 'anggota_mahasiswa')
                          .map((m, i) => (
                            <li key={i}>{m.name}</li>
                          ))}
                      </ul>
                    </td>
                  </tr>
                  {currentProp.partner && (
                    <tr className="border-b border-slate-200">
                      <td className="py-2 font-bold align-top">7. Mitra Sasaran Pengmas</td>
                      <td className="py-2">
                        <div className="font-bold">{currentProp.partner.name} ({currentProp.partner.sector})</div>
                        <div>Alamat: {currentProp.partner.address}</div>
                        <div>Narahubung: {currentProp.partner.contactPerson} ({currentProp.partner.phone})</div>
                      </td>
                    </tr>
                  )}
                  <tr className="border-b border-slate-200">
                    <td className="py-2 font-bold align-top">8. Biaya yang Diusulkan</td>
                    <td className="py-2 font-bold text-slate-900">
                      {formatRupiah(currentProp.requestedBudget)} (Pagu Disetujui: {formatRupiah(currentProp.approvedBudget || currentProp.requestedBudget)})
                    </td>
                  </tr>
                </tbody>
              </table>

              {/* Signatures */}
              <div className="grid grid-cols-2 gap-8 pt-8 text-center font-sans text-xs">
                <div>
                  <div className="text-slate-600">Mengetahui,</div>
                  <div className="font-bold text-slate-800">Dekan {currentProp.leader.faculty}</div>
                  <div className="h-16 flex items-center justify-center text-slate-300 italic text-[11px]">
                    [Tanda Tangan & Stempel Digital]
                  </div>
                  <div className="font-bold underline text-slate-900">Prof. Dr. Ir. H. Achmad Sanusi, M.Sc.</div>
                  <div className="text-slate-600">NIP. 197108151998031002</div>
                </div>

                <div>
                  <div className="text-slate-600">Kota Bandung, {new Date().toLocaleDateString('id-ID', { dateStyle: 'long' })}</div>
                  <div className="font-bold text-slate-800">Ketua Peneliti / Pelaksana</div>
                  <div className="h-16 flex items-center justify-center text-slate-300 italic text-[11px]">
                    [Tanda Tangan Basah / Digital]
                  </div>
                  <div className="font-bold underline text-slate-900">{currentProp.leader.name}</div>
                  <div className="text-slate-600">NIDN. {currentProp.leader.nidn}</div>
                </div>
              </div>

              <div className="pt-6 text-center font-sans text-xs border-t border-slate-200 mt-6">
                <div className="text-slate-600">Menyetujui,</div>
                <div className="font-bold text-slate-900">Ketua LPPM Universitas Kampus Nusantara</div>
                <div className="h-14 flex items-center justify-center text-slate-300 italic text-[11px]">
                  [Meterai & Tanda Tangan Resmi LPPM]
                </div>
                <div className="font-bold underline text-slate-900">Prof. Dr. apt. Hj. Sri Wahyuni, M.Si.</div>
                <div className="text-slate-600">NIP. 196803241993032001</div>
              </div>
            </div>
          )}

          {/* DOKUMEN 2: KONTRAK SPK */}
          {docType === 'kontrak_spk' && currentProp && (
            <div className="space-y-4 font-serif">
              <div className="text-center mb-5">
                <h3 className="font-extrabold text-sm uppercase underline decoration-1">
                  SURAT PERJANJIAN PENUGASAN PENELITIAN / PENGABDIAN (SPK)
                </h3>
                <div className="text-xs font-mono text-slate-600">
                  Nomor: {currentProp.contractNumber || 'SPK-LPPM/HIB/2025/088'}
                </div>
              </div>

              <p className="text-justify leading-relaxed">
                Pada hari ini, tanggal {new Date().toLocaleDateString('id-ID', { dateStyle: 'long' })}, kami yang bertanda tangan di bawah ini:
              </p>

              <div className="pl-4 space-y-2">
                <div>
                  <span className="font-bold">1. Prof. Dr. apt. Hj. Sri Wahyuni, M.Si.</span>, selaku Ketua LPPM Universitas Kampus Nusantara, yang bertindak untuk dan atas nama Perguruan Tinggi, selanjutnya disebut <b>PIHAK PERTAMA</b>.
                </div>
                <div>
                  <span className="font-bold">2. {currentProp.leader.name}</span>, NIDN: {currentProp.leader.nidn}, Dosen Tetap {currentProp.leader.faculty}, selanjutnya disebut <b>PIHAK KEDUA</b>.
                </div>
              </div>

              <p className="text-justify leading-relaxed mt-3">
                Kedua belah pihak bersepakat mengadakan Perjanjian Penugasan Pelaksanaan Hibah Riset Internal dengan ketentuan sebagai berikut:
              </p>

              <div className="space-y-3 pl-2">
                <div>
                  <div className="font-bold text-center">Pasal 1: Ruang Lingkup dan Judul</div>
                  <p className="text-justify leading-relaxed">
                    PIHAK PERTAMA menugaskan PIHAK KEDUA untuk melaksanakan kegiatan berjudul: "<b>{currentProp.title}</b>" dengan skema {currentProp.scheme} Tahun Anggaran {currentProp.academicYear}.
                  </p>
                </div>

                <div>
                  <div className="font-bold text-center">Pasal 2: Nilai Pendanaan dan Termin Pembayaran</div>
                  <p className="text-justify leading-relaxed">
                    Besaran dana bantuan penelitian/pengabdian yang disetujui sebesar <b>{formatRupiah(currentProp.approvedBudget || currentProp.requestedBudget)}</b>. Pencairan dilakukan dalam 2 (dua) termin:
                    Tahap I sebesar 70% setelah penandatanganan SPK, dan Tahap II sebesar 30% setelah visitasi Monev dan unggah laporan akhir serta bukti luaran.
                  </p>
                </div>

                <div>
                  <div className="font-bold text-center">Pasal 3: Kewajiban Luaran Wajib</div>
                  <p className="text-justify leading-relaxed">
                    PIHAK KEDUA berkewajiban mempublikasikan minimal 1 (satu) artikel pada Jurnal Ilmiah Terakreditasi Nasional / Bereputasi Internasional dan/atau perolehan sertifikat Hak Cipta / Paten HKI.
                  </p>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-8 pt-8 text-center font-sans text-xs">
                <div>
                  <div className="font-bold">PIHAK PERTAMA</div>
                  <div className="text-slate-600">Ketua LPPM Universitas</div>
                  <div className="h-16 flex items-center justify-center text-slate-300 italic">
                    [Tanda Tangan & Cap]
                  </div>
                  <div className="font-bold underline">Prof. Dr. apt. Hj. Sri Wahyuni, M.Si.</div>
                </div>

                <div>
                  <div className="font-bold">PIHAK KEDUA</div>
                  <div className="text-slate-600">Ketua Pelaksana Hibah</div>
                  <div className="h-16 flex items-center justify-center text-slate-300 italic">
                    [Materai Rp 10.000 & Tanda Tangan]
                  </div>
                  <div className="font-bold underline">{currentProp.leader.name}</div>
                </div>
              </div>
            </div>
          )}

          {/* DOKUMEN 3: BERITA ACARA SELEKSI PLENO */}
          {docType === 'berita_acara' && (
            <div className="space-y-4">
              <div className="text-center mb-5">
                <h3 className="font-extrabold text-sm uppercase underline decoration-1">
                  BERITA ACARA RAPAT PLENO PENETAPAN PEMENANG HIBAH PENELITIAN & PENGABDIAN
                </h3>
                <div className="text-xs font-mono text-slate-600">
                  Nomor: BA-LPPM/PLENO/2025/019 • Periode TA 2024/2025 Genap & 2025/2026 Ganjil
                </div>
              </div>

              <p className="text-justify leading-relaxed">
                Pada hari ini, Tim Reviewer LPPM bersama pimpinan Lembaga Penelitian dan Pengabdian kepada Masyarakat telah melaksanakan sidang pleno desk evaluation dan evaluasi substansi terhadap total <b>{allProposals.length} judul usulan</b> yang terdaftar.
              </p>

              <div className="border border-slate-300 rounded-md overflow-hidden font-sans text-[11px] my-4">
                <table className="w-full text-left">
                  <thead className="bg-slate-100 text-slate-800 font-bold border-b border-slate-300">
                    <tr>
                      <th className="py-2 px-2.5">No</th>
                      <th className="py-2 px-2.5">Kode Usulan</th>
                      <th className="py-2 px-2.5">Judul Kegiatan & Ketua</th>
                      <th className="py-2 px-2.5 text-center">Skor Rata-rata</th>
                      <th className="py-2 px-2.5 text-right">Pagu Disetujui</th>
                      <th className="py-2 px-2.5 text-center">Keputusan Pleno</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-200">
                    {allProposals.map((p, idx) => {
                      const score = p.reviews[0]?.totalScore || '-';
                      const isLolos = ['APPROVED', 'PROGRESS_REPORTED', 'FINAL_REPORTED', 'COMPLETED'].includes(p.status);
                      return (
                        <tr key={p.id}>
                          <td className="py-2 px-2.5 text-center">{idx + 1}</td>
                          <td className="py-2 px-2.5 font-mono">{p.code}</td>
                          <td className="py-2 px-2.5">
                            <div className="font-semibold line-clamp-1">{p.title}</div>
                            <div className="text-[10px] text-slate-500">{p.leader.name} ({p.leader.department})</div>
                          </td>
                          <td className="py-2 px-2.5 text-center font-bold">{score}</td>
                          <td className="py-2 px-2.5 text-right font-mono font-bold">
                            {formatRupiah(p.approvedBudget || p.requestedBudget)}
                          </td>
                          <td className="py-2 px-2.5 text-center">
                            <span className={`px-2 py-0.5 rounded font-bold text-[10px] ${
                              isLolos ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-700'
                            }`}>
                              {isLolos ? 'DIDANAI' : p.status}
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>

              <div className="grid grid-cols-2 gap-8 pt-6 text-center font-sans text-xs">
                <div>
                  <div className="font-bold">Koordinator Tim Reviewer LPPM</div>
                  <div className="h-16 flex items-center justify-center text-slate-300 italic">
                    [Tanda Tangan Koordinator]
                  </div>
                  <div className="font-bold underline">Prof. Dr. Ir. Budi Santoso, M.T.</div>
                </div>

                <div>
                  <div className="font-bold">Sekretaris LPPM</div>
                  <div className="h-16 flex items-center justify-center text-slate-300 italic">
                    [Tanda Tangan Sekretaris]
                  </div>
                  <div className="font-bold underline">Dr. Ratna Juwita, M.Sc.</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};