'use client';

import { useEffect, useState } from 'react';
import { regionApi } from '@/lib/api/admin';
import type { Region } from '@/types';
import {
    PageHeader, AddButton, Table, TableRow, TableCell, ActionButton,
    ConfirmDialog, Modal, FormField, Input, Textarea, SubmitButton,
    ErrorAlert, EmptyState, LoadingSpinner
} from '@/components/Ui';

export default function RegionsPage() {
    const [items, setItems] = useState<Region[]>([]);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<Region | null>(null);
    const [deleteTarget, setDeleteTarget] = useState<Region | null>(null);
    const [deleting, setDeleting] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');
    const [form, setForm] = useState({ name: '', description: '', total_members: 0, order: 0 });

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

    const openCreate = () => { setEditing(null); setForm({ name: '', description: '', total_members: 0, order: 0 }); setError(''); setModalOpen(true); };
    const openEdit = (r: Region) => { setEditing(r); setForm({ name: r.name, description: r.description || '', total_members: r.total_members || 0, order: r.order || 0 }); setError(''); setModalOpen(true); };

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

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

    const totalMembers = (r: Region) =>
        (r.permanent_members?.length || 0) + (r.reviewer_members?.length || 0) + (r.initiation_members?.length || 0);

    if (loading) return <LoadingSpinner />;

    return (
        <div className="space-y-6">
            <PageHeader title="Regions" subtitle="Manage organization regions" action={<AddButton onClick={openCreate} />} />

            {items.length === 0 ? <div className="bg-white rounded-xl shadow-sm"><EmptyState /></div> : (
                <Table headers={['#', 'Name', 'Description', 'Members', 'Order', 'Actions']}>
                    {items.map((r, i) => (
                        <TableRow key={r.id}>
                            <TableCell>{i + 1}</TableCell>
                            <TableCell><span className="font-semibold text-main">{r.name}</span></TableCell>
                            <TableCell className="max-w-xs"><p className="truncate text-sec">{r.description || '-'}</p></TableCell>
                            <TableCell>
                                <div className="flex gap-2 text-xs">
                                    <span className="bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">
                                        P: {r.permanent_tbms_count ?? 0}
                                    </span>

                                    <span className="bg-green-50 text-green-700 px-2 py-0.5 rounded-full">
                                        R: {r.reviewer_tbms_count ?? 0}
                                    </span>

                                    <span className="bg-purple-50 text-purple-700 px-2 py-0.5 rounded-full">
                                        I: {r.initiation_tbms_count ?? 0}
                                    </span>
                                </div>
                            </TableCell>
                            <TableCell>{r.order ?? '-'}</TableCell>
                            <TableCell>
                                <div className="flex gap-1">
                                    <ActionButton variant="edit" onClick={() => openEdit(r)} />
                                    <ActionButton variant="delete" onClick={() => setDeleteTarget(r)} />
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </Table>
            )}

            <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit Region' : 'Add Region'}>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <ErrorAlert message={error} />
                    <FormField label="Name" required><Input value={form.name} onChange={e => setForm(p => ({ ...p, name: e.target.value }))} placeholder="Region name" required /></FormField>
                    <FormField label="Description"><Textarea value={form.description} onChange={e => setForm(p => ({ ...p, description: e.target.value }))} rows={3} placeholder="Region description" /></FormField>
                    <div className="grid grid-cols-2 gap-4">
                        <FormField label="Total Members"><Input type="number" value={form.total_members} onChange={e => setForm(p => ({ ...p, total_members: +e.target.value }))} min={0} /></FormField>
                        <FormField label="Order"><Input type="number" value={form.order} onChange={e => setForm(p => ({ ...p, order: +e.target.value }))} min={0} /></FormField>
                    </div>
                    <SubmitButton loading={saving} />
                </form>
            </Modal>

            <ConfirmDialog isOpen={!!deleteTarget} onClose={() => setDeleteTarget(null)} onConfirm={handleDelete} loading={deleting} title="Delete Region" message={`Delete region "${deleteTarget?.name}"? This may affect members assigned to this region.`} />
        </div>
    );
}