'use client';

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

const TYPE_LABELS: Record<TbmType, string> = { permanent: 'Permanent', reviewer: 'Reviewer', initiation: 'Initiation' };
const TYPE_COLORS: Record<TbmType, string> = { permanent: 'bg-blue-100 text-blue-700', reviewer: 'bg-green-100 text-green-700', initiation: 'bg-purple-100 text-purple-700' };
const EMPTY_FORM = { region_id: '', type: 'permanent' as TbmType, is_active: true };

export default function TbmsPage() {
    const [items, setItems] = useState<Tbm[]>([]);
    const [regions, setRegions] = useState<Region[]>([]);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<Tbm | null>(null);
    const [deleteTarget, setDeleteTarget] = useState<Tbm | null>(null);
    const [deleting, setDeleting] = useState(false);
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');
    const [filterRegion, setFilterRegion] = useState('');
    const [filterType, setFilterType] = useState('');
    const [form, setForm] = useState({ ...EMPTY_FORM, tbm: '' });
    const [formItems, setFormItems] = useState(['']);

    const fetchData = async () => {
        try {
            const params: any = {};
            if (filterRegion) params.region_id = +filterRegion;
            if (filterType) params.type = filterType;
            const [tRes, rRes] = await Promise.all([tbmApi.getAll(params), regionApi.getAll()]);
            setItems(tRes.data);
            setRegions(rRes.data);
        } finally { setLoading(false); }
    };
    useEffect(() => { fetchData(); }, [filterRegion, filterType]);

    const openCreate = () => {
        setEditing(null);
        setForm({ ...EMPTY_FORM, tbm: '' });
        setFormItems(['']);
        setError('');
        setModalOpen(true);
    };
    const openEdit = (t: Tbm) => {
        const editForm = { region_id: String(t.region_id), tbm: t.tbm, type: t.type, is_active: t.is_active };
        setEditing(t);
        setForm(editForm);
        setFormItems([t.tbm]);
        setError('');
        setModalOpen(true);
    };

    const addFormItem = () => setFormItems(prev => [...prev, '']);
    const removeFormItem = (index: number) => setFormItems(prev => prev.filter((_, idx) => idx !== index));
    const updateFormItem = (index: number, value: string) => {
        setFormItems(prev => prev.map((item, idx) => idx === index ? value : item));
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault(); setSaving(true); setError('');
        try {
            if (editing) {
                const data = {
                    region_id: +form.region_id,
                    tbm: form.tbm,
                    type: form.type,
                    is_active: form.is_active,
                };
                await tbmApi.update(editing.id, data);
            } else {
                const validItems = formItems
                    .map(item => item.trim())
                    .filter(Boolean);

                if (!form.region_id) {
                    throw new Error('Pilih region terlebih dahulu.');
                }

                if (!validItems.length) {
                    throw new Error('Tambahkan minimal satu nama TBM.');
                }

                await Promise.all(validItems.map(item => tbmApi.create({
                    region_id: +form.region_id,
                    tbm: item,
                    type: form.type,
                    is_active: form.is_active,
                })));
            }

            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 tbmApi.delete(deleteTarget.id); setDeleteTarget(null); fetchData(); } finally { setDeleting(false); }
    };

    if (loading) return <LoadingSpinner />;

    return (
        <div className="space-y-6">
            <PageHeader title="TBMs" subtitle={`${items.length} TBMs found`} action={<AddButton onClick={openCreate} />} />

            {/* Filters */}
            <div className="bg-white rounded-xl shadow-sm p-4 flex gap-4 flex-wrap">
                <Select value={filterRegion} onChange={e => setFilterRegion(e.target.value)} className="w-48">
                    <option value="">All Regions</option>
                    {regions.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
                </Select>
                <Select value={filterType} onChange={e => setFilterType(e.target.value)} className="w-48">
                    <option value="">All Types</option>
                    <option value="permanent">Permanent</option>
                    <option value="reviewer">Reviewer</option>
                    <option value="initiation">Initiation</option>
                </Select>
            </div>

            {items.length === 0 ? <div className="bg-white rounded-xl shadow-sm"><EmptyState /></div> : (
                <Table headers={['#', 'TBM', 'Region', 'Type', 'Status', 'Actions']}>
                    {items.map((t, i) => (
                        <TableRow key={t.id}>
                            <TableCell>{i + 1}</TableCell>
                            <TableCell><span className="font-medium">{t.tbm}</span></TableCell>
                            <TableCell>{t.region?.name || '-'}</TableCell>
                            <TableCell>
                                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${TYPE_COLORS[t.type]}`}>
                                    {TYPE_LABELS[t.type]}
                                </span>
                            </TableCell>
                            <TableCell><StatusBadge active={t.is_active} /></TableCell>
                            <TableCell>
                                <div className="flex gap-1">
                                    <ActionButton variant="edit" onClick={() => openEdit(t)} />
                                    <ActionButton variant="delete" onClick={() => setDeleteTarget(t)} />
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </Table>
            )}

            <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} title={editing ? 'Edit TBM' : 'Add TBM'} size="lg">
                <form onSubmit={handleSubmit} className="space-y-4">
                    <ErrorAlert message={error} />

                    {editing ? (
                        <>
                            <FormField label="Region" required>
                                <Select value={form.region_id} onChange={e => setForm(p => ({ ...p, region_id: e.target.value }))} required>
                                    <option value="">Select Region</option>
                                    {regions.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
                                </Select>
                            </FormField>
                            <FormField label="TBM Number / Name" required>
                                <input
                                    value={form.tbm}
                                    onChange={e => setForm(p => ({ ...p, tbm: e.target.value }))}
                                    placeholder="e.g. TBM-001"
                                    required
                                    className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-main placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent transition-all"
                                />
                            </FormField>
                            <FormField label="Type" required>
                                <Select value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value as TbmType }))}>
                                    <option value="permanent">Permanent</option>
                                    <option value="reviewer">Reviewer</option>
                                    <option value="initiation">Initiation</option>
                                </Select>
                            </FormField>
                            <Toggle checked={form.is_active} onChange={v => setForm(p => ({ ...p, is_active: v }))} label="Active" />
                        </>
                    ) : (
                        <>
                            <FormField label="Region" required>
                                <Select value={form.region_id} onChange={e => setForm(p => ({ ...p, region_id: e.target.value }))} required>
                                    <option value="">Select Region</option>
                                    {regions.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}
                                </Select>
                            </FormField>

                            <div>
                                <label className="block text-sm font-medium text-main mb-2">TBM Number / Name <span className="text-red-500">*</span></label>
                                <div className="space-y-2">
                                    {formItems.map((item, index) => (
                                        <div key={index} 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">{index + 1}</span>
                                            <input
                                                value={item}
                                                onChange={e => updateFormItem(index, e.target.value)}
                                                placeholder={`e.g. TBM-00${index + 1}`}
                                                required
                                                className="flex-1 w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-main placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent transition-all"
                                            />
                                            {formItems.length > 1 && (
                                                <button
                                                    type="button"
                                                    onClick={() => removeFormItem(index)}
                                                    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={addFormItem} className="mt-2 flex items-center gap-1.5 text-sm text-brand hover:text-orange-600">
                                    <PlusIcon className="w-4 h-4" /> Add TBM
                                </button>
                            </div>

                            <FormField label="Type" required>
                                <Select value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value as TbmType }))}>
                                    <option value="permanent">Permanent</option>
                                    <option value="reviewer">Reviewer</option>
                                    <option value="initiation">Initiation</option>
                                </Select>
                            </FormField>

                            <Toggle checked={form.is_active} onChange={v => setForm(p => ({ ...p, is_active: v }))} label="Active" />
                        </>
                    )}

                    <SubmitButton loading={saving} />
                </form>
            </Modal>

            <ConfirmDialog
                isOpen={!!deleteTarget}
                onClose={() => setDeleteTarget(null)}
                onConfirm={handleDelete}
                loading={deleting}
                title="Delete TBM"
                message={`Delete TBM "${deleteTarget?.tbm}"?`}
            />
        </div>
    );
}