'use client';

import { useEffect, useState } from 'react';
import { visionMissionApi } from '@/lib/api/admin';
import type { VisionMission } from '@/types';
import {
    PageHeader, AddButton, Table, TableRow, TableCell, StatusBadge, ActionButton,
    ConfirmDialog, Modal, FormField, Textarea, Toggle, SubmitButton,
    ErrorAlert, EmptyState, LoadingSpinner
} from '@/components/Ui';
import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';

export default function VisionMissionPage() {
    const [items, setItems] = useState<VisionMission[]>([]);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<VisionMission | null>(null);
    const [deleteTarget, setDeleteTarget] = useState<VisionMission | null>(null);
    const [deleting, setDeleting] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');
    const [form, setForm] = useState({ vision: '', missions: [''], is_active: false });

    const fetchData = async () => { try { const r = await visionMissionApi.getAll(); setItems(r.data); } finally { setLoading(false); } };
    useEffect(() => { fetchData(); }, []);

    const openCreate = () => { setEditing(null); setForm({ vision: '', missions: [''], is_active: false }); setError(''); setModalOpen(true); };
    const openEdit = (v: VisionMission) => { setEditing(v); setForm({ vision: v.vision, missions: [...v.missions], is_active: v.is_active }); setError(''); setModalOpen(true); };

    const addMission = () => setForm(p => ({ ...p, missions: [...p.missions, ''] }));
    const removeMission = (i: number) => setForm(p => ({ ...p, missions: p.missions.filter((_, idx) => idx !== i) }));
    const updateMission = (i: number, val: string) => setForm(p => { const m = [...p.missions]; m[i] = val; return { ...p, missions: m }; });

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault(); setSaving(true); setError('');
        try {
            const data = { ...form, missions: form.missions.filter(m => m.trim()) };
            if (editing) { await visionMissionApi.update(editing.id, data); } else { await visionMissionApi.create(data); }
            setModalOpen(false); fetchData();
        } catch (err: any) { setError(err.message || 'Failed to save'); } finally { setSaving(false); }
    };

    const handleDelete = async () => {
        if (!deleteTarget) return; setDeleting(true);
        try { await visionMissionApi.delete(deleteTarget.id); setDeleteTarget(null); fetchData(); } finally { setDeleting(false); }
    };

    const handleSetActive = async (id: number) => {
        try { await visionMissionApi.setActive(id); fetchData(); } catch (err: any) { alert(err.message); }
    };

    if (loading) return <LoadingSpinner />;

    return (
        <div className="space-y-6">
            <PageHeader title="Vision & Mission" subtitle="Manage organization vision and missions" action={<AddButton onClick={openCreate} />} />

            {items.length === 0 ? <div className="bg-white rounded-xl shadow-sm"><EmptyState /></div> : (
                <Table headers={['#', 'Vision', 'Missions Count', 'Status', 'Actions']}>
                    {items.map((v, i) => (
                        <TableRow key={v.id}>
                            <TableCell>{i + 1}</TableCell>
                            <TableCell className="max-w-sm"><p className="line-clamp-2 text-sm">{v.vision}</p></TableCell>
                            <TableCell><span className="bg-orange-50 text-brand px-2 py-0.5 rounded-full text-xs font-medium">{v.missions.length} missions</span></TableCell>
                            <TableCell><StatusBadge active={v.is_active} activeLabel="Active" inactiveLabel="Inactive" /></TableCell>
                            <TableCell>
                                <div className="flex gap-1">
                                    {!v.is_active && <ActionButton variant="set-active" label="Set Active" onClick={() => handleSetActive(v.id)} />}
                                    <ActionButton variant="edit" onClick={() => openEdit(v)} />
                                    <ActionButton variant="delete" onClick={() => setDeleteTarget(v)} />
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </Table>
            )}

            <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit Vision & Mission' : 'Add Vision & Mission'} size="lg">
                <form onSubmit={handleSubmit} className="space-y-4">
                    <ErrorAlert message={error} />
                    <FormField label="Vision" required>
                        <Textarea value={form.vision} onChange={e => setForm(p => ({ ...p, vision: e.target.value }))} rows={4} placeholder="Organizational vision statement..." required />
                    </FormField>
                    <div>
                        <label className="block text-sm font-medium text-main mb-2">Missions <span className="text-red-500">*</span></label>
                        <div className="space-y-2">
                            {form.missions.map((m, i) => (
                                <div key={i} className="flex gap-2 items-start">
                                    <span className="flex-shrink-0 w-6 h-6 bg-orange-50 text-brand rounded-full text-xs flex items-center justify-center font-bold mt-2">{i + 1}</span>
                                    <Textarea value={m} onChange={e => updateMission(i, e.target.value)} rows={2} placeholder={`Mission ${i + 1}...`} className="flex-1" />
                                    {form.missions.length > 1 && (
                                        <button type="button" onClick={() => removeMission(i)} className="p-1.5 text-red-400 hover:bg-red-50 rounded-lg mt-1.5 flex-shrink-0">
                                            <TrashIcon className="w-4 h-4" />
                                        </button>
                                    )}
                                </div>
                            ))}
                        </div>
                        <button type="button" onClick={addMission} className="mt-2 flex items-center gap-1.5 text-sm text-brand hover:text-orange-600">
                            <PlusIcon className="w-4 h-4" /> Add Mission
                        </button>
                    </div>
                    <Toggle checked={form.is_active} onChange={v => setForm(p => ({ ...p, is_active: v }))} label="Set as Active" />
                    <SubmitButton loading={saving} />
                </form>
            </Modal>

            <ConfirmDialog isOpen={!!deleteTarget} onClose={() => setDeleteTarget(null)} onConfirm={handleDelete} loading={deleting} title="Delete Vision & Mission" message="Delete this vision & mission entry?" />
        </div>
    );
}