import { useState } from 'react';
import { AnimatePresence } from 'motion/react';
import { 
  BarChart3, 
  Users, 
  Shield, 
  FileText, 
  Settings, 
  LogOut, 
  LayoutDashboard, 
  MessageCircle,
  FileSpreadsheet
} from 'lucide-react';
import { Leader, AdminUser, EvaluationResponse, WAInvitation, UnitProdi, Aspect, Question } from '../types';
import { getInterpretation } from '../data/questionnaire';
import DashboardSummary from './admin/DashboardSummary';
import EvaluationResults from './admin/EvaluationResults';
import WAInvitations from './admin/WAInvitations';
import UserManagement from './admin/UserManagement';
import UnitProdiManagement from './admin/UnitProdiManagement';
import QuestionnaireManagement from './admin/QuestionnaireManagement';
import EvaluationDetailModal from './admin/EvaluationDetailModal';
import { downloadExcel, downloadPDF } from './admin/ExportHelpers';

interface AdminDashboardProps {
  responses: EvaluationResponse[];
  leaders: Leader[];
  admins: AdminUser[];
  invitations: WAInvitation[];
  units: UnitProdi[];
  aspects: Aspect[];
  questions: Question[];
  onAddUnit: (nama: string) => Promise<void>;
  onDeleteUnit: (id: string) => Promise<void>;
  onAddLeader: (leader: Omit<Leader, 'id'>) => void;
  onEditLeader: (id: string, leader: Omit<Leader, 'id'>) => void;
  onDeleteLeader: (id: string) => void;
  onAddAdmin: (admin: Omit<AdminUser, 'id' | 'createdAt'> & { password?: string }) => void;
  onEditAdmin: (id: string, admin: Omit<AdminUser, 'id' | 'createdAt'> & { password?: string }) => Promise<void>;
  onDeleteAdmin: (id: string) => void;
  onDeleteResponse: (id: string) => void;
  onAddInvitation: (invite: Omit<WAInvitation, 'id' | 'sentCount'>) => void;
  onEditInvitation: (id: string, invite: Omit<WAInvitation, 'id' | 'sentCount'>) => void;
  onDeleteInvitation: (id: string) => void;
  onIncrementInvitationSent: (id: string) => void;
  onAddAspect: (aspect: Omit<Aspect, 'id'>) => void;
  onEditAspect: (id: number, aspect: Omit<Aspect, 'id'>) => void;
  onDeleteAspect: (id: number) => void;
  onAddQuestion: (q: Omit<Question, 'id'>) => void;
  onEditQuestion: (id: number, q: Omit<Question, 'id'>) => void;
  onDeleteQuestion: (id: number) => void;
  onLogout: () => void;
  onGoToForm: () => void;
  adminName: string;
}

export default function AdminDashboard({
  responses,
  leaders,
  admins,
  invitations,
  units = [],
  aspects = [],
  questions = [],
  onAddUnit,
  onDeleteUnit,
  onAddLeader,
  onEditLeader,
  onDeleteLeader,
  onAddAdmin,
  onEditAdmin,
  onDeleteAdmin,
  onDeleteResponse,
  onAddInvitation,
  onEditInvitation,
  onDeleteInvitation,
  onIncrementInvitationSent,
  onAddAspect,
  onEditAspect,
  onDeleteAspect,
  onAddQuestion,
  onEditQuestion,
  onDeleteQuestion,
  onLogout,
  onGoToForm,
  adminName
}: AdminDashboardProps) {
  // Navigation tab
  const [activeTab, setActiveTab] = useState<'summary' | 'results' | 'users' | 'invitations' | 'units' | 'questionnaire'>('summary');
  
  // Filter states for Results
  const [searchUnit, setSearchUnit] = useState('');
  const [filterLeaderId, setFilterLeaderId] = useState('');
  const [filterStatus, setFilterStatus] = useState('');

  // Selected response for detail modal
  const [selectedResponseId, setSelectedResponseId] = useState<string | null>(null);

  // Success/error notification banner
  const [bannerMsg, setBannerMsg] = useState('');
  const triggerBanner = (msg: string) => {
    setBannerMsg(msg);
    setTimeout(() => setBannerMsg(''), 4000);
  };

  // Compute Metrics
  const totalResponses = responses.length;
  const globalAverageRaw = totalResponses > 0 
    ? responses.reduce((acc, r) => acc + r.averageScore, 0) / totalResponses
    : 0;
  const globalAverage = Math.round(globalAverageRaw * 100) / 100;
  const globalInterpretation = getInterpretation(globalAverage);

  // Group responses by respondentId (falling back to id for legacy data) to count unique respondents
  const uniqueRespondentsMap = new Map<string, EvaluationResponse>();
  responses.forEach(r => {
    const key = r.respondentId || r.id;
    if (!uniqueRespondentsMap.has(key)) {
      uniqueRespondentsMap.set(key, r);
    }
  });
  const uniqueRespondents = Array.from(uniqueRespondentsMap.values());
  const totalRespondents = uniqueRespondents.length;

  const statusDosenCount = uniqueRespondents.filter(r => r.status === 'Dosen').length;
  const statusTendikCount = uniqueRespondents.filter(r => r.status === 'Tenaga Kependidikan').length;
  const percentDosen = totalRespondents > 0 ? Math.round((statusDosenCount / totalRespondents) * 100) : 0;
  const percentTendik = totalRespondents > 0 ? Math.round((statusTendikCount / totalRespondents) * 100) : 0;

  const aspectAverages = aspects.map(aspect => {
    const aspectQuestions = questions.filter(q => q.aspectId === aspect.id);
    const questionIds = aspectQuestions.map(q => q.id);
    let sum = 0;
    let count = 0;
    responses.forEach(res => {
      questionIds.forEach(qId => {
        if (res.scores[qId]) {
          sum += res.scores[qId];
          count++;
        }
      });
    });
    return {
      aspectId: aspect.id,
      title: aspect.title,
      average: count > 0 ? Math.round((sum / count) * 100) / 100 : 0
    };
  });

  const filteredResponses = responses.filter(res => {
    const matchSearch = res.unit.toLowerCase().includes(searchUnit.toLowerCase());
    const matchLeader = filterLeaderId === '' || res.leaderId === filterLeaderId;
    const matchStatus = filterStatus === '' || res.status === filterStatus;
    return matchSearch && matchLeader && matchStatus;
  });

  const activeResponseDetail = responses.find(r => r.id === selectedResponseId);

  return (
    <div id="admin-dashboard-root" className="max-w-[1800px] mx-auto px-4 sm:px-6 md:px-8 pt-3 pb-24 md:pb-8 font-sans transition-colors duration-200">
      
      {/* Toast Notification Banner */}
      <AnimatePresence>
        {bannerMsg && (
          <div
            id="toast-notifications"
            className="fixed top-5 left-1/2 -translate-x-1/2 z-50 bg-slate-900 text-white dark:bg-white dark:text-slate-900 border border-slate-800 dark:border-slate-200 shadow-xl rounded-xl px-5 py-3 text-sm font-semibold flex items-center gap-2"
          >
            <span>{bannerMsg}</span>
          </div>
        )}
      </AnimatePresence>

      {/* Admin Panel Header */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8 bg-white dark:bg-slate-800/90 border border-slate-100 dark:border-slate-700 p-6 rounded-2xl shadow-sm">
        <div>
          <div className="mb-3">
            <img 
              src="https://yptgkp.or.id/wp-content/uploads/2023/05/LOGO-TULISAN.jpg" 
              alt="Yayasan Perguruan Tinggi GKP" 
              className="h-10 md:h-12 object-contain rounded-xl border border-slate-200 bg-white p-1.5 shadow-3xs"
            />
          </div>
          <h1 className="text-2xl mt-1.5 md:text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight">
            Portal Administrasi Evaluasi
          </h1>
          <p className="text-slate-500 dark:text-slate-400 text-xs mt-0.5">
            Selamat bekerja, <strong className="text-slate-800 dark:text-slate-200">{adminName}</strong>
          </p>
        </div>

        <div className="flex flex-wrap gap-2.5">
          <button
            onClick={() => downloadExcel(responses, filteredResponses, leaders, questions, triggerBanner)}
            id="btn-export-excel"
            className="flex items-center gap-1.5 px-3.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold rounded-xl shadow-sm transition cursor-pointer"
          >
            <FileSpreadsheet className="h-4 w-4" />
            <span>Ekspor Excel</span>
          </button>
          
          <button
            onClick={() => downloadPDF(
              responses, adminName, totalResponses, totalRespondents, statusDosenCount, percentDosen, 
              statusTendikCount, percentTendik, globalAverage, globalInterpretation, 
              aspectAverages, leaders, triggerBanner
            )}
            id="btn-export-pdf"
            className="flex items-center gap-1.5 px-3.5 py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold rounded-xl shadow-sm transition cursor-pointer"
          >
            <FileText className="h-4 w-4" />
            <span>Cetak PDF</span>
          </button>

          <button
            onClick={onGoToForm}
            id="btn-goto-form"
            className="flex items-center gap-1.5 px-3.5 py-2 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-650 text-slate-700 dark:text-slate-300 text-xs font-semibold rounded-xl transition cursor-pointer"
          >
            <LayoutDashboard className="h-4 w-4 text-blue-500" />
            <span>Lihat Form Utama</span>
          </button>

          <button
            onClick={onLogout}
            id="btn-logout"
            className="flex items-center gap-1.5 px-3.5 py-2 bg-rose-50 hover:bg-rose-100 dark:bg-rose-950/20 dark:hover:bg-rose-900/30 text-rose-600 dark:text-rose-400 text-xs font-semibold rounded-xl transition cursor-pointer"
          >
            <LogOut className="h-4 w-4" />
            <span>Logout</span>
          </button>
        </div>
      </div>

      {/* Tabs Menu Navigation */}
      <div className="hidden md:flex border-b border-slate-200 dark:border-slate-700 mb-8 gap-2 overflow-x-auto pb-0.5">
        <button
          onClick={() => setActiveTab('summary')}
          className={`flex items-center gap-2 px-4 py-2.5 font-bold text-xs uppercase tracking-wide border-b-2 transition cursor-pointer shrink-0 ${
            activeTab === 'summary'
              ? 'border-blue-600 text-blue-700 dark:text-blue-400'
              : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
          }`}
        >
          <LayoutDashboard className="h-4 w-4" />
          <span>Analisis & Visualisasi</span>
        </button>

        <button
          onClick={() => setActiveTab('results')}
          className={`flex items-center gap-2 px-4 py-2.5 font-bold text-xs uppercase tracking-wide border-b-2 transition cursor-pointer shrink-0 ${
            activeTab === 'results'
              ? 'border-blue-600 text-blue-700 dark:text-blue-400'
              : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
          }`}
        >
          <BarChart3 className="h-4 w-4" />
          <span>Hasil Penilaian ({filteredResponses.length})</span>
        </button>

        <button
          onClick={() => setActiveTab('invitations')}
          className={`flex items-center gap-2 px-4 py-2.5 font-bold text-xs uppercase tracking-wide border-b-2 transition cursor-pointer shrink-0 ${
            activeTab === 'invitations'
              ? 'border-blue-600 text-blue-700 dark:text-blue-400'
              : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
          }`}
        >
          <MessageCircle className="h-4 w-4 text-emerald-500" />
          <span className="flex items-center gap-1.5">
            Undangan WA 
            <span className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-[10px] py-0.5 px-1.5 rounded-full font-bold">
              {invitations.length}
            </span>
          </span>
        </button>

        <button
          onClick={() => setActiveTab('users')}
          className={`flex items-center gap-2 px-4 py-2.5 font-bold text-xs uppercase tracking-wide border-b-2 transition cursor-pointer shrink-0 ${
            activeTab === 'users'
              ? 'border-blue-600 text-blue-700 dark:text-blue-400'
              : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
          }`}
        >
          <Users className="h-4 w-4" />
          <span>Pengguna & Pimpinan</span>
        </button>

        <button
          onClick={() => setActiveTab('units')}
          className={`flex items-center gap-2 px-4 py-2.5 font-bold text-xs uppercase tracking-wide border-b-2 transition cursor-pointer shrink-0 ${
            activeTab === 'units'
              ? 'border-blue-600 text-blue-700 dark:text-blue-400'
              : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
          }`}
        >
          <Settings className="h-4 w-4 text-slate-500" />
          <span>Unit Kerja / Prodi</span>
        </button>

        <button
          onClick={() => setActiveTab('questionnaire')}
          className={`flex items-center gap-2 px-4 py-2.5 font-bold text-xs uppercase tracking-wide border-b-2 transition cursor-pointer shrink-0 ${
            activeTab === 'questionnaire'
              ? 'border-blue-600 text-blue-700 dark:text-blue-400'
              : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
          }`}
        >
          <FileText className="h-4 w-4 text-slate-500" />
          <span>Aspek & Pertanyaan</span>
        </button>
      </div>

      {/* Global No Data Banner */}
      {totalResponses === 0 && (
        <div className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-8 rounded-2xl text-center mb-8">
          <p className="text-slate-600 dark:text-slate-400 text-sm">Belum ada opini masuk yang dikirimkan. Evaluasi akan terisi otomatis setelah Anda menginput kuesioner utama.</p>
        </div>
      )}

      {/* Tab Content Portal */}
      <div className="min-h-[400px]">
        <AnimatePresence mode="wait">
          {activeTab === 'summary' && totalResponses > 0 && (
            <DashboardSummary
              totalResponses={totalResponses}
              totalRespondents={totalRespondents}
              globalAverage={globalAverage}
              globalInterpretation={globalInterpretation}
              statusDosenCount={statusDosenCount}
              statusTendikCount={statusTendikCount}
              percentDosen={percentDosen}
              percentTendik={percentTendik}
              aspectAverages={aspectAverages}
              leaders={leaders}
              responses={responses}
            />
          )}

          {activeTab === 'results' && (
            <EvaluationResults
              searchUnit={searchUnit}
              setSearchUnit={setSearchUnit}
              filterLeaderId={filterLeaderId}
              setFilterLeaderId={setFilterLeaderId}
              filterStatus={filterStatus}
              setFilterStatus={setFilterStatus}
              leaders={leaders}
              invitations={invitations}
              filteredResponses={filteredResponses}
              setSelectedResponseId={setSelectedResponseId}
              onDeleteResponse={onDeleteResponse}
              triggerBanner={triggerBanner}
            />
          )}

          {activeTab === 'invitations' && (
            <WAInvitations
              invitations={invitations}
              units={units}
              leaders={leaders}
              aspects={aspects}
              questions={questions}
              onAddInvitation={onAddInvitation}
              onEditInvitation={onEditInvitation}
              onDeleteInvitation={onDeleteInvitation}
              onIncrementInvitationSent={onIncrementInvitationSent}
              triggerBanner={triggerBanner}
            />
          )}

          {activeTab === 'users' && (
            <UserManagement
              leaders={leaders}
              admins={admins}
              onAddLeader={onAddLeader}
              onEditLeader={onEditLeader}
              onDeleteLeader={onDeleteLeader}
              onAddAdmin={onAddAdmin}
              onEditAdmin={onEditAdmin}
              onDeleteAdmin={onDeleteAdmin}
              triggerBanner={triggerBanner}
            />
          )}

          {activeTab === 'units' && (
            <UnitProdiManagement
              units={units}
              onAddUnit={onAddUnit}
              onDeleteUnit={onDeleteUnit}
              triggerBanner={triggerBanner}
            />
          )}

          {activeTab === 'questionnaire' && (
            <QuestionnaireManagement
              aspects={aspects}
              questions={questions}
              onAddAspect={onAddAspect}
              onEditAspect={onEditAspect}
              onDeleteAspect={onDeleteAspect}
              onAddQuestion={onAddQuestion}
              onEditQuestion={onEditQuestion}
              onDeleteQuestion={onDeleteQuestion}
            />
          )}
        </AnimatePresence>
      </div>

      {/* Floating Detail Modal */}
      <EvaluationDetailModal
        isOpen={!!selectedResponseId}
        onClose={() => setSelectedResponseId(null)}
        activeResponseDetail={activeResponseDetail}
        leaders={leaders}
        aspects={aspects}
        questions={questions}
      />

      {/* Bottom Navigation Bar for Mobile */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 z-40 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md border-t border-slate-200 dark:border-slate-800 shadow-xl px-2 py-2.5 flex items-center justify-around pb-safe-bottom">
        <button
          onClick={() => setActiveTab('summary')}
          className={`flex flex-col items-center justify-center gap-1 flex-1 py-1 transition-colors cursor-pointer ${
            activeTab === 'summary'
              ? 'text-blue-600 dark:text-blue-400 font-extrabold'
              : 'text-slate-400 dark:text-slate-500'
          }`}
        >
          <LayoutDashboard className="h-4.5 w-4.5" />
          <span className="text-[8px] uppercase tracking-wider block">Analisis</span>
        </button>

        <button
          onClick={() => setActiveTab('results')}
          className={`flex flex-col items-center justify-center gap-1 flex-1 py-1 transition-colors cursor-pointer ${
            activeTab === 'results'
              ? 'text-blue-600 dark:text-blue-400 font-extrabold'
              : 'text-slate-400 dark:text-slate-500'
          }`}
        >
          <div className="relative">
            <BarChart3 className="h-4.5 w-4.5" />
            {filteredResponses.length > 0 && (
              <span className="absolute -top-1.5 -right-2 bg-blue-600 text-white text-[7px] font-black px-1 rounded-full">
                {filteredResponses.length}
              </span>
            )}
          </div>
          <span className="text-[8px] uppercase tracking-wider block">Hasil</span>
        </button>

        <button
          onClick={() => setActiveTab('invitations')}
          className={`flex flex-col items-center justify-center gap-1 flex-1 py-1 transition-colors cursor-pointer ${
            activeTab === 'invitations'
              ? 'text-blue-600 dark:text-blue-400 font-extrabold'
              : 'text-slate-400 dark:text-slate-500'
          }`}
        >
          <div className="relative">
            <MessageCircle className="h-4.5 w-4.5 text-emerald-500" />
            {invitations.length > 0 && (
              <span className="absolute -top-1.5 -right-2 bg-emerald-500 text-white text-[7px] font-black px-1 rounded-full">
                {invitations.length}
              </span>
            )}
          </div>
          <span className="text-[8px] uppercase tracking-wider block">Undangan</span>
        </button>

        <button
          onClick={() => setActiveTab('users')}
          className={`flex flex-col items-center justify-center gap-1 flex-1 py-1 transition-colors cursor-pointer ${
            activeTab === 'users'
              ? 'text-blue-600 dark:text-blue-400 font-extrabold'
              : 'text-slate-400 dark:text-slate-500'
          }`}
        >
          <Users className="h-4.5 w-4.5" />
          <span className="text-[8px] uppercase tracking-wider block">Pimpinan</span>
        </button>

        <button
          onClick={() => setActiveTab('units')}
          className={`flex flex-col items-center justify-center gap-1 flex-1 py-1 transition-colors cursor-pointer ${
            activeTab === 'units'
              ? 'text-blue-600 dark:text-blue-400 font-extrabold'
              : 'text-slate-400 dark:text-slate-500'
          }`}
        >
          <Settings className="h-4.5 w-4.5" />
          <span className="text-[8px] uppercase tracking-wider block">Unit</span>
        </button>

        <button
          onClick={() => setActiveTab('questionnaire')}
          className={`flex flex-col items-center justify-center gap-1 flex-1 py-1 transition-colors cursor-pointer ${
            activeTab === 'questionnaire'
              ? 'text-blue-600 dark:text-blue-400 font-extrabold'
              : 'text-slate-400 dark:text-slate-500'
          }`}
        >
          <FileText className="h-4.5 w-4.5" />
          <span className="text-[8px] uppercase tracking-wider block">Aspek</span>
        </button>
      </div>
    </div>
  );
}