import React, { useState, useEffect } from 'react';
import { Proposal, LPPMAnnouncement, UserRole, ReviewAssessment, ProgressReport, FinalReport, OutputItem } from './types';
import { loadProposals, saveProposals, loadAnnouncements, resetToSampleData } from './data/storage';
import { Navbar } from './components/Navbar';
import { DashboardView } from './components/DashboardView';
import { ProposalListView } from './components/ProposalListView';
import { ProposalDetailModal } from './components/ProposalDetailModal';
import { ProposalFormModal } from './components/ProposalFormModal';
import { ReviewModal } from './components/ReviewModal';
import { ReportModal } from './components/ReportModal';
import { MonevLuaranView } from './components/MonevLuaranView';
import { DocumentExportModal } from './components/DocumentExportModal';
import {
  GraduationCap,
  Award,
  CheckCircle2,
  FileText,
  ShieldCheck,
  BookOpen,
  Calendar,
  ExternalLink,
  Users,
  Check
} from 'lucide-react';

export default function App() {
  const [proposals, setProposals] = useState<Proposal[]>([]);
  const [announcements, setAnnouncements] = useState<LPPMAnnouncement[]>([]);
  const [currentTab, setCurrentTab] = useState<'dashboard' | 'penelitian' | 'pengabdian' | 'review' | 'monev' | 'documents'>('dashboard');
  const [userRole, setUserRole] = useState<UserRole>('admin_lppm');

  // Modals state
  const [selectedProposal, setSelectedProposal] = useState<Proposal | null>(null);
  const [isNewProposalModalOpen, setIsNewProposalModalOpen] = useState(false);
  const [reviewModalProposal, setReviewModalProposal] = useState<Proposal | null>(null);
  const [reportModalProposal, setReportModalProposal] = useState<Proposal | null>(null);
  const [documentExportModal, setDocumentExportModal] = useState<{
    isOpen: boolean;
    proposal?: Proposal;
    docType: 'lembar_pengesahan' | 'berita_acara' | 'kontrak_spk';
  }>({
    isOpen: false,
    docType: 'lembar_pengesahan',
  });

  // Notification toast
  const [toastMessage, setToastMessage] = useState<string | null>(null);

  const showToast = (msg: string) => {
    setToastMessage(msg);
    setTimeout(() => {
      setToastMessage(null);
    }, 4000);
  };

  // Load initial dataset
  useEffect(() => {
    const loadedProposals = loadProposals();
    const loadedAnnouncements = loadAnnouncements();
    setProposals(loadedProposals);
    setAnnouncements(loadedAnnouncements);
  }, []);

  // Update proposals and sync with localStorage
  const updateProposalsState = (updated: Proposal[]) => {
    setProposals(updated);
    saveProposals(updated);
    // If selected proposal is active, sync it as well
    if (selectedProposal) {
      const synced = updated.find((p) => p.id === selectedProposal.id);
      if (synced) setSelectedProposal(synced);
    }
  };

  // 1. Create New Proposal
  const handleCreateProposal = (newProp: Proposal) => {
    const updated = [newProp, ...proposals];
    updateProposalsState(updated);
    setIsNewProposalModalOpen(false);
    showToast(`Usulan "${newProp.title.slice(0, 40)}..." berhasil diajukan dengan kode ${newProp.code}!`);
    if (newProp.type === 'penelitian') {
      setCurrentTab('penelitian');
    } else {
      setCurrentTab('pengabdian');
    }
  };

  // 2. Update Status (Admin approval, rejection, etc.)
  const handleUpdateStatus = (proposalId: string, newStatus: Proposal['status'], approvedBudget?: number) => {
    const updated = proposals.map((p) => {
      if (p.id === proposalId) {
        return {
          ...p,
          status: newStatus,
          approvedBudget: approvedBudget !== undefined ? approvedBudget : p.approvedBudget,
          contractNumber:
            newStatus === 'APPROVED' && !p.contractNumber
              ? `SPK-LPPM/${p.type === 'penelitian' ? 'LIT' : 'ABM'}/2025/${Math.floor(10 + Math.random() * 90)}`
              : p.contractNumber,
        };
      }
      return p;
    });
    updateProposalsState(updated);
    showToast(`Status usulan berhasil diperbarui menjadi: ${newStatus}`);
  };

  // 3. Assign Reviewer
  const handleAssignReviewer = (proposalId: string, reviewer: { id: string; name: string; nidn: string }) => {
    const updated = proposals.map((p) => {
      if (p.id === proposalId) {
        const already = p.assignedReviewers.some((r) => r.id === reviewer.id);
        const assigned = already ? p.assignedReviewers : [...p.assignedReviewers, reviewer];
        return {
          ...p,
          assignedReviewers: assigned,
          status: p.status === 'SUBMITTED' ? ('IN_REVIEW' as Proposal['status']) : p.status,
        };
      }
      return p;
    });
    updateProposalsState(updated);
    showToast(`Reviewer ${reviewer.name} berhasil ditugaskan!`);
  };

  // 4. Submit Review Assessment
  const handleSubmitReview = (proposalId: string, review: ReviewAssessment) => {
    const updated = proposals.map((p) => {
      if (p.id === proposalId) {
        return {
          ...p,
          reviews: [review, ...p.reviews],
          status: 'IN_REVIEW' as Proposal['status'],
        };
      }
      return p;
    });
    updateProposalsState(updated);
    setReviewModalProposal(null);
    showToast(`Penilaian reviewer untuk usulan berhasil disimpan (Skor: ${review.totalScore})!`);
  };

  // 5. Save Progress Report
  const handleSaveProgressReport = (proposalId: string, report: ProgressReport) => {
    const updated = proposals.map((p) => {
      if (p.id === proposalId) {
        return {
          ...p,
          progressReport: report,
          status: 'PROGRESS_REPORTED' as Proposal['status'],
        };
      }
      return p;
    });
    updateProposalsState(updated);
    showToast('Laporan kemajuan 70% dan capaian serapan dana berhasil dicatat!');
  };

  // 6. Save Final Report
  const handleSaveFinalReport = (proposalId: string, report: FinalReport) => {
    const updated = proposals.map((p) => {
      if (p.id === proposalId) {
        return {
          ...p,
          finalReport: report,
          status: 'FINAL_REPORTED' as Proposal['status'],
        };
      }
      return p;
    });
    updateProposalsState(updated);
    showToast('Laporan akhir 100% tuntas dan berkas berhasil disimpan di LPPM!');
  };

  // 7. Add Output item
  const handleAddOutput = (proposalId: string, output: OutputItem) => {
    const updated = proposals.map((p) => {
      if (p.id === proposalId) {
        return {
          ...p,
          actualOutputs: [output, ...p.actualOutputs],
        };
      }
      return p;
    });
    updateProposalsState(updated);
    showToast(`Luaran "${output.title.slice(0, 35)}..." berhasil didokumentasikan di LPPM!`);
  };

  // 8. Verify Output
  const handleVerifyOutput = (proposalId: string, outputId: string) => {
    const updated = proposals.map((p) => {
      if (p.id === proposalId) {
        const outs = p.actualOutputs.map((o) =>
          o.id === outputId ? { ...o, verifiedByLppm: true, verifiedAt: new Date().toISOString().split('T')[0] } : o
        );
        return { ...p, actualOutputs: outs };
      }
      return p;
    });
    updateProposalsState(updated);
    showToast('Luaran berhasil diverifikasi dan disahkan oleh LPPM!');
  };

  // 9. Reset sample data
  const handleResetData = () => {
    if (confirm('Kembalikan database usulan ke data standar awal LPPM? Data simulasi baru yang belum tersimpan akan dikembalikan.')) {
      const fresh = resetToSampleData();
      setProposals(fresh);
      showToast('Database usulan LPPM berhasil di-reset ke data bawaan.');
    }
  };

  // In-review proposals count
  const inReviewCount = proposals.filter((p) => p.status === 'IN_REVIEW' || p.status === 'SUBMITTED').length;

  return (
    <div className="min-h-screen bg-slate-100 text-slate-900 flex flex-col font-sans antialiased selection:bg-blue-600 selection:text-white">
      {/* Toast Notification */}
      {toastMessage && (
        <div className="fixed bottom-5 right-5 z-50 bg-slate-900 text-white text-xs px-4 py-3 rounded-xl shadow-xl border border-slate-700 flex items-center gap-2.5 animate-in slide-in-from-bottom-5 duration-200">
          <span className="w-5 h-5 rounded-full bg-emerald-500 text-white flex items-center justify-center shrink-0">
            <Check className="w-3.5 h-3.5" />
          </span>
          <span className="font-medium">{toastMessage}</span>
        </div>
      )}

      {/* Main App Navigation Bar */}
      <Navbar
        currentTab={currentTab}
        onSelectTab={setCurrentTab}
        userRole={userRole}
        onChangeRole={setUserRole}
        onOpenNewProposal={() => setIsNewProposalModalOpen(true)}
        onResetData={handleResetData}
        totalProposalsCount={proposals.length}
        inReviewCount={inReviewCount}
      />

      {/* Main Container */}
      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {/* VIEW 1: DASHBOARD */}
        {currentTab === 'dashboard' && (
          <DashboardView
            proposals={proposals}
            announcements={announcements}
            userRole={userRole}
            onSelectProposal={setSelectedProposal}
            onOpenNewProposal={() => setIsNewProposalModalOpen(true)}
            onGoToTab={(tab) => setCurrentTab(tab as any)}
          />
        )}

        {/* VIEW 2: PENELITIAN */}
        {currentTab === 'penelitian' && (
          <ProposalListView
            programType="penelitian"
            proposals={proposals}
            userRole={userRole}
            onSelectProposal={setSelectedProposal}
            onOpenNewProposal={() => setIsNewProposalModalOpen(true)}
            onOpenReviewModal={(p) => setReviewModalProposal(p)}
            onOpenReportModal={(p) => setReportModalProposal(p)}
            onUpdateStatus={handleUpdateStatus}
          />
        )}

        {/* VIEW 3: PENGABDIAN KEPADA MASYARAKAT (PKM) */}
        {currentTab === 'pengabdian' && (
          <ProposalListView
            programType="pengabdian"
            proposals={proposals}
            userRole={userRole}
            onSelectProposal={setSelectedProposal}
            onOpenNewProposal={() => setIsNewProposalModalOpen(true)}
            onOpenReviewModal={(p) => setReviewModalProposal(p)}
            onOpenReportModal={(p) => setReportModalProposal(p)}
            onUpdateStatus={handleUpdateStatus}
          />
        )}

        {/* VIEW 4: PENILAIAN REVIEWER */}
        {currentTab === 'review' && (
          <div className="space-y-6">
            <div className="bg-white rounded-xl p-6 border border-slate-200 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <span className="w-8 h-8 rounded-lg bg-amber-500 text-slate-950 flex items-center justify-center font-bold">
                    <Award className="w-5 h-5" />
                  </span>
                  <h1 className="text-xl font-bold text-slate-900">
                    Desk Evaluation & Penilaian Reviewer LPPM
                  </h1>
                </div>
                <p className="text-xs text-slate-500 max-w-2xl">
                  Daftar usulan yang memerlukan evaluasi substansi, rubrik penilaian skor 1-100, rasionalitas anggaran RAB, serta rekomendasi kelayakan pendanaan.
                </p>
              </div>

              <div className="bg-amber-50 text-amber-900 border border-amber-200 px-3.5 py-2 rounded-xl text-xs font-semibold flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-amber-600" />
                <span>{inReviewCount} Usulan Memerlukan Evaluasi</span>
              </div>
            </div>

            <ProposalListView
              programType="penelitian"
              proposals={proposals.filter((p) => p.status === 'IN_REVIEW' || p.status === 'SUBMITTED')}
              userRole={userRole}
              onSelectProposal={setSelectedProposal}
              onOpenNewProposal={() => setIsNewProposalModalOpen(true)}
              onOpenReviewModal={(p) => setReviewModalProposal(p)}
              onOpenReportModal={(p) => setReportModalProposal(p)}
              onUpdateStatus={handleUpdateStatus}
            />
          </div>
        )}

        {/* VIEW 5: MONEV & LUARAN */}
        {currentTab === 'monev' && (
          <MonevLuaranView
            proposals={proposals}
            userRole={userRole}
            onSelectProposal={setSelectedProposal}
            onOpenReportModal={(p) => setReportModalProposal(p)}
            onVerifyOutput={handleVerifyOutput}
          />
        )}

        {/* VIEW 6: DOKUMEN RESMI & CETAK */}
        {currentTab === 'documents' && (
          <div className="space-y-6">
            <div className="bg-white rounded-xl p-6 border border-slate-200 shadow-xs flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  <span className="w-8 h-8 rounded-lg bg-slate-900 text-white flex items-center justify-center font-bold">
                    <FileText className="w-5 h-5" />
                  </span>
                  <h1 className="text-xl font-bold text-slate-900">
                    Pusat Arsip Dokumen & Generator Berkas Resmi LPPM
                  </h1>
                </div>
                <p className="text-xs text-slate-500 max-w-2xl">
                  Cetak Lembar Pengesahan ber-stempel, Surat Perjanjian Kontrak Penugasan (SPK) pendanaan, dan Berita Acara Pleno Hasil Seleksi LPPM.
                </p>
              </div>

              <button
                onClick={() =>
                  setDocumentExportModal({
                    isOpen: true,
                    proposal: proposals[0],
                    docType: 'berita_acara',
                  })
                }
                className="bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold px-4 py-2.5 rounded-lg flex items-center gap-2 cursor-pointer shadow-xs"
              >
                <FileText className="w-4 h-4" /> Buka Generator Dokumen
              </button>
            </div>

            {/* Document Templates grid */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4">
                <div>
                  <span className="text-[10px] font-bold uppercase tracking-wider bg-blue-50 text-blue-800 px-2 py-0.5 rounded">
                    Format Standar LPPM
                  </span>
                  <h3 className="font-bold text-slate-900 text-sm mt-2">Lembar Pengesahan Usulan</h3>
                  <p className="text-slate-600 text-xs mt-1 leading-relaxed">
                    Dokumen legalitas pengesahan proposal yang ditandatangani oleh Ketua Pengusul, Dekan Fakultas, dan Ketua LPPM.
                  </p>
                </div>
                <button
                  onClick={() =>
                    setDocumentExportModal({
                      isOpen: true,
                      proposal: proposals[0],
                      docType: 'lembar_pengesahan',
                    })
                  }
                  className="w-full bg-slate-50 hover:bg-blue-50 text-blue-700 font-semibold py-2 px-3 rounded-lg border border-slate-200 hover:border-blue-300 text-xs transition-colors cursor-pointer"
                >
                  Generate Lembar Pengesahan →
                </button>
              </div>

              <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4">
                <div>
                  <span className="text-[10px] font-bold uppercase tracking-wider bg-emerald-50 text-emerald-800 px-2 py-0.5 rounded">
                    Kontrak Pendanaan
                  </span>
                  <h3 className="font-bold text-slate-900 text-sm mt-2">Surat Perjanjian Kontrak (SPK)</h3>
                  <p className="text-slate-600 text-xs mt-1 leading-relaxed">
                    Surat perjanjian ikatan hukum penugasan hibah riset internal antara pimpinan LPPM dan dosen penerima pendanaan.
                  </p>
                </div>
                <button
                  onClick={() =>
                    setDocumentExportModal({
                      isOpen: true,
                      proposal: proposals[0],
                      docType: 'kontrak_spk',
                    })
                  }
                  className="w-full bg-slate-50 hover:bg-emerald-50 text-emerald-700 font-semibold py-2 px-3 rounded-lg border border-slate-200 hover:border-emerald-300 text-xs transition-colors cursor-pointer"
                >
                  Generate Kontrak SPK →
                </button>
              </div>

              <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4">
                <div>
                  <span className="text-[10px] font-bold uppercase tracking-wider bg-purple-50 text-purple-800 px-2 py-0.5 rounded">
                    Hasil Seleksi Pleno
                  </span>
                  <h3 className="font-bold text-slate-900 text-sm mt-2">Berita Acara Rapat Pleno Seleksi</h3>
                  <p className="text-slate-600 text-xs mt-1 leading-relaxed">
                    Dokumen rekapitulasi penilaian reviewer untuk penetapan pemenang hibah riset dan pengabdian seluruh universitas.
                  </p>
                </div>
                <button
                  onClick={() =>
                    setDocumentExportModal({
                      isOpen: true,
                      docType: 'berita_acara',
                    })
                  }
                  className="w-full bg-slate-50 hover:bg-purple-50 text-purple-700 font-semibold py-2 px-3 rounded-lg border border-slate-200 hover:border-purple-300 text-xs transition-colors cursor-pointer"
                >
                  Generate Berita Acara Pleno →
                </button>
              </div>
            </div>
          </div>
        )}
      </main>

      {/* Footer */}
      <footer className="bg-white border-t border-slate-200 py-6 mt-12 text-xs text-slate-500">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 rounded-md bg-blue-600 flex items-center justify-center text-white text-[11px] font-bold">
              LPPM
            </div>
            <span className="font-semibold text-slate-700">
              SIM-LPPM: Sistem Informasi Manajemen Penelitian & Pengabdian kepada Masyarakat
            </span>
          </div>

          <div className="flex items-center gap-4 text-[11px] text-slate-500">
            <span>Standar DRTPM / BIMA Dikti</span>
            <span>•</span>
            <span>SINTA 3.0 Integrated</span>
            <span>•</span>
            <span>Penilaian Berbasis TKT 1-9</span>
          </div>
        </div>
      </footer>

      {/* 1. Detail Modal */}
      {selectedProposal && (
        <ProposalDetailModal
          proposal={selectedProposal}
          userRole={userRole}
          onClose={() => setSelectedProposal(null)}
          onOpenReviewModal={(p) => setReviewModalProposal(p)}
          onOpenReportModal={(p) => setReportModalProposal(p)}
          onUpdateStatus={handleUpdateStatus}
          onAssignReviewer={handleAssignReviewer}
          onPrintOfficialDoc={(p, docType) =>
            setDocumentExportModal({ isOpen: true, proposal: p, docType })
          }
        />
      )}

      {/* 2. New Proposal Form Wizard */}
      {isNewProposalModalOpen && (
        <ProposalFormModal
          initialType={currentTab === 'pengabdian' ? 'pengabdian' : 'penelitian'}
          onClose={() => setIsNewProposalModalOpen(false)}
          onSubmit={handleCreateProposal}
        />
      )}

      {/* 3. Reviewer Evaluation Sheet Modal */}
      {reviewModalProposal && (
        <ReviewModal
          proposal={reviewModalProposal}
          onClose={() => setReviewModalProposal(null)}
          onSubmitReview={handleSubmitReview}
        />
      )}

      {/* 4. Report Monev & Luaran Modal */}
      {reportModalProposal && (
        <ReportModal
          proposal={reportModalProposal}
          onClose={() => setReportModalProposal(null)}
          onSaveProgressReport={handleSaveProgressReport}
          onSaveFinalReport={handleSaveFinalReport}
          onAddOutput={handleAddOutput}
        />
      )}

      {/* 5. Document Print & Export Modal */}
      {documentExportModal.isOpen && (
        <DocumentExportModal
          proposal={documentExportModal.proposal}
          allProposals={proposals}
          initialDocType={documentExportModal.docType}
          onClose={() => setDocumentExportModal({ ...documentExportModal, isOpen: false })}
        />
      )}
    </div>
  );
}