import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { ClipboardList, Sparkles, AlertTriangle, Check } from 'lucide-react';

import { Leader, EvaluationResponse, WAInvitation, UnitProdi, Aspect, Question } from '../types';
import { useEvaluationDraft } from '../hooks/useEvaluationDraft';

import RespondentIdentity from './evaluation/RespondentIdentity';
import LeaderSidebar from './evaluation/LeaderSidebar';
import AspectWizard from './evaluation/AspectWizard';
import OpenQuestionsStep from './evaluation/OpenQuestionsStep';
import EvaluationSuccess from './evaluation/EvaluationSuccess';
import VerificationCompleted from './evaluation/VerificationCompleted';
import EvaluationHeader from './evaluation/EvaluationHeader';
import EvaluationNavigation from './evaluation/EvaluationNavigation';

interface EvaluationFormProps {
  leaders: Leader[];
  invitations: WAInvitation[];
  units: UnitProdi[];
  aspects: Aspect[];
  questions: Question[];
  onFormSubmit: (
    response: Omit<EvaluationResponse, 'id' | 'timestamp' | 'averageScore' | 'category'>,
    invitationId?: string,
    respondentId?: string
  ) => void;
  onGoToAdmin: () => void;
  isAdminLoggedIn?: boolean;
}

export default function EvaluationForm({ 
  leaders, 
  invitations = [], 
  units = [], 
  aspects = [],
  questions = [],
  onFormSubmit, 
  onGoToAdmin,
  isAdminLoggedIn = false
}: EvaluationFormProps) {
  const {
    currentStep, setCurrentStep,
    activeInvite,
    status, setStatus,
    unit, setUnit,
    leaderId, setLeaderId,
    submittedLeaders, setSubmittedLeaders,
    draftScores, setDraftScores,
    draftStrengths, setDraftStrengths,
    draftImprovements, setDraftImprovements,
    draftSuggestions, setDraftSuggestions,
    draftSteps, setDraftSteps,
    scores, setScores,
    openStrengths, setOpenStrengths,
    openImprovements, setOpenImprovements,
    openSuggestions, setOpenSuggestions,
    clearDraft,
    respondentId
  } = useEvaluationDraft(invitations, leaders);

  const validSubmitted = submittedLeaders.filter(id => id && id.trim() !== '');
  const [errorMsg, setErrorMsg] = useState('');
  const [lastSubmittedName, setLastSubmittedName] = useState('');

  const handleLeaderTabChange = (targetId: string) => {
    if (targetId === leaderId) return;

    setDraftScores(prev => ({ ...prev, [leaderId]: scores }));
    setDraftStrengths(prev => ({ ...prev, [leaderId]: openStrengths }));
    setDraftImprovements(prev => ({ ...prev, [leaderId]: openImprovements }));
    setDraftSuggestions(prev => ({ ...prev, [leaderId]: openSuggestions }));
    setDraftSteps(prev => ({ ...prev, [leaderId]: currentStep }));

    setLeaderId(targetId);
    setScores(draftScores[targetId] || {});
    setOpenStrengths(draftStrengths[targetId] || '');
    setOpenImprovements(draftImprovements[targetId] || '');
    setOpenSuggestions(draftSuggestions[targetId] || '');
    setCurrentStep(draftSteps[targetId] || 1);
    setErrorMsg('');
  };

  const handlePrev = () => {
    if (currentStep > 1) {
      setCurrentStep(prev => prev - 1);
      setErrorMsg('');
    }
  };

  const handleNext = () => {
    setErrorMsg('');

    if (!status) {
      setErrorMsg('Silakan pilih Status Responden Anda pada bagian sebelah kiri.');
      return;
    }
    if (!unit.trim()) {
      setErrorMsg('Silakan pilih Unit Kerja / Prodi Anda pada bagian sebelah kiri.');
      return;
    }

    if (currentStep >= 1 && currentStep <= aspects.length) {
      const activeQuestions = questions.filter(q => q.aspectId === aspects[currentStep - 1]?.id);
      const isMissingAnswers = activeQuestions.some(q => !scores[q.id]);
      
      if (isMissingAnswers) {
        setErrorMsg('⚠️ Semua pertanyaan di aspek ini wajib diisi sebelum melanjutkan.');
        return;
      }
      setCurrentStep(prev => prev + 1);
      return;
    }

    if (currentStep === aspects.length + 1) {
      handleSubmitResponse();
    }
  };

  const handleSubmitResponse = () => {
    if (!status || !unit.trim()) {
      setErrorMsg('Harap lengkapi status dan unit kerja di panel kiri.');
      return;
    }

    const uncompletedQuestions = questions.filter(q => !scores[q.id]);
    if (uncompletedQuestions.length > 0) {
      const firstUncompletedId = uncompletedQuestions[0].id;
      const associatedAspect = questions.find(q => q.id === firstUncompletedId)?.aspectId || 1;
      const aspectIndex = aspects.findIndex(a => a.id === associatedAspect);
      const targetStep = aspectIndex !== -1 ? aspectIndex + 1 : 1;
      
      setErrorMsg(`⚠️ Masih ada pernyataan kuesioner yang terlewatkan. Membuka otomatis Aspek ${targetStep}.`);
      setCurrentStep(targetStep);
      return;
    }

    const isCompletedAll = validSubmitted.length + 1 >= leaders.length;

    onFormSubmit({
      status,
      unit,
      leaderId,
      scores,
      openStrengths: openStrengths.trim(),
      openImprovements: openImprovements.trim(),
      openSuggestions: openSuggestions.trim()
    }, isCompletedAll ? activeInvite?.id : undefined, respondentId);

    if (isCompletedAll) {
      clearDraft();
    }

    const targetLeader = leaders.find(l => l.id === leaderId);
    setLastSubmittedName(targetLeader ? targetLeader.position : 'Pimpinan');
    setSubmittedLeaders(p => [...p, leaderId]);
    setCurrentStep(aspects.length + 2);
  };

  const resetForm = () => {
    clearDraft();
    if (!activeInvite) {
      setStatus('');
      setUnit('');
    }
    setSubmittedLeaders([]);
    setDraftScores({});
    setDraftStrengths({});
    setDraftImprovements({});
    setDraftSuggestions({});
    setDraftSteps({});
    setScores({});
    setOpenStrengths('');
    setOpenImprovements('');
    setOpenSuggestions('');
    setErrorMsg('');
    setCurrentStep(1);
    if (leaders.length > 0) {
      setLeaderId(leaders[0].id);
    }
  };

  if (activeInvite?.isCompleted) {
    return <VerificationCompleted activeInvite={activeInvite} onGoToAdmin={onGoToAdmin} isAdminLoggedIn={isAdminLoggedIn} />;
  }

  return (
    <div id="evaluation-form-wrapper" className="max-w-[1780px] mx-auto px-4 sm:px-6 md:px-8 pt-3 pb-8 font-sans transition-colors duration-200">
      <EvaluationHeader onGoToAdmin={onGoToAdmin} isAdminLoggedIn={isAdminLoggedIn} />

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        {/* LEFT COLUMN: Sidebar */}
        <div className="lg:col-span-4 space-y-6 lg:sticky lg:top-8 h-fit relative z-20">
          <div className={leaderId ? "hidden lg:block" : "block"}>
            <RespondentIdentity
              activeInvite={activeInvite}
              status={status}
              setStatus={setStatus}
              unit={unit}
              setUnit={setUnit}
              units={units}
            />
          </div>
          <div className="relative hidden lg:block">
            <LeaderSidebar
              leaders={leaders}
              leaderId={leaderId}
              submittedLeaders={submittedLeaders}
              handleLeaderTabChange={handleLeaderTabChange}
            />
            {!leaderId && (
              <div className="hidden lg:block absolute left-full top-1/2 -translate-y-1/2 ml-4 z-40 bg-blue-600 text-white text-xs font-bold py-2.5 px-3.5 rounded-xl shadow-lg border border-blue-500 w-48 animate-pulse shrink-0">
                <div className="absolute right-full top-1/2 -translate-y-1/2 border-8 border-transparent border-r-blue-600" />
                👈 Mulai dari sini! Pilih jabatan pimpinan yang ingin dievaluasi.
              </div>
            )}
          </div>
        </div>

        {/* RIGHT COLUMN: Questionnaire Form */}
        <div className="lg:col-span-8 space-y-6">
          
          {/* MOBILE TABS SWIPER */}
          <div className="block lg:hidden relative">
            <div className="flex items-center gap-1.5 mb-2.5 px-0.5">
              <ClipboardList className="h-4 w-3.5 text-blue-600" />
              <h2 className="text-xs font-bold text-slate-500 uppercase tracking-widest">
                Pilih Pimpinan ({validSubmitted.length}/{leaders.length} Selesai)
              </h2>
            </div>
            
            <div className="flex gap-2.5 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
              {leaders.map((leader) => {
                const isActive = leaderId === leader.id;
                const isCompleted = submittedLeaders.includes(leader.id);
                return (
                  <button
                    key={leader.id}
                    type="button"
                    onClick={() => handleLeaderTabChange(leader.id)}
                    className={`relative shrink-0 flex flex-col items-start p-3 rounded-xl border transition-all text-left w-[150px] cursor-pointer ${
                      isActive 
                        ? 'border-blue-500 bg-blue-50 text-blue-900 shadow-sm' 
                        : isCompleted
                          ? 'border-emerald-200 bg-emerald-50/20 text-slate-800'
                          : 'border-slate-200 bg-white text-slate-700'
                    }`}
                  >
                    {isCompleted && (
                      <span className="absolute top-2.5 right-2.5 flex items-center justify-center p-0.5 rounded-full bg-emerald-500 text-white">
                        <Check className="h-2.5 w-2.5 stroke-[3]" />
                      </span>
                    )}
                    <span className="text-[9px] font-bold text-slate-400 block uppercase tracking-wide truncate w-full">{leader.position}</span>
                    <span className="text-xs font-bold leading-tight mt-0.5 text-slate-900 truncate w-full">{leader.name === leader.position ? leader.department : leader.name}</span>
                  </button>
                );
              })}
            </div>
            {!leaderId && (
              <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 z-40 bg-blue-600 text-white text-[11px] font-bold py-2.5 px-3.5 rounded-xl shadow-lg border border-blue-500 w-64 animate-bounce text-center">
                <div className="absolute bottom-full left-1/2 -translate-x-1/2 border-6 border-transparent border-b-blue-600" />
                👆 Mulai dari sini! Pilih pimpinan di atas.
              </div>
            )}
          </div>

          {/* ACTIVE QUESTIONNAIRE CARD */}
          <div id="wizard-card" className="bg-white shadow-xl rounded-2xl border border-slate-100 overflow-hidden relative">
            {!leaderId ? (
              <div className="p-6 md:p-8">
                {/* ONBOARDING WELCOME SCREEN */}
                <div className="text-center py-6 px-4 md:px-8 space-y-6">
                  <div className="relative inline-block">
                    <div className="h-16 w-16 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto animate-bounce">
                      <Sparkles className="h-8 w-8" />
                    </div>
                  </div>
                  
                  <div>
                    <h2 className="text-xl md:text-2xl font-black text-slate-800 tracking-tight">
                      Portal Evaluasi Kinerja Pimpinan
                    </h2>
                    <p className="text-xs sm:text-sm text-slate-500 mt-2 max-w-lg mx-auto leading-relaxed">
                      Selamat datang! Silakan isi evaluasi secara jujur, objektif, dan konstruktif demi kemajuan Yayasan Perguruan Tinggi - GKP. Kuesioner ini sepenuhnya <strong className="text-slate-800">ANONIM</strong>.
                    </p>
                  </div>
                  
                  <div className="border-t border-slate-100 pt-6">
                    <div className="bg-blue-50/60 text-blue-800 border border-blue-100 p-4.5 rounded-2xl max-w-md mx-auto flex items-center gap-3 text-xs sm:text-sm text-left shadow-3xs mb-6 relative">
                      <span className="absolute -top-3 left-6 px-2.5 py-0.5 bg-blue-600 text-white text-[9px] font-extrabold uppercase rounded-full shadow-3xs animate-pulse">Langkah Pertama</span>
                      <div className="p-2 bg-white rounded-xl text-blue-600 shrink-0 shadow-3xs">
                        <ClipboardList className="h-4.5 w-4.5" />
                      </div>
                      <p className="font-semibold leading-snug">
                        Silakan pilih jabatan pimpinan yang ingin Anda evaluasi di bawah ini atau melalui panel samping untuk memulai.
                      </p>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-2xl mx-auto">
                      {leaders.map((leader, index) => {
                        const isCompleted = submittedLeaders.includes(leader.id);
                        return (
                          <button
                            key={leader.id}
                            type="button"
                            onClick={() => handleLeaderTabChange(leader.id)}
                            className={`flex items-center gap-4.5 p-4 rounded-2xl border text-left transition-all hover:scale-[1.02] cursor-pointer shadow-3xs ${
                              isCompleted
                                ? 'border-emerald-200 bg-emerald-50/10 text-slate-800'
                                : 'border-slate-200 bg-white hover:border-blue-400 hover:bg-blue-50/20'
                            }`}
                          >
                            <div className={`h-8.5 w-8.5 rounded-xl flex items-center justify-center font-bold text-xs shrink-0 font-mono ${
                              isCompleted ? 'bg-emerald-500 text-white font-black' : 'bg-slate-100 text-slate-500 border border-slate-200'
                            }`}>
                              {isCompleted ? <Check className="h-3.5 w-3.5 stroke-[3]" /> : index + 1}
                            </div>
                            <div className="min-w-0">
                              <span className="text-xs font-black block text-slate-900 leading-tight">{leader.position}</span>
                              <span className="text-[10px] text-slate-500 block truncate mt-0.5">
                                {leader.name === leader.position ? leader.department : leader.name}
                              </span>
                            </div>
                          </button>
                        );
                      })}
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              <>
                {currentStep >= 1 && currentStep <= aspects.length + 1 && (
                  <div className="bg-slate-100 h-2 w-full">
                    <div 
                      className="bg-blue-600 h-2 transition-all duration-300 ease-out"
                      style={{ width: `${Math.min(Math.round(((currentStep - 1) / (aspects.length || 1)) * 100), 100)}%` }}
                    />
                  </div>
                )}

                <div className="p-6 md:p-8">
                  {errorMsg && (
                    <motion.div
                      initial={{ opacity: 0, scale: 0.98 }}
                      animate={{ opacity: 1, scale: 1 }}
                      id="form-error-div"
                      className="mb-6 bg-rose-50 border border-rose-200 p-4 rounded-xl flex items-start gap-3 text-xs sm:text-sm text-rose-700 font-medium"
                    >
                      <AlertTriangle className="h-5 w-5 text-rose-500 shrink-0 mt-0.5" />
                      <div>
                        <span className="font-bold">Perhatian: </span>
                        {errorMsg}
                      </div>
                    </motion.div>
                  )}

                  <AnimatePresence mode="wait">
                    {currentStep >= 1 && currentStep <= aspects.length && (
                      <AspectWizard
                        leaders={leaders}
                        leaderId={leaderId}
                        currentStep={currentStep}
                        scores={scores}
                        setScores={setScores}
                        aspects={aspects}
                        questions={questions}
                      />
                    )}

                    {currentStep === aspects.length + 1 && (
                      <OpenQuestionsStep
                        leaders={leaders}
                        leaderId={leaderId}
                        openStrengths={openStrengths}
                        setOpenStrengths={setOpenStrengths}
                        openImprovements={openImprovements}
                        setOpenImprovements={setOpenImprovements}
                        openSuggestions={openSuggestions}
                        setOpenSuggestions={setOpenSuggestions}
                      />
                    )}

                    {currentStep === aspects.length + 2 && (
                      <EvaluationSuccess
                        leaderId={leaderId}
                        lastSubmittedName={lastSubmittedName}
                        leaders={leaders}
                        submittedLeaders={submittedLeaders}
                        activeInvite={activeInvite}
                        resetForm={resetForm}
                        handleLeaderTabChange={handleLeaderTabChange}
                        setCurrentStep={setCurrentStep}
                        setSubmittedLeaders={setSubmittedLeaders}
                      />
                    )}
                  </AnimatePresence>
                </div>

                <EvaluationNavigation
                  currentStep={currentStep}
                  totalSteps={aspects.length + 1}
                  handlePrev={handlePrev}
                  handleNext={handleNext}
                />
              </>
            )}
          </div>

          {leaderId && currentStep >= 1 && currentStep <= aspects.length + 1 && (
            <div className="mt-4 px-1 text-xs text-slate-500">
              <span>⭐ Skala: 1 (Sangat Tidak Setuju) s.d 5 (Sangat Setuju)</span>
            </div>
          )}

        </div>
      </div>
    </div>
  );
}