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

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Sparkles, Lock, Shield } from 'lucide-react';

import EvaluationForm from './components/EvaluationForm';
import AdminLogin from './components/AdminLogin';
import AdminDashboard from './components/AdminDashboard';

import { Leader, AdminUser, EvaluationResponse, WAInvitation, UnitProdi, Aspect, Question } from './types';
import { getInterpretation } from './data/questionnaire';

export default function App() {
  // Check if current user entered via a respondent link
  const [isResponder] = useState<boolean>(() => {
    if (typeof window !== 'undefined') {
      const params = new URLSearchParams(window.location.search);
      return !!(
        params.get('ref') ||
        params.get('r') ||
        params.get('st') ||
        params.get('status') ||
        params.get('un') ||
        params.get('unit') ||
        window.location.pathname.match(/^\/r\/([^\/]+)$/)
      );
    }
    return false;
  });

  // Navigation: 'form' | 'login' | 'admin'
  const [view, setView] = useState<'form' | 'login' | 'admin'>(() => {
    if (typeof window !== 'undefined') {
      if (isResponder) {
        return 'form';
      }
      return localStorage.getItem('ypt_gkp_admin_name') ? 'admin' : 'form';
    }
    return 'form';
  });
  
  // App-wide state with local persistence
  const [leaders, setLeaders] = useState<Leader[]>([]);
  const [admins, setAdmins] = useState<AdminUser[]>([]);
  const [responses, setResponses] = useState<EvaluationResponse[]>([]);
  const [invitations, setInvitations] = useState<WAInvitation[]>([]);
  const [units, setUnits] = useState<UnitProdi[]>([]);
  const [aspects, setAspects] = useState<Aspect[]>([]);
  const [questions, setQuestions] = useState<Question[]>([]);
  const [loggedAdminName, setLoggedAdminName] = useState<string>(() => {
    if (typeof window !== 'undefined') {
      return localStorage.getItem('ypt_gkp_admin_name') || '';
    }
    return '';
  });
  
  // Locked to light theme as requested
  const [darkMode] = useState<boolean>(false);

  // --- INITIALIZE FROM BACKEND DATABASE API ---
  useEffect(() => {
    const fetchData = async () => {
      try {
        const leadersRes = await fetch('/api/leaders');
        if (leadersRes.ok) setLeaders(await leadersRes.json());

        const adminsRes = await fetch('/api/admins');
        if (adminsRes.ok) setAdmins(await adminsRes.json());

        const responsesRes = await fetch('/api/responses');
        if (responsesRes.ok) setResponses(await responsesRes.json());

        const invitationsRes = await fetch('/api/invitations');
        if (invitationsRes.ok) setInvitations(await invitationsRes.json());

        const unitsRes = await fetch('/api/units');
        if (unitsRes.ok) setUnits(await unitsRes.json());

        const aspectsRes = await fetch('/api/aspects');
        if (aspectsRes.ok) setAspects(await aspectsRes.json());

        const questionsRes = await fetch('/api/questions');
        if (questionsRes.ok) setQuestions(await questionsRes.json());
      } catch (err) {
        console.error('Error fetching initial database data:', err);
      }
    };
    fetchData();
  }, []);

  // --- THEME SYNC ---
  useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove('dark');
    localStorage.setItem('iki_theme', 'light');
  }, []);

  // --- MUTATORS & PERSISTENCE HELPERS ---

  // --- MUTATORS & PERSISTENCE HELPERS ---
  const apiCall = async (url: string, method: string = 'GET', body?: any) => {
    const res = await fetch(url, {
      method,
      headers: body ? { 'Content-Type': 'application/json' } : undefined,
      body: body ? JSON.stringify(body) : undefined
    });
    if (!res.ok) {
      const errData = await res.json().catch(() => ({}));
      throw new Error(errData.error || `Gagal menjalankan aksi di ${url}`);
    }
    return res.json();
  };

  // Submit a questionnaire evaluation
  const handleFormSubmit = async (
    formData: Omit<EvaluationResponse, 'id' | 'timestamp' | 'averageScore' | 'category'>,
    invitationId?: string,
    respondentId?: string
  ) => {
    try {
      const newResponse = await apiCall('/api/responses', 'POST', { ...formData, invitationId, respondentId });
      setResponses(prev => [newResponse, ...prev]);
      const inviteData = await apiCall('/api/invitations');
      setInvitations(inviteData);
    } catch (err) {
      console.error('Error submitting form:', err);
    }
  };

  // Leaders
  const handleAddLeader = (leaderData: Omit<Leader, 'id'>) =>
    apiCall('/api/leaders', 'POST', leaderData)
      .then(newLeader => setLeaders(prev => [...prev, newLeader]))
      .catch(err => console.error('Error adding leader:', err));

  const handleEditLeader = (id: string, leaderData: Omit<Leader, 'id'>) =>
    apiCall(`/api/leaders/${id}`, 'PUT', leaderData)
      .then(updated => setLeaders(prev => prev.map(l => l.id === id ? updated : l)))
      .catch(err => console.error('Error editing leader:', err));

  const handleDeleteLeader = (id: string) =>
    apiCall(`/api/leaders/${id}`, 'DELETE')
      .then(() => setLeaders(prev => prev.filter(l => l.id !== id)))
      .catch(err => console.error('Error deleting leader:', err));

  // Admins
  const handleAddAdmin = (adminData: Omit<AdminUser, 'id' | 'createdAt'> & { password?: string }) =>
    apiCall('/api/admins', 'POST', adminData)
      .then(newAdmin => setAdmins(prev => [...prev, newAdmin]))
      .catch(err => console.error('Error adding admin:', err));

  const handleEditAdmin = async (id: string, adminData: Omit<AdminUser, 'id' | 'createdAt'> & { password?: string }) => {
    await apiCall(`/api/admins/${id}`, 'PUT', adminData);
    const adminsData = await apiCall('/api/admins');
    setAdmins(adminsData);
  };

  const handleDeleteAdmin = (id: string) =>
    apiCall(`/api/admins/${id}`, 'DELETE')
      .then(() => setAdmins(prev => prev.filter(a => a.id !== id)))
      .catch(err => console.error('Error deleting admin:', err));

  // Responses
  const handleDeleteResponse = (id: string) =>
    apiCall(`/api/responses/${id}`, 'DELETE')
      .then(() => setResponses(prev => prev.filter(r => r.id !== id)))
      .catch(err => console.error('Error deleting response:', err));

  // WhatsApp Invitations
  const handleAddInvitation = (inviteData: Omit<WAInvitation, 'id' | 'sentCount'>) =>
    apiCall('/api/invitations', 'POST', inviteData)
      .then(newInvite => setInvitations(prev => [...prev, newInvite]))
      .catch(err => console.error('Error adding invitation:', err));

  const handleEditInvitation = (id: string, inviteData: Omit<WAInvitation, 'id' | 'sentCount'>) =>
    apiCall(`/api/invitations/${id}`, 'PUT', inviteData)
      .then(updated => setInvitations(prev => prev.map(i => i.id === id ? { ...i, ...updated } : i)))
      .catch(err => console.error('Error editing invitation:', err));

  const handleDeleteInvitation = (id: string) =>
    apiCall(`/api/invitations/${id}`, 'DELETE')
      .then(() => setInvitations(prev => prev.filter(i => i.id !== id)))
      .catch(err => console.error('Error deleting invitation:', err));

  const handleIncrementSentInvitation = (id: string) =>
    apiCall(`/api/invitations/${id}/increment`, 'POST')
      .then(data => setInvitations(prev => prev.map(i => i.id === id ? { ...i, sentCount: i.sentCount + 1, lastSentAt: data.lastSentAt } : i)))
      .catch(err => console.error('Error incrementing invitation:', err));

  // Units
  const handleAddUnit = (nama: string) =>
    apiCall('/api/units', 'POST', { name: nama })
      .then(newUnit => setUnits(prev => [...prev, newUnit].sort((a, b) => a.nama.localeCompare(b.nama))))
      .catch(err => console.error('Error adding unit:', err));

  const handleDeleteUnit = (id: string) =>
    apiCall(`/api/units/${id}`, 'DELETE')
      .then(() => setUnits(prev => prev.filter(u => u.id !== id)))
      .catch(err => console.error('Error deleting unit:', err));

  // Aspects CRUD
  const handleAddAspect = (aspectData: Omit<Aspect, 'id'>) =>
    apiCall('/api/aspects', 'POST', aspectData)
      .then(newAspect => setAspects(prev => [...prev, newAspect]))
      .catch(err => console.error('Error adding aspect:', err));

  const handleEditAspect = (id: number, aspectData: Omit<Aspect, 'id'>) =>
    apiCall(`/api/aspects/${id}`, 'PUT', aspectData)
      .then(updated => setAspects(prev => prev.map(a => a.id === id ? updated : a)))
      .catch(err => console.error('Error editing aspect:', err));

  const handleDeleteAspect = (id: number) =>
    apiCall(`/api/aspects/${id}`, 'DELETE')
      .then(() => {
        setAspects(prev => prev.filter(a => a.id !== id));
        return apiCall('/api/questions');
      })
      .then(qList => setQuestions(qList))
      .catch(err => console.error('Error deleting aspect:', err));

  // Questions CRUD
  const handleAddQuestion = (qData: Omit<Question, 'id'>) =>
    apiCall('/api/questions', 'POST', qData)
      .then(newQ => setQuestions(prev => [...prev, newQ]))
      .catch(err => console.error('Error adding question:', err));

  const handleEditQuestion = (id: number, qData: Omit<Question, 'id'>) =>
    apiCall(`/api/questions/${id}`, 'PUT', qData)
      .then(updated => setQuestions(prev => prev.map(q => q.id === id ? updated : q)))
      .catch(err => console.error('Error editing question:', err));

  const handleDeleteQuestion = (id: number) =>
    apiCall(`/api/questions/${id}`, 'DELETE')
      .then(() => setQuestions(prev => prev.filter(q => q.id !== id)))
      .catch(err => console.error('Error deleting question:', err));

  // --- VIEW RENDERING ---
  const handleLoginSuccess = (adminName: string) => {
    setLoggedAdminName(adminName);
    setView('admin');
    localStorage.setItem('ypt_gkp_admin_name', adminName);
  };

  const handleLogout = () => {
    setLoggedAdminName('');
    setView('form');
    localStorage.removeItem('ypt_gkp_admin_name');
  };

  return (
    <div className="min-h-screen bg-slate-50 transition-colors duration-300 relative pb-16">
      
      {/* Portal transition Router */}
      <main className="pt-0">
        <AnimatePresence mode="wait">
          
          {view === 'form' && (
            <motion.div
              key="form-view"
              initial={{ opacity: 0, y: 15 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -15 }}
              transition={{ duration: 0.35 }}
            >
              {isResponder || loggedAdminName ? (
                <EvaluationForm 
                  leaders={leaders}
                  invitations={invitations}
                  units={units}
                  aspects={aspects}
                  questions={questions}
                  onFormSubmit={handleFormSubmit}
                  onGoToAdmin={() => setView(loggedAdminName ? 'admin' : 'login')}
                  isAdminLoggedIn={!!loggedAdminName}
                />
              ) : (
                <div className="max-w-md mx-auto px-4 pt-12">
                  <div className="bg-white border border-slate-100 rounded-3xl shadow-xl p-8 text-center space-y-6">
                    <div className="relative inline-block">
                      <div className="h-16 w-16 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center mx-auto">
                        <Lock className="h-7 w-7" />
                      </div>
                    </div>
                    
                    <div className="space-y-2">
                      <h2 className="text-xl font-black text-slate-800 tracking-tight">
                        Akses Terbatas
                      </h2>
                      <p className="text-xs sm:text-sm text-slate-500 leading-relaxed">
                        Anda hanya diperbolehkan mengisi kuesioner evaluasi ini melalui tautan khusus (link) yang diberikan secara resmi. Silakan periksa pesan undangan WhatsApp Anda.
                      </p>
                    </div>

                    <div className="pt-2 border-t border-slate-50">
                      <button
                        onClick={() => setView('login')}
                        className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded-2xl shadow-sm hover:shadow transition-all duration-200 flex items-center justify-center gap-2 cursor-pointer"
                      >
                        <Shield className="h-4 w-4" />
                        <span>Portal Administrasi</span>
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </motion.div>
          )}

          {view === 'login' && (
            <motion.div
              key="login-view"
              initial={{ opacity: 0, scale: 0.98 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.98 }}
              transition={{ duration: 0.3 }}
            >
              <AdminLogin 
                onLoginSuccess={handleLoginSuccess}
                onCancel={() => setView('form')}
              />
            </motion.div>
          )}

          {view === 'admin' && (
            <motion.div
              key="admin-view"
              initial={{ opacity: 0, y: 15 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -15 }}
              transition={{ duration: 0.35 }}
            >
              <AdminDashboard 
                responses={responses}
                leaders={leaders}
                admins={admins}
                invitations={invitations}
                units={units}
                aspects={aspects}
                questions={questions}
                onAddUnit={handleAddUnit}
                onDeleteUnit={handleDeleteUnit}
                onAddLeader={handleAddLeader}
                onEditLeader={handleEditLeader}
                onDeleteLeader={handleDeleteLeader}
                onAddAdmin={handleAddAdmin}
                onEditAdmin={handleEditAdmin}
                onDeleteAdmin={handleDeleteAdmin}
                onDeleteResponse={handleDeleteResponse}
                onAddInvitation={handleAddInvitation}
                onEditInvitation={handleEditInvitation}
                onDeleteInvitation={handleDeleteInvitation}
                onIncrementInvitationSent={handleIncrementSentInvitation}
                onAddAspect={handleAddAspect}
                onEditAspect={handleEditAspect}
                onDeleteAspect={handleDeleteAspect}
                onAddQuestion={handleAddQuestion}
                onEditQuestion={handleEditQuestion}
                onDeleteQuestion={handleDeleteQuestion}
                onLogout={handleLogout}
                onGoToForm={() => setView('form')}
                adminName={loggedAdminName}
              />
            </motion.div>
          )}

        </AnimatePresence>
      </main>

      {/* Unified clean footer credit */}
      <footer className="mt-12 text-center text-xs text-slate-400">
        <p>Yayasan Perguruan Tinggi - GKP</p>
        <p className="mt-0.5 text-[10px]">Jl. Kopo No.161, Babakan Asih, Kec. Bojongloa Kaler, Kota Bandung, Jawa Barat</p>
      </footer>

    </div>
  );
}