'use client';

import { useEffect, useState } from 'react';
import { organizationApi, tbmApi, periodApi } from '@/lib/api/admin';
import type { OrganizationStructure, Tbm, Period } from '@/types';
import {
    PageHeader, AddButton, Table, TableRow, TableCell, ActionButton,
    ConfirmDialog, Modal, FormField, Input, Select, SubmitButton,
    ErrorAlert, EmptyState, LoadingSpinner, ImageUpload, ImagePreview
} from '@/components/Ui';

export default function OrganizationStructurePage() {
    const [items, setItems] = useState<OrganizationStructure[]>([]);
    const [tbms, setTbms] = useState<Tbm[]>([]);
    const [periods, setPeriods] = useState<Period[]>([]);
    const [activePeriod, setActivePeriod] = useState<string>('');
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<OrganizationStructure | null>(null);
    const [deleteTarget, setDeleteTarget] = useState<OrganizationStructure | null>(null);
    const [deleting, setDeleting] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');
    const [photoFile, setPhotoFile] = useState<File | null>(null);
    const [form, setForm] = useState({
        tbm_id: '',
        period_id: '',
        name: '',
        position: '',
        order: 0,
    });

    const fetchData = async () => {
        try {
            const [oRes, tRes, pRes] = await Promise.all([
                organizationApi.getAll(),
                tbmApi.getAll(),
                periodApi.getAll(),
            ]);
            setItems(oRes.data);
            setTbms(tRes.data);
            setPeriods(pRes.data);
            setActivePeriod(oRes.period || '');
        } finally { setLoading(false); }
    };
    useEffect(() => { fetchData(); }, []);

    const defaultPeriodId = () => String(periods.find(p => p.is_active)?.id || '');

    const openCreate = () => {
        setEditing(null);
        setForm({ tbm_id: '', period_id: defaultPeriodId(), name: '', position: '', order: 0 });
        setPhotoFile(null);
        setError('');
        setModalOpen(true);
    };

    const openEdit = (o: OrganizationStructure) => {
        setEditing(o);
        setForm({
            tbm_id: o.tbm_id ? String(o.tbm_id) : '',
            period_id: String(o.period_id),
            name: o.name,
            position: o.position,
            order: o.order ?? 0,
        });
        setPhotoFile(null);
        setError('');
        setModalOpen(true);
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault(); setSaving(true); setError('');
        try {
            const fd = new FormData();
            if (form.tbm_id) fd.append('tbm_id', form.tbm_id);
            fd.append('period_id', form.period_id);
            fd.append('name', form.name);
            fd.append('position', form.position);
            fd.append('order', String(form.order));
            if (photoFile) fd.append('photo', photoFile);

            if (editing) {
                await organizationApi.update(editing.id, fd);
            } else {
                await organizationApi.create(fd);
            }
            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 organizationApi.delete(deleteTarget.id); setDeleteTarget(null); fetchData(); } finally { setDeleting(false); }
    };

    if (loading) return <LoadingSpinner />;

    return (
        <div className="space-y-6">
            <PageHeader
                title="Organization Structure"
                subtitle={activePeriod ? `Active period: ${activePeriod}` : 'No active period'}
                action={<AddButton onClick={openCreate} />}
            />

            {items.length === 0 ? (
                <div className="bg-white rounded-xl shadow-sm"><EmptyState message="No structure defined for active period" /></div>
            ) : (
                <Table headers={['Order', 'Photo', 'Name', 'Position', 'TBM', 'Region', 'Period', 'Actions']}>
                    {items.map((o) => (
                        <TableRow key={o.id}>
                            <TableCell>
                                <span className="w-8 h-8 bg-orange-50 text-brand rounded-lg flex items-center justify-center font-bold text-sm">
                                    {o.order ?? '-'}
                                </span>
                            </TableCell>
                            <TableCell>
                                <ImagePreview src={o.photo || undefined} alt={o.name} size={10} />
                            </TableCell>
                            <TableCell>
                                <span className="font-medium">{o.name}</span>
                            </TableCell>
                            <TableCell>{o.position}</TableCell>
                            <TableCell>{o.tbm?.tbm || '-'}</TableCell>
                            <TableCell>{o.tbm?.region?.name || '-'}</TableCell>
                            <TableCell>{o.period?.name || '-'}</TableCell>
                            <TableCell>
                                <div className="flex gap-1">
                                    <ActionButton variant="edit" onClick={() => openEdit(o)} />
                                    <ActionButton variant="delete" onClick={() => setDeleteTarget(o)} />
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </Table>
            )}

            <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit Structure' : 'Add to Structure'} size="lg">
                <form onSubmit={handleSubmit} className="space-y-4">
                    <ErrorAlert message={error} />
                    <div className="grid grid-cols-2 gap-4">
                        <FormField label="Period" required>
                            <Select value={form.period_id} onChange={e => setForm(p => ({ ...p, period_id: e.target.value }))} required>
                                <option value="">Select Period</option>
                                {periods.map(p => (
                                    <option key={p.id} value={p.id}>{p.name} {p.is_active ? '(Active)' : ''}</option>
                                ))}
                            </Select>
                        </FormField>
                        <FormField label="TBM (optional)">
                            <Select value={form.tbm_id} onChange={e => setForm(p => ({ ...p, tbm_id: e.target.value }))}>
                                <option value="">No TBM</option>
                                {tbms.map(t => (
                                    <option key={t.id} value={t.id}>{t.tbm} {t.region ? `(${t.region.name})` : ''}</option>
                                ))}
                            </Select>
                        </FormField>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                        <FormField label="Name" required>
                            <Input value={form.name} onChange={e => setForm(p => ({ ...p, name: e.target.value }))} placeholder="Full name" required />
                        </FormField>
                        <FormField label="Position" required>
                            <Input value={form.position} onChange={e => setForm(p => ({ ...p, position: e.target.value }))} placeholder="e.g. Ketua" required />
                        </FormField>
                    </div>
                    <FormField label="Order">
                        <Input type="number" value={form.order} onChange={e => setForm(p => ({ ...p, order: +e.target.value }))} min={0} />
                    </FormField>
                    <ImageUpload currentImage={editing?.photo || undefined} onChange={setPhotoFile} label="Photo" />
                    <SubmitButton loading={saving} />
                </form>
            </Modal>

            <ConfirmDialog
                isOpen={!!deleteTarget}
                onClose={() => setDeleteTarget(null)}
                onConfirm={handleDelete}
                loading={deleting}
                title="Remove from Structure"
                message={`Remove "${deleteTarget?.name}" from organization structure?`}
            />
        </div>
    );
}