/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState } from 'react';
import { 
  FileText, Plus, Search, Filter, Trash2, Edit3, Copy, Download, Upload, RefreshCw, 
  Layers, BookOpen, FileCheck2, Settings, QrCode, ShieldCheck, Clock4, FileDown
} from 'lucide-react';
import { HRTemplate, HRDocument, HREmployee, HRSigner, ReferenceDatabase } from '../types';
import { exportDataAsJson, downloadDocumentAsPdf } from '../utils/documentUtils';
import DashboardSettingsTab from './DashboardSettingsTab';
import DashboardTemplatesTab from './DashboardTemplatesTab';

interface DashboardProps {
  documents: HRDocument[];
  templates: HRTemplate[];
  employees: HREmployee[];
  signers: HRSigner[];
  databases: ReferenceDatabase[];
  onSaveEmployees: (newEmps: HREmployee[]) => void;
  onSaveSigners: (newSigs: HRSigner[]) => void;
  onSaveDatabases: (newDbs: ReferenceDatabase[]) => void;
  onUseTemplate: (template: HRTemplate) => void;
  onEditDocument: (doc: HRDocument) => void;
  onCloneDocument: (doc: HRDocument) => void;
  onDeleteDocument: (id: string, title: string) => void;
  onEditTemplate: (template: HRTemplate) => void;
  onCreateTemplate: () => void;
  onCloneTemplate: (template: HRTemplate) => void;
  onDeleteTemplate: (id: string, title: string) => void;
  onBackupImport: (importedData: { documents: any[]; templates: any[] }) => void;
  onResetDefaults: () => void;
  onSignatureWorkflow: (doc: HRDocument) => void;
}

type TabType = 'documents' | 'templates' | 'settings';

export default function Dashboard({
  documents,
  templates,
  employees,
  signers,
  databases,
  onSaveEmployees,
  onSaveSigners,
  onSaveDatabases,
  onUseTemplate,
  onEditDocument,
  onCloneDocument,
  onDeleteDocument,
  onEditTemplate,
  onCreateTemplate,
  onCloneTemplate,
  onDeleteTemplate,
  onBackupImport,
  onResetDefaults,
  onSignatureWorkflow
}: DashboardProps) {
  const [activeTab, setActiveTab] = useState<TabType>('documents');
  const [searchQuery, setSearchQuery] = useState('');
  const [categoryFilter, setCategoryFilter] = useState<string>('All');
  const [fileImportError, setFileImportError] = useState<string | null>(null);

  // Filter lists based on search
  const filteredDocuments = documents.filter(doc => {
    const matchesSearch = doc.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          doc.category.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesSearch;
  });

  const filteredTemplates = templates.filter(tpl => {
    const matchesSearch = tpl.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          tpl.description.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = categoryFilter === 'All' || tpl.category === categoryFilter;
    return matchesSearch && matchesCategory;
  });

  // Calculate unique categories available
  const allCategories = Array.from(new Set([
    ...templates.map(t => t.category),
    ...documents.map(d => d.category)
  ])).filter(Boolean);

  // Group filtered documents by category for the dashboard list
  const groupedDocuments = filteredDocuments.reduce((acc, doc) => {
    const cat = doc.category?.trim() || 'Lainnya';
    if (!acc[cat]) {
      acc[cat] = [];
    }
    acc[cat].push(doc);
    return acc;
  }, {} as Record<string, HRDocument[]>);

  const sortedDocCategories = Object.keys(groupedDocuments).sort((a, b) => {
    if (a === 'Lainnya') return 1;
    if (b === 'Lainnya') return -1;
    return a.localeCompare(b);
  });

  // Get documents filtered for the right pane category display
  const rightPaneDocs = filteredDocuments.filter(doc => {
    return categoryFilter === 'All' || doc.category === categoryFilter;
  });

  // Trigger file-browsing for backup imports
  const handleImportFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFileImportError(null);
    const file = e.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const parsed = JSON.parse(event.target?.result as string);
        if (parsed && (Array.isArray(parsed.documents) || Array.isArray(parsed.templates))) {
          onBackupImport({
            documents: parsed.documents || [],
            templates: parsed.templates || []
          });
          alert('✓ Data Berhasil Diimpor!');
        } else {
          setFileImportError('Berkas json tidak valid (format data tidak sesuai).');
        }
      } catch (err) {
        setFileImportError('Gagal membaca berkas. Pastikan berkas berformat JSON.');
      }
    };
    reader.readAsText(file);
  };

  const handleExportBackup = () => {
    exportDataAsJson({ documents, templates });
  };

  const formatDate = (isoStr: string) => {
    try {
      const date = new Date(isoStr);
      return date.toLocaleDateString('id-ID', {
        day: 'numeric',
        month: 'short',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
    } catch {
      return isoStr;
    }
  };

  return (
    <div className="flex-1 bg-slate-50 min-h-screen overflow-y-auto px-6 py-8 select-none">
      {/* APP HEADER - LIGHTWEIGHT & PROFESSIONAL */}
      <div className="flex flex-col md:flex-row md:items-center justify-between pb-6 mb-8 border-b border-slate-200 gap-4">
        <div>
          <span className="text-blue-600 font-extrabold text-[10px] uppercase tracking-widest bg-blue-50 border border-blue-100 rounded-full px-2.5 py-1">
            Hub Kelola Surat & Referensi
          </span>
          <h1 className="text-2xl font-black text-slate-800 tracking-tight mt-1.5">
            Aplikasi Pembuat Surat SDM
          </h1>
          <p className="text-xs text-slate-500 font-semibold mt-1">
            Sistem otomatisasi draf, pembuatan templat master ketenagakerjaan, dan manajemen data referensi terpadu.
          </p>
        </div>

        {/* TOP ROW CONTROL ACTIONS */}
        <div className="flex flex-wrap items-center gap-2.5">
          <button
            id="dash-btn-create-template"
            onClick={onCreateTemplate}
            className="px-4.5 py-2.5 bg-blue-600 hover:bg-blue-500 active:bg-blue-750 text-white text-xs font-bold rounded-xl shadow-md shadow-blue-100 flex items-center space-x-2 transition-all cursor-pointer hover:scale-[1.01]"
          >
            <Plus className="w-4 h-4" />
            <span>Buat Master Templat Baru</span>
          </button>
          
          <button
            id="dash-btn-export"
            onClick={handleExportBackup}
            className="px-3.5 py-2.5 bg-white hover:bg-slate-100 text-slate-650 text-xs font-bold rounded-xl border border-slate-200 flex items-center space-x-1.5 transition-all cursor-pointer shadow-sm"
            title="Cadangkan semua data Anda ke dalam file JSON"
          >
            <Download className="w-3.5 h-3.5 text-slate-400" />
            <span>Ekspor Backup</span>
          </button>
          
          <div>
            <label 
              htmlFor="import-backup-file" 
              className="px-3.5 py-2.5 bg-white hover:bg-slate-100 text-slate-650 text-xs font-bold rounded-xl border border-slate-200 flex items-center space-x-1.5 transition-all cursor-pointer shadow-sm"
            >
              <Upload className="w-3.5 h-3.5 text-slate-400" />
              <span>Impor Backup</span>
            </label>
            <input 
              id="import-backup-file"
              type="file" 
              accept=".json"
              onChange={handleImportFileChange}
              className="hidden"
            />
          </div>
        </div>
      </div>

      {fileImportError && (
        <div className="mb-6 p-3 bg-red-50 border border-red-100 rounded-xl text-red-600 text-xs font-semibold flex items-center space-x-2">
          <span>⚠️ {fileImportError}</span>
        </div>
      )}

      {/* CORE CONTROL BAR: Search, Filter, Tabs */}
      <section className="bg-white rounded-xl border border-slate-200 p-4 mb-6 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
        {/* TABS SELECTOR */}
        <div className="flex bg-slate-100 p-1.5 rounded-lg border border-slate-200 shadow-inner self-start">
          <button
            id="tab-btn-docs"
            onClick={() => { setActiveTab('documents'); setSearchQuery(''); }}
            className={`px-4 py-1.5 rounded-md text-xs font-bold transition-all flex items-center space-x-1.5 cursor-pointer ${
              activeTab === 'documents'
                ? 'bg-white text-blue-750 shadow-sm border border-slate-100'
                : 'text-slate-500 hover:text-slate-800'
            }`}
          >
            <FileText className="w-3.5 h-3.5" />
            <span>Daftar Draf Surat ({documents.length})</span>
          </button>
          
          <button
            id="tab-btn-templates"
            onClick={() => { setActiveTab('templates'); setSearchQuery(''); }}
            className={`px-4 py-1.5 rounded-md text-xs font-bold transition-all flex items-center space-x-1.5 cursor-pointer ${
              activeTab === 'templates'
                ? 'bg-white text-blue-750 shadow-sm border border-slate-100'
                : 'text-slate-500 hover:text-slate-800'
            }`}
          >
            <BookOpen className="w-3.5 h-3.5" />
            <span>Templat Master ({templates.length})</span>
          </button>

          <button
            id="tab-btn-settings"
            onClick={() => { setActiveTab('settings'); setSearchQuery(''); }}
            className={`px-4 py-1.5 rounded-md text-xs font-bold transition-all flex items-center space-x-1.5 cursor-pointer ${
              activeTab === 'settings'
                ? 'bg-white text-blue-750 shadow-sm border border-slate-100'
                : 'text-slate-500 hover:text-slate-800'
            }`}
          >
            <Settings className="w-3.5 h-3.5" />
            <span>Data Referensi / Pengaturan</span>
          </button>
        </div>

        {/* SEARCH AND FILTERS */}
        <div className="flex flex-1 md:max-w-xl flex-col sm:flex-row gap-3">
          {/* SEARCH FIELD */}
          <div className="relative flex-1">
            <Search className="w-4 h-4 text-slate-400 absolute left-3 top-3.5 pointer-events-none" />
            <input
              id="search-input"
              type="text"
              placeholder={
                activeTab === 'documents' 
                  ? "Cari nama karyawan, judul surat, atau departemen..." 
                  : activeTab === 'templates' 
                    ? "Cari judul templat master..." 
                    : "Cari nama karyawan, NIK, jabatan, dsb..."
              }
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full border border-slate-200 rounded-lg py-2.5 pl-10 pr-4 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors bg-slate-50 hover:bg-slate-100/50 focus:bg-white"
            />
          </div>

          {/* CATEGORY FILTER */}
          {activeTab === 'templates' && (
            <div className="relative min-w-[130px] sm:min-w-[160px]">
              <Filter className="w-4 h-4 text-slate-400 absolute left-3 top-3.5 pointer-events-none" />
              <select
                id="category-filter-select"
                value={categoryFilter}
                onChange={(e) => setCategoryFilter(e.target.value)}
                className="w-full border border-slate-200 rounded-lg py-2.5 pl-9 pr-3 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors bg-slate-50 hover:bg-slate-100/50 focus:bg-white appearance-none cursor-pointer font-semibold text-slate-650"
              >
                <option value="All">Semua Kategori</option>
                {allCategories.map(cat => (
                  <option key={cat} value={cat}>{cat}</option>
                ))}
              </select>
            </div>
          )}
        </div>
      </section>

      {/* RENDER ACTIVE TAB VIEW */}
      {activeTab === 'documents' ? (
        <div>
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-sm font-bold text-slate-700">Draf Surat Terbit Terbaru</h2>
            <span className="text-xs text-slate-400 font-semibold">Berhasil disimpan di sistem browser Lokal Anda</span>
          </div>

          {filteredDocuments.length === 0 ? (
            <div className="bg-white border border-slate-200 rounded-xl p-12 text-center shadow-sm">
              <FileCheck2 className="w-12 h-12 text-slate-300 mx-auto mb-4" />
              <h3 className="text-base font-bold text-slate-700">Belum Ada Draf Surat Terbit</h3>
              <p className="text-slate-400 text-xs mt-2 max-w-md mx-auto leading-relaxed">
                Anda belum membuat draf surat apapun. Pilih tab <strong className="text-blue-600 font-bold cursor-pointer underline hover:text-blue-700" onClick={() => setActiveTab('templates')}>"Templat Master"</strong> di atas lalu klik "Gunakan" untuk mulai mengisi data surat secara praktis dan otomatis!
              </p>
            </div>
          ) : (
            <div className="flex flex-col md:flex-row gap-6">
              {/* Left Pane: Kategori Surat Sidebar */}
              <div className="w-full md:w-52 shrink-0 flex flex-col space-y-1 bg-white border border-slate-200 rounded-xl p-3.5 shadow-sm h-fit">
                <div className="text-[10px] text-slate-400 font-extrabold uppercase tracking-wider mb-2 px-2.5">
                  Kategori Surat
                </div>
                
                {/* Semua Kategori Button */}
                <button
                  type="button"
                  onClick={() => setCategoryFilter('All')}
                  className={`px-3 py-2 text-left text-xs font-bold rounded-lg transition-all flex items-center justify-between cursor-pointer border ${
                    categoryFilter === 'All'
                      ? 'bg-blue-600 border-blue-700 text-white shadow-sm font-extrabold'
                      : 'bg-white hover:bg-slate-100 text-slate-650 border-transparent hover:border-slate-200'
                  }`}
                >
                  <span>Semua Kategori</span>
                  <span className={`text-[10px] font-extrabold px-1.5 py-0.5 rounded-full ${
                    categoryFilter === 'All' ? 'bg-blue-700 text-white' : 'bg-slate-150 text-slate-700'
                  }`}>
                    {filteredDocuments.length}
                  </span>
                </button>

                {sortedDocCategories.map((cat) => (
                  <button
                    key={cat}
                    type="button"
                    onClick={() => setCategoryFilter(cat)}
                    className={`px-3 py-2 text-left text-xs font-bold rounded-lg transition-all flex items-center justify-between cursor-pointer border ${
                      categoryFilter === cat
                        ? 'bg-blue-600 border-blue-700 text-white shadow-sm font-extrabold'
                        : 'bg-white hover:bg-slate-100 text-slate-650 border-transparent hover:border-slate-200'
                    }`}
                  >
                    <span className="truncate pr-2">{cat}</span>
                    <span className={`text-[10px] font-extrabold px-1.5 py-0.5 rounded-full shrink-0 ${
                      categoryFilter === cat ? 'bg-blue-700 text-white' : 'bg-slate-150 text-slate-700'
                    }`}>
                      {groupedDocuments[cat].length}
                    </span>
                  </button>
                ))}
              </div>

              {/* Right Pane: Document Cards Grid */}
              <div className="flex-1">
                {rightPaneDocs.length === 0 ? (
                  <div className="bg-white border border-slate-200 rounded-xl p-12 text-center shadow-sm">
                    <FileCheck2 className="w-10 h-10 text-slate-350 mx-auto mb-3" />
                    <h3 className="text-sm font-bold text-slate-750">Tidak Ada Surat</h3>
                    <p className="text-slate-400 text-xs mt-1.5 max-w-sm mx-auto leading-relaxed">
                      Tidak ada draf surat terdaftar untuk kategori <strong>{categoryFilter}</strong>.
                    </p>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {rightPaneDocs.map((doc) => (
                      <div 
                        key={doc.id}
                        id={`doc-card-${doc.id}`}
                        className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm hover:shadow-md transition-all flex flex-col justify-between group"
                      >
                        <div>
                          <div className="flex items-center justify-between mb-3">
                            <span className="bg-blue-50 text-blue-700 text-[10px] font-bold px-2.5 py-1 rounded border border-blue-100 uppercase tracking-tight">
                              {doc.category || 'Surat'}
                            </span>
                            <span className="text-[10px] text-slate-400 font-medium">
                              {formatDate(doc.updatedAt)}
                            </span>
                          </div>

                          <h3 className="font-bold text-slate-900 text-sm group-hover:text-blue-600 transition-colors line-clamp-1 mb-2" title={doc.title}>
                            {doc.title}
                          </h3>
                          
                          {/* Status Badge TTD */}
                          <div className="flex items-center gap-2 mb-3">
                            {doc.isSigned ? (
                              <span className="inline-flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 text-emerald-700 text-[10px] font-extrabold px-2.5 py-1 rounded-full">
                                <ShieldCheck className="w-3 h-3" />
                                Telah Ditandatangani
                              </span>
                            ) : doc.signatureFlow && doc.signatureFlow.length > 0 ? (
                              <span className="inline-flex items-center gap-1.5 bg-amber-50 border border-amber-200 text-amber-700 text-[10px] font-extrabold px-2.5 py-1 rounded-full">
                                <Clock4 className="w-3 h-3 animate-pulse" />
                                Proses TTD ({(doc.signatureFlow.filter(s => s.status === 'approved').length)}/{doc.signatureFlow.length})
                              </span>
                            ) : null}
                          </div>
                        </div>

                        <div className="border-t border-slate-100 pt-3 mt-4 flex flex-col gap-2">
                          {/* Download PDF — prominent if signed, subtle if not */}
                          <button
                            id={`btn-pdf-doc-${doc.id}`}
                            onClick={() => downloadDocumentAsPdf(doc)}
                            className={`w-full py-2 rounded-lg text-[11px] font-bold flex items-center justify-center gap-1.5 transition-all cursor-pointer ${
                              doc.isSigned
                                ? 'bg-emerald-600 hover:bg-emerald-500 text-white shadow-sm shadow-emerald-100'
                                : 'bg-slate-100 hover:bg-slate-200 text-slate-600 border border-slate-200'
                            }`}
                            title="Unduh sebagai PDF"
                          >
                            <FileDown className="w-3.5 h-3.5" />
                            {doc.isSigned ? 'Unduh PDF Bertandatangan' : 'Unduh PDF'}
                          </button>

                          <div className="flex items-center justify-between gap-2">
                            <div className="flex space-x-1.5">
                              <button
                                id={`btn-edit-doc-${doc.id}`}
                                onClick={() => onEditDocument(doc)}
                                className="p-1.5 text-slate-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors cursor-pointer"
                                title="Edit Surat"
                              >
                                <Edit3 className="w-4 h-4" />
                              </button>
                              <button
                                id={`btn-sig-doc-${doc.id}`}
                                onClick={() => onSignatureWorkflow(doc)}
                                className="p-1.5 text-slate-600 hover:text-emerald-650 hover:bg-emerald-50 rounded-lg transition-colors cursor-pointer flex items-center space-x-1"
                                title="Tanda Tangan & Paraf"
                              >
                                <QrCode className="w-4 h-4 text-emerald-600" />
                                <span className="text-[10px] text-slate-500 hover:text-emerald-700 font-semibold">Ttd</span>
                              </button>
                              <button
                                id={`btn-clone-doc-${doc.id}`}
                                onClick={() => onCloneDocument(doc)}
                                className="p-1.5 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors cursor-pointer flex items-center space-x-1 text-xs"
                                title="Salin / Gandakan Draf (Mewakili data baru)"
                              >
                                <Copy className="w-4 h-4 text-slate-500" />
                                <span className="text-[10px] text-slate-500 group-hover:text-slate-700 font-semibold">Clone</span>
                              </button>
                            </div>

                            <button
                              id={`btn-delete-doc-${doc.id}`}
                              onClick={() => onDeleteDocument(doc.id, doc.title)}
                              className="p-1.5 text-slate-400 hover:text-red-650 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
                              title="Hapus"
                            >
                              <Trash2 className="w-4 h-4" />
                            </button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      ) : activeTab === 'templates' ? (
        <DashboardTemplatesTab 
          filteredTemplates={filteredTemplates}
          onUseTemplate={onUseTemplate}
          onEditTemplate={onEditTemplate}
          onCloneTemplate={onCloneTemplate}
          onDeleteTemplate={onDeleteTemplate}
          onResetDefaults={onResetDefaults}
        />
      ) : (
        /* ========== DATA REFERENCE SETTINGS TAB ========== */
        <DashboardSettingsTab 
          databases={databases}
          onSaveDatabases={onSaveDatabases}
          searchQuery={searchQuery}
        />
      )}
    </div>
  );
}