import { motion } from 'motion/react';
import { 
  FileText, 
  CheckCircle, 
  Users, 
  Briefcase, 
  BookOpen, 
  GraduationCap 
} from 'lucide-react';

import { Leader, EvaluationResponse } from '../../types';
import { getInterpretation } from '../../data/questionnaire';

interface DashboardSummaryProps {
  totalResponses: number;
  totalRespondents: number;
  globalAverage: number;
  globalInterpretation: { text: string; bg: string; color: string };
  statusDosenCount: number;
  percentDosen: number;
  statusTendikCount: number;
  percentTendik: number;
  leaders: Leader[];
  responses: EvaluationResponse[];
  aspectAverages: { aspectId: number; title: string; average: number }[];
}

export default function DashboardSummary({
  totalResponses,
  totalRespondents,
  globalAverage,
  globalInterpretation,
  statusDosenCount,
  percentDosen,
  statusTendikCount,
  percentTendik,
  leaders,
  responses,
  aspectAverages
}: DashboardSummaryProps) {
  return (
    <motion.div
      key="tab-summary"
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      className="space-y-8"
    >
      {/* Index summary grid metrics */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        
        {/* Card 1: Total Responses */}
        <div className="bg-white dark:bg-slate-800 p-5 rounded-2xl border border-slate-100 dark:border-slate-700/60 shadow-sm flex items-center justify-between">
          <div>
            <span className="text-xs font-semibold text-slate-400 uppercase tracking-widest block">Total Opini Masuk</span>
            <span className="text-3xl font-extrabold text-slate-800 dark:text-white block mt-1.5">{totalResponses}</span>
            <span className="text-[10px] text-emerald-600 dark:text-emerald-400 font-semibold mt-1 block">✓ Data Terverifikasi</span>
          </div>
          <div className="h-12 w-12 bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 rounded-xl flex items-center justify-center">
            <FileText className="h-6 w-6" />
          </div>
        </div>

        {/* Card 2: Cumulative Average */}
        <div className="bg-white dark:bg-slate-800 p-5 rounded-2xl border border-slate-100 dark:border-slate-700/60 shadow-sm flex items-center justify-between">
          <div>
            <span className="text-xs font-semibold text-slate-400 uppercase tracking-widest block">Indeks Kepuasan Rata-rata</span>
            <span className="text-3xl font-extrabold text-slate-800 dark:text-white block mt-1.5">{globalAverage.toFixed(2)}</span>
            <span className={`text-[10px] uppercase font-bold mt-1 px-1.5 py-0.5 rounded ${globalInterpretation.bg} ${globalInterpretation.color} inline-block`}>
              {globalInterpretation.text}
            </span>
          </div>
          <div className="h-12 w-12 bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600 dark:text-emerald-400 rounded-xl flex items-center justify-center">
            <CheckCircle className="h-6 w-6" />
          </div>
        </div>

        {/* Card 3: Respondent split percentages */}
        <div className="bg-white dark:bg-slate-800 p-5 rounded-2xl border border-slate-100 dark:border-slate-700/60 shadow-sm flex items-center justify-between">
          <div>
            <span className="text-xs font-semibold text-slate-400 uppercase tracking-widest block">Status Responden</span>
            <div className="mt-1.5 space-y-1">
              <span className="text-xs font-semibold text-slate-700 dark:text-slate-300 block">Dosen: {statusDosenCount} ({percentDosen}%)</span>
              <span className="text-xs font-semibold text-slate-700 dark:text-slate-300 block">Tendik: {statusTendikCount} ({percentTendik}%)</span>
            </div>
          </div>
          <div className="h-12 w-12 bg-purple-50 dark:bg-purple-950/40 text-purple-600 dark:text-purple-400 rounded-xl flex items-center justify-center">
            <Users className="h-6 w-6" />
          </div>
        </div>

        {/* Card 4: Total targets leaders */}
        <div className="bg-white dark:bg-slate-800 p-5 rounded-2xl border border-slate-100 dark:border-slate-700/60 shadow-sm flex items-center justify-between">
          <div>
            <span className="text-xs font-semibold text-slate-400 uppercase tracking-widest block">Pimpinan Terdaftar</span>
            <span className="text-3xl font-extrabold text-slate-800 dark:text-white block mt-1.5">{leaders.length}</span>
          </div>
          <div className="h-12 w-12 bg-amber-50 dark:bg-amber-950/40 text-amber-600 dark:text-amber-400 rounded-xl flex items-center justify-center">
            <Briefcase className="h-6 w-6" />
          </div>
        </div>

      </div>

      {/* Analytical Graph Row: Horizontal Metrics & Respondent Circular Split */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        
        {/* Graphic 1: Aspect averages visual bar indicators */}
        <div className="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-100 dark:border-slate-700/60 shadow-sm lg:col-span-8">
          <h3 className="text-sm font-bold text-slate-800 dark:text-white uppercase tracking-wider mb-4 flex items-center gap-1.5">
            <BookOpen className="h-4 w-4 text-blue-600 dark:text-blue-400" />
            <span>Nilai Rata-rata per Aspek Kepemimpinan</span>
          </h3>

          <div className="space-y-5">
            {aspectAverages.map((asp, i) => {
              const aspectInter = getInterpretation(asp.average);
              const barWidthPercent = (asp.average / 5) * 100;
              
              return (
                <div key={asp.aspectId} className="space-y-1.5">
                  <div className="flex flex-col sm:flex-row justify-between sm:items-center text-xs gap-1">
                    <span className="font-bold text-slate-800 dark:text-slate-300">
                      {asp.aspectId}. {asp.title}
                    </span>
                    <span className="text-slate-500 dark:text-slate-400 font-mono">
                      Rata-Rata: <strong className="text-slate-800 dark:text-white">{asp.average.toFixed(2)} / 5.00</strong> 
                      <span className={`ml-2 px-1.5 py-0.5 font-bold rounded ${aspectInter.bg} ${aspectInter.color} text-[10px]`}>
                        {aspectInter.text}
                      </span>
                    </span>
                  </div>
                  
                  <div className="h-3 w-full bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden flex">
                    <motion.div
                      initial={{ width: 0 }}
                      animate={{ width: `${barWidthPercent}%` }}
                      transition={{ duration: 1, delay: i * 0.1 }}
                      className={`h-full rounded-full ${
                        asp.average >= 4.21 
                          ? 'bg-emerald-500' 
                          : asp.average >= 3.41 
                            ? 'bg-blue-500' 
                            : asp.average >= 2.61 
                              ? 'bg-amber-500' 
                              : 'bg-rose-500'
                      }`}
                    />
                  </div>
                </div>
              );
            })}
          </div>

          <div className="mt-6 pt-4 border-t border-slate-100 dark:border-slate-700/60 text-[11px] text-slate-400 dark:text-slate-500 text-center">
            Rata-rata aspek dinilai berdasarkan total kumulatif 24 butir pertanyaan kuesioner.
          </div>
        </div>

        {/* Graphic 2: Donut Circular Donut Chart */}
        <div className="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-100 dark:border-slate-700/60 shadow-sm lg:col-span-4 flex flex-col justify-between">
          <div>
            <h3 className="text-sm font-bold text-slate-800 dark:text-white uppercase tracking-wider mb-2 flex items-center gap-1.5">
              <Users className="h-4 w-4 text-purple-600 dark:text-purple-400" />
              <span>Komposisi Responden</span>
            </h3>
            <p className="text-xs text-slate-400 mb-4">Grafik rincian respon dosen vs. tenaga kependidikan</p>
          </div>

          {/* Donut SVG Engine */}
          <div className="flex justify-center items-center my-6">
            <div className="relative h-44 w-44">
              <svg viewBox="0 0 100 100" className="h-full w-full transform -rotate-90">
                <circle
                  cx="50"
                  cy="50"
                  r="40"
                  fill="transparent"
                  stroke="#f1f5f9"
                  strokeWidth="11"
                />
                
                <circle
                  cx="50"
                  cy="50"
                  r="40"
                  fill="transparent"
                  stroke="#3b82f6"
                  strokeWidth="11"
                  strokeDasharray="251.32"
                  strokeDashoffset={251.32 - (251.32 * percentDosen) / 100}
                  strokeLinecap="round"
                  className="transition-all duration-1000 ease-out"
                />

                <circle
                  cx="50"
                  cy="50"
                  r="40"
                  fill="transparent"
                  stroke="#a855f7"
                  strokeWidth="11"
                  strokeDasharray="251.32"
                  strokeDashoffset={251.32 - (251.32 * percentTendik) / 100}
                  transform="rotate(180 50 50)"
                  className="transition-all duration-1000 ease-out"
                />
              </svg>
              
              <div className="absolute inset-0 flex flex-col items-center justify-center">
                <span className="text-2xl font-black text-slate-800 dark:text-white font-mono">{totalRespondents}</span>
                <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none">Responden</span>
              </div>
            </div>
          </div>

          {/* Chart Legends */}
          <div className="space-y-2 mt-4">
            <div className="flex items-center justify-between text-xs font-semibold p-2 bg-blue-50/50 dark:bg-slate-900/30 rounded-xl">
              <div className="flex items-center gap-2">
                <div className="h-3.5 w-3.5 rounded bg-blue-500 shrink-0" />
                <span className="text-slate-700 dark:text-slate-300">Dosen</span>
              </div>
              <span className="text-slate-900 dark:text-slate-200 font-mono font-bold">
                {statusDosenCount} staf ({percentDosen}%)
              </span>
            </div>

            <div className="flex items-center justify-between text-xs font-semibold p-2 bg-purple-50/50 dark:bg-slate-900/30 rounded-xl">
              <div className="flex items-center gap-2">
                <div className="h-3.5 w-3.5 rounded bg-purple-500 shrink-0" />
                <span className="text-slate-700 dark:text-slate-300">Tendik</span>
              </div>
              <span className="text-slate-900 dark:text-slate-200 font-mono font-bold">
                {statusTendikCount} staf ({percentTendik}%)
              </span>
            </div>
          </div>

        </div>

      </div>

      {/* Performance metrics breakdown per Leader */}
      <div className="bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-100 dark:border-slate-700/60 shadow-sm">
        <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-2 mb-6">
          <div>
            <h3 className="text-sm font-bold text-slate-800 dark:text-white uppercase tracking-wider flex items-center gap-1.5">
              <GraduationCap className="h-5 w-5 text-amber-500" />
              <span>Laporan Mutu Individu Pimpinan</span>
            </h3>
            <p className="text-xs text-slate-400 mt-0.5">Rangking kepuasan berdasarkan hasil kuisioner terkumpul</p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {leaders.map(lead => {
            const leadEvals = responses.filter(r => r.leaderId === lead.id);
            const averageScoreLead = leadEvals.length > 0
              ? leadEvals.reduce((s, r) => s + r.averageScore, 0) / leadEvals.length
              : 0;
            const scoreInter = getInterpretation(averageScoreLead);

            return (
              <div key={lead.id} className="p-4 rounded-xl border border-slate-100 dark:border-slate-700/50 bg-slate-50/40 dark:bg-slate-950/20 hover:border-slate-200 dark:hover:border-slate-700 transition flex flex-col justify-between">
                <div>
                  <div className="flex justify-between items-start gap-1">
                    <span className="text-[10px] font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-widest">
                      {lead.name === lead.position ? lead.department : lead.position}
                    </span>
                    <span className="text-xs font-bold text-slate-400 font-mono bg-white dark:bg-slate-900 px-2 py-0.5 rounded-md border border-slate-100 dark:border-slate-700">
                      {leadEvals.length} opini
                    </span>
                  </div>
                  <h4 className="font-bold text-sm text-slate-800 dark:text-white mt-1.5 line-clamp-1">
                    {lead.name === lead.position ? lead.position : lead.name}
                  </h4>
                  <p className="text-xs text-slate-400 mt-0.5 line-clamp-1">
                    {lead.name === lead.position ? 'Yayasan Perguruan Tinggi - GKP' : lead.department}
                  </p>
                </div>

                <div className="mt-4 pt-3 border-t border-slate-100/80 dark:border-slate-800 flex items-center justify-between">
                  <span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded ${scoreInter.bg} ${scoreInter.color}`}>
                    {leadEvals.length > 0 ? scoreInter.text : 'Belum dinilai'}
                  </span>
                  <div className="text-right">
                    <span className="text-xs text-slate-400 block leading-none">Skor Indeks:</span>
                    <span className="text-base font-extrabold text-slate-800 dark:text-white font-mono leading-none">
                      {leadEvals.length > 0 ? averageScoreLead.toFixed(2) : '-'} <span className="text-xs font-normal text-slate-400">/ 5</span>
                    </span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </motion.div>
  );
}