import React, { useEffect, useState } from 'react';
import { usePage } from '@inertiajs/react';
import axios from 'axios';
import MainLayout from '@/layouts/MainLayout';
import AppPageHeader from '@/components/AppPageHeader';
import { makeGetRequest, makePostRequest, makePutRequest } from '@/lib/request';
import { notify } from '@/lib/notify';

/* ─── types ──────────────────────────────────────────────── */
interface Matter { id: number; reference_number?: string; name?: string; }
interface FilingDocument { id: number; document_id: number; document?: { id: number; title: string }; }
interface Filing {
    id: number; provider: string; jurisdiction: string; status: string;
    filing_fee: string | number; notes?: string; confirmation_number?: string;
    rejection_reason?: string; submitted_at?: string; accepted_at?: string;
    court_stamped_document_path?: string; matter?: Matter;
    created_by?: { name: string }; filing_documents?: FilingDocument[]; created_at: string;
}
interface Doc { id: number; title: string; }

/* ─── helpers ────────────────────────────────────────────── */
const STATUS_COLORS: Record<string, string> = {
    draft: 'bg-gray-100 text-gray-700',
    pending_submission: 'bg-yellow-100 text-yellow-700',
    submitted: 'bg-blue-100 text-blue-700',
    pending_review: 'bg-purple-100 text-purple-700',
    accepted: 'bg-green-100 text-green-700',
    rejected: 'bg-red-100 text-red-700',
};
const ALL_STATUSES = ['pending_submission','submitted','pending_review','accepted','rejected'];
const statusLabel = (s: string) => s.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
const fmt = (d?: string) => d ? new Date(d).toLocaleDateString() : '—';

export default function Efiling(): JSX.Element {
    const { auth } = usePage<{ auth: { user: any } }>().props;
    const token: string | undefined = auth?.user?.token ?? auth?.user?.api_token ?? undefined;
    const authHeaders = token ? { Authorization: `Bearer ${token}` } : {};

    /* list */
    const [filings, setFilings] = useState<Filing[]>([]);
    const [loading, setLoading] = useState(false);
    const [query, setQuery] = useState('');
    const [statusFilter, setStatusFilter] = useState('');
    const [page, setPage] = useState(1);
    const [meta, setMeta] = useState<any>(null);

    /* shared data */
    const [matters, setMatters] = useState<Matter[]>([]);
    const [documents, setDocuments] = useState<Doc[]>([]);

    /* detail modal */
    const [selected, setSelected] = useState<Filing | null>(null);
    const [detailDocQuery, setDetailDocQuery] = useState('');
    const [attachingDocId, setAttachingDocId] = useState<number | null>(null);
    const [attachLoading, setAttachLoading] = useState(false);

    /* status modal */
    const [statusModal, setStatusModal] = useState<Filing | null>(null);
    const [newStatus, setNewStatus] = useState('');
    const [confirmationNumber, setConfirmationNumber] = useState('');
    const [rejectionReason, setRejectionReason] = useState('');
    const [statusSubmitting, setStatusSubmitting] = useState(false);

    /* create modal */
    const [createOpen, setCreateOpen] = useState(false);
    const [creating, setCreating] = useState(false);
    const [cForm, setCForm] = useState({ client_matter_id: '', provider: '', jurisdiction: '', filing_fee: '', notes: '' });
    const [cErrors, setCErrors] = useState<Record<string, string[]>>({});

    /* edit modal */
    const [editOpen, setEditOpen] = useState(false);
    const [editing, setEditing] = useState(false);
    const [editFiling, setEditFiling] = useState<Filing | null>(null);
    const [eForm, setEForm] = useState({ provider: '', jurisdiction: '', filing_fee: '', notes: '' });

    /* ── bootstrap ── */
    useEffect(() => { fetchMatters(); fetchDocuments(); }, []);
    useEffect(() => { fetchFilings(); }, [page, query, statusFilter]);
    useEffect(() => { const t = setTimeout(() => setPage(1), 300); return () => clearTimeout(t); }, [query, statusFilter]);

    async function fetchMatters() {
        try {
            const res = await makeGetRequest('/api/matters?per_page=200', { token });
            const p = res.data?.result ?? res.data ?? {};
            setMatters(Array.isArray(p?.data ?? p) ? (p?.data ?? p) : []);
        } catch { /* silent */ }
    }

    async function fetchDocuments() {
        try {
            const res = await makeGetRequest('/api/documents?per_page=200', { token });
            const p = res.data?.result ?? res.data ?? {};
            setDocuments(Array.isArray(p?.data ?? p) ? (p?.data ?? p) : []);
        } catch { /* silent */ }
    }

    async function fetchFilings() {
        setLoading(true);
        try {
            const params = new URLSearchParams({ page: String(page) });
            if (query) params.append('search', query);
            if (statusFilter) params.append('status', statusFilter);
            const res = await makeGetRequest(`/api/efilings?${params}`, { token });
            const p = res.data?.result ?? res.data ?? {};
            const list = p?.data ?? p ?? [];
            setFilings(Array.isArray(list) ? list : []);
            setMeta(p?.meta ?? { current_page: p.current_page ?? page, last_page: p.last_page ?? 1, total: p.total ?? 0 });
        } catch (e) { console.warn('Failed to fetch filings', e); }
        finally { setLoading(false); }
    }

    const gotoPage = (p: number) => {
        if (p < 1 || p > (meta?.last_page ?? p)) return;
        setPage(p);
    };

    /* ── detail modal ── */
    const openDetail = async (f: Filing) => {
        try {
            const res = await makeGetRequest(`/api/efilings/${f.id}`, { token });
            setSelected(res.data?.result ?? res.data ?? f);
            setDetailDocQuery(''); setAttachingDocId(null);
        } catch (e: any) { notify.toastErrorMessage(e?.response?.data?.message ?? 'Failed to load filing'); }
    };
    const refreshSelected = () => selected && openDetail(selected);
    const closeDetail = () => { setSelected(null); setDetailDocQuery(''); setAttachingDocId(null); };

    const attachDocument = async () => {
        if (!selected || !attachingDocId) return;
        setAttachLoading(true);
        try {
            await makePostRequest(`/api/efilings/${selected.id}/documents`, { document_id: attachingDocId }, { token });
            notify.toastSuccessMessage('Document attached');
            setAttachingDocId(null); setDetailDocQuery('');
            refreshSelected();
        } catch (e: any) { notify.toastErrorMessage(e?.response?.data?.message ?? 'Failed to attach document'); }
        finally { setAttachLoading(false); }
    };

    const detachDocument = async (docId: number) => {
        if (!selected || !confirm('Remove this document from the filing?')) return;
        try {
            await axios.delete(`/api/efilings/${selected.id}/documents`, { data: { document_id: docId }, headers: authHeaders });
            notify.toastSuccessMessage('Document removed');
            refreshSelected();
        } catch (e: any) { notify.toastErrorMessage(e?.response?.data?.message ?? 'Failed to remove document'); }
    };

    const submitFiling = async (f: Filing) => {
        if (!confirm(`Submit filing #${f.id}? This changes its status to pending submission.`)) return;
        try {
            await makePostRequest(`/api/efilings/${f.id}/submit`, {}, { token });
            notify.toastSuccessMessage('Filing submitted');
            fetchFilings();
            if (selected?.id === f.id) refreshSelected();
        } catch (e: any) { notify.toastErrorMessage(e?.response?.data?.message ?? 'Submission failed'); }
    };

    const deleteFiling = async (f: Filing) => {
        if (!confirm(`Delete filing #${f.id}? This cannot be undone.`)) return;
        try {
            await axios.delete(`/api/efilings/${f.id}`, { headers: authHeaders });
            notify.toastSuccessMessage('Filing deleted');
            fetchFilings();
            if (selected?.id === f.id) closeDetail();
        } catch (e: any) { notify.toastErrorMessage(e?.response?.data?.message ?? 'Failed to delete filing'); }
    };

    /* ── status modal ── */
    const openStatusModal = (f: Filing) => { setStatusModal(f); setNewStatus(f.status); setConfirmationNumber(''); setRejectionReason(''); };
    const closeStatusModal = () => setStatusModal(null);
    const saveStatus = async () => {
        if (!statusModal) return;
        setStatusSubmitting(true);
        try {
            await axios.patch(`/api/efilings/${statusModal.id}/status`, {
                status: newStatus,
                confirmation_number: confirmationNumber || undefined,
                rejection_reason: rejectionReason || undefined,
            }, { headers: authHeaders });
            notify.toastSuccessMessage('Status updated');
            closeStatusModal(); fetchFilings();
            if (selected?.id === statusModal.id) refreshSelected();
        } catch (e: any) { notify.toastErrorMessage(e?.response?.data?.message ?? 'Failed to update status'); }
        finally { setStatusSubmitting(false); }
    };

    /* ── create modal ── */
    const openCreate = () => { setCForm({ client_matter_id: '', provider: '', jurisdiction: '', filing_fee: '', notes: '' }); setCErrors({}); setCreateOpen(true); };
    const submitCreate = async (e: React.FormEvent) => {
        e.preventDefault(); setCErrors({}); setCreating(true);
        try {
            await makePostRequest('/api/efilings', {
                client_matter_id: Number(cForm.client_matter_id),
                provider: cForm.provider, jurisdiction: cForm.jurisdiction,
                filing_fee: cForm.filing_fee ? Number(cForm.filing_fee) : undefined,
                notes: cForm.notes || undefined,
            }, { token });
            notify.toastSuccessMessage('Filing created');
            setCreateOpen(false); fetchFilings();
        } catch (err: any) {
            const resp = err?.response?.data;
            if (resp?.errors) setCErrors(resp.errors);
            else notify.toastErrorMessage(resp?.message ?? 'Failed to create filing');
        } finally { setCreating(false); }
    };

    /* ── edit modal ── */
    const openEdit = (f: Filing) => {
        setEditFiling(f); setEForm({ provider: f.provider, jurisdiction: f.jurisdiction, filing_fee: String(f.filing_fee), notes: f.notes ?? '' }); setEditOpen(true);
    };
    const submitEdit = async (e: React.FormEvent) => {
        e.preventDefault(); if (!editFiling) return; setEditing(true);
        try {
            await makePutRequest(`/api/efilings/${editFiling.id}`, {
                provider: eForm.provider, jurisdiction: eForm.jurisdiction,
                filing_fee: eForm.filing_fee ? Number(eForm.filing_fee) : undefined,
                notes: eForm.notes || undefined,
            }, { token });
            notify.toastSuccessMessage('Filing updated');
            setEditOpen(false); fetchFilings();
            if (selected?.id === editFiling.id) refreshSelected();
        } catch (e: any) { notify.toastErrorMessage(e?.response?.data?.message ?? 'Failed to update filing'); }
        finally { setEditing(false); }
    };

    /* ── derived ── */
    const attachedDocIds = new Set((selected?.filing_documents ?? []).map(fd => fd.document_id));
    const filteredDocs = documents.filter(d => !attachedDocIds.has(d.id) && (!detailDocQuery || d.title.toLowerCase().includes(detailDocQuery.toLowerCase())));

    /* ────────────────────────── RENDER ────────────────────── */
    return (
        <div className="grid grid-cols-12 gap-6">
            <div className="col-span-12">
                <div className="box">
                    <div className="box-body">

                        {/* toolbar */}
                        <div className="flex flex-wrap items-center justify-between gap-3 mb-5">
                            <div className="flex items-center gap-3 flex-wrap">
                                <div className="relative">
                                    <div className="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-4"><i className="ti ti-search"></i></div>
                                    <input type="text" className="p-2 pe-10 ti-form-input" placeholder="Search filings" value={query} onChange={e => setQuery(e.target.value)} />
                                </div>
                                {/*<select className="ti-form-select" value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>*/}
                                {/*    <option value="">All statuses</option>*/}
                                {/*    {['draft',...ALL_STATUSES].map(s => <option key={s} value={s}>{statusLabel(s)}</option>)}*/}
                                {/*</select>*/}
                            </div>
                            <button type="button" className="ti-btn ti-btn-primary py-2 px-3 whitespace-nowrap" onClick={openCreate}>
                                <i className="ri ri-add-line mr-2"></i> New Filing
                            </button>
                        </div>

                        {/* table */}
                        <div className="rounded-sm overflow-auto w-full">
                            <table className="ti-custom-table w-full">
                                <thead className="bg-gray-100">
                                    <tr>
                                        <th>Matter</th>
                                        <th>Provider</th>
                                        <th>Jurisdiction</th>
                                        <th>Status</th>
                                        <th>Fee</th>
                                        <th>Created</th>
                                        <th className="!text-end">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {loading
                                        ? <tr><td colSpan={8} className="text-center py-8">Loading…</td></tr>
                                        : filings.length === 0
                                            ? <tr><td colSpan={8} className="text-center py-8">No filings found.</td></tr>
                                            : filings.map(f => (
                                                <tr key={f.id}>
                                                    <td>{f.matter?.reference_number ?? f.matter?.name ?? '—'}</td>
                                                    <td>{f.provider}</td>
                                                    <td>{f.jurisdiction}</td>
                                                    <td>
                                                        <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${STATUS_COLORS[f.status] ?? 'bg-gray-100 text-gray-700'}`}>
                                                            {statusLabel(f.status)}
                                                        </span>
                                                    </td>
                                                    <td>${Number(f.filing_fee).toFixed(2)}</td>
                                                    <td>{fmt(f.created_at)}</td>
                                                    <td className="text-end space-x-1">
                                                        <button onClick={() => openDetail(f)} className="w-8 h-8 ti-btn rounded-full p-0 ti-btn-soft-primary" title="View"><i className="ti ti-eye"></i></button>
                                                        {['draft','rejected'].includes(f.status) && (
                                                            <button onClick={() => openEdit(f)} className="w-8 h-8 ti-btn rounded-full p-0 ti-btn-soft-secondary" title="Edit"><i className="ti ti-pencil"></i></button>
                                                        )}
                                                        {f.status === 'draft' && (
                                                            <button onClick={() => submitFiling(f)} className="w-8 h-8 ti-btn rounded-full p-0 ti-btn-soft-success" title="Submit"><i className="ti ti-send"></i></button>
                                                        )}
                                                        <button onClick={() => openStatusModal(f)} className="w-8 h-8 ti-btn rounded-full p-0 ti-btn-soft-warning" title="Update status"><i className="ti ti-refresh"></i></button>
                                                        {['draft','rejected'].includes(f.status) && (
                                                            <button onClick={() => deleteFiling(f)} className="w-8 h-8 ti-btn rounded-full p-0 ti-btn-soft-danger" title="Delete"><i className="ti ti-trash"></i></button>
                                                        )}
                                                    </td>
                                                </tr>
                                            ))
                                    }
                                </tbody>
                            </table>
                        </div>

                        {/* pagination */}
                        <div className="flex items-center justify-between mt-4 flex-wrap gap-2">
                            <div className="text-sm text-gray-600">Showing {filings.length} of {meta?.total ?? 0} filings</div>
                            <div className="flex items-center gap-2">
                                <button onClick={() => gotoPage((meta?.current_page ?? 1) - 1)} disabled={(meta?.current_page ?? 1) <= 1} className="px-2 py-1 border rounded disabled:opacity-40">Prev</button>
                                {Array.from({ length: meta?.last_page ?? 1 }).map((_, i) => {
                                    const p = i + 1;
                                    return <button key={p} onClick={() => gotoPage(p)} className={`px-2 py-1 border rounded ${p === (meta?.current_page ?? page) ? 'bg-indigo-600 text-white' : ''}`}>{p}</button>;
                                })}
                                <button onClick={() => gotoPage((meta?.current_page ?? 1) + 1)} disabled={(meta?.current_page ?? 1) >= (meta?.last_page ?? 1)} className="px-2 py-1 border rounded disabled:opacity-40">Next</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* ══════════ DETAIL MODAL ══════════ */}
            {selected && (
                <div role="dialog" aria-modal="true" className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
                    <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col">
                        {/* header */}
                        <div className="flex items-start justify-between px-5 py-4 border-b shrink-0">
                            <div>
                                <h3 className="text-base font-semibold">
                                    Filing #{selected.id}
                                    <span className={`ml-2 text-xs font-medium px-2 py-0.5 rounded-full ${STATUS_COLORS[selected.status] ?? ''}`}>{statusLabel(selected.status)}</span>
                                </h3>
                                <p className="text-xs text-gray-500 mt-0.5">{selected.matter?.reference_number ?? selected.matter?.name ?? '—'} &bull; {selected.provider} &bull; {selected.jurisdiction}</p>
                            </div>
                            <button onClick={closeDetail} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded"><i className="ri ri-close-line text-lg"></i></button>
                        </div>
                        {/* body */}
                        <div className="overflow-auto px-5 py-4 space-y-5">
                            {/* info grid */}
                            <div className="grid grid-cols-2 gap-4 text-sm">
                                <div><span className="text-gray-500">Filing Fee</span><p className="font-medium">${Number(selected.filing_fee).toFixed(2)}</p></div>
                                <div><span className="text-gray-500">Submitted At</span><p className="font-medium">{fmt(selected.submitted_at)}</p></div>
                                <div><span className="text-gray-500">Created By</span><p className="font-medium">{selected.created_by?.name ?? '—'}</p></div>
                                <div><span className="text-gray-500">Created</span><p className="font-medium">{fmt(selected.created_at)}</p></div>
                                {selected.status === 'accepted' && <>
                                    <div><span className="text-gray-500">Accepted At</span><p className="font-medium">{fmt(selected.accepted_at)}</p></div>
                                    <div><span className="text-gray-500">Confirmation #</span><p className="font-medium">{selected.confirmation_number ?? '—'}</p></div>
                                </>}
                                {selected.status === 'rejected' && (
                                    <div className="col-span-2"><span className="text-gray-500">Rejection Reason</span><p className="font-medium text-red-600">{selected.rejection_reason ?? '—'}</p></div>
                                )}
                                {selected.notes && (
                                    <div className="col-span-2"><span className="text-gray-500">Notes</span><p className="font-medium">{selected.notes}</p></div>
                                )}
                            </div>

                            {/* attached documents */}
                            <div>
                                <h4 className="font-medium mb-2">Attached Documents ({(selected.filing_documents ?? []).length})</h4>
                                {(selected.filing_documents ?? []).length === 0
                                    ? <p className="text-sm text-gray-500">No documents attached yet.</p>
                                    : (
                                        <ul className="divide-y border rounded">
                                            {(selected.filing_documents ?? []).map(fd => (
                                                <li key={fd.id} className="flex items-center justify-between p-3">
                                                    <span className="text-sm">{fd.document?.title ?? `Document #${fd.document_id}`}</span>
                                                    {['draft','rejected'].includes(selected.status) && (
                                                        <button onClick={() => detachDocument(fd.document_id)} className="ti-btn ti-btn-sm ti-btn-soft-danger" title="Remove"><i className="ti ti-x"></i></button>
                                                    )}
                                                </li>
                                            ))}
                                        </ul>
                                    )
                                }
                            </div>

                            {/* attach document */}
                            {['draft','rejected'].includes(selected.status) && (
                                <div className="border-t pt-4">
                                    <h4 className="font-medium mb-2">Attach a Document</h4>
                                    <div className="flex gap-2">
                                        <div className="flex-1 relative">
                                            <input type="text"
                                                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                                placeholder="Search documents…" value={detailDocQuery}
                                                onChange={e => { setDetailDocQuery(e.target.value); setAttachingDocId(null); }}
                                            />
                                            {detailDocQuery && filteredDocs.length > 0 && (
                                                <ul className="absolute z-10 mt-1 w-full max-h-40 overflow-auto border rounded shadow-md bg-white">
                                                    {filteredDocs.map(d => (
                                                        <li key={d.id} className={`p-2 cursor-pointer hover:bg-gray-50 text-sm ${attachingDocId === d.id ? 'bg-indigo-50 border-l-2 border-indigo-500' : ''}`}
                                                            onClick={() => { setAttachingDocId(d.id); setDetailDocQuery(d.title); }}>
                                                            {d.title}
                                                        </li>
                                                    ))}
                                                </ul>
                                            )}
                                        </div>
                                        <button onClick={attachDocument} disabled={!attachingDocId || attachLoading} className="ti-btn ti-btn-primary disabled:opacity-60 whitespace-nowrap">
                                            {attachLoading
                                                ? <span className="animate-spin h-3 w-3 border-2 border-white border-t-transparent rounded-full inline-block"></span>
                                                : <><i className="ti ti-paperclip mr-1"></i>Attach</>}
                                        </button>
                                    </div>
                                </div>
                            )}

                            {/* quick actions */}
                            <div className="border-t pt-4 flex flex-wrap gap-2">
                                {selected.status === 'draft' && (
                                    <button onClick={() => submitFiling(selected)} className="ti-btn ti-btn-success"><i className="ti ti-send mr-1"></i>Submit Filing</button>
                                )}
                                {['draft','rejected'].includes(selected.status) && (
                                    <>
                                        <button onClick={() => { closeDetail(); openEdit(selected); }} className="ti-btn ti-btn-secondary"><i className="ti ti-pencil mr-1"></i>Edit</button>
                                        <button onClick={() => deleteFiling(selected)} className="ti-btn ti-btn-danger"><i className="ti ti-trash mr-1"></i>Delete</button>
                                    </>
                                )}
                                <button onClick={() => { closeDetail(); openStatusModal(selected); }} className="ti-btn ti-btn-warning"><i className="ti ti-refresh mr-1"></i>Update Status</button>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* ══════════ STATUS MODAL ══════════ */}
            {statusModal && (
                <div role="dialog" aria-modal="true" className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
                    <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
                        <div className="flex items-center justify-between px-5 py-4 border-b">
                            <h3 className="text-base font-semibold">Update Status</h3>
                            <button onClick={closeStatusModal} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded"><i className="ri ri-close-line text-lg"></i></button>
                        </div>
                        <div className="px-5 py-4 space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">New Status</label>
                                <select className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" value={newStatus} onChange={e => setNewStatus(e.target.value)}>
                                    {ALL_STATUSES.map(s => <option key={s} value={s}>{statusLabel(s)}</option>)}
                                </select>
                            </div>
                            {newStatus === 'accepted' && (
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Confirmation Number</label>
                                    <input type="text" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        placeholder="Court confirmation #" value={confirmationNumber} onChange={e => setConfirmationNumber(e.target.value)} />
                                </div>
                            )}
                            {newStatus === 'rejected' && (
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Rejection Reason</label>
                                    <textarea className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        rows={3} placeholder="Reason for rejection" value={rejectionReason} onChange={e => setRejectionReason(e.target.value)} />
                                </div>
                            )}
                        </div>
                        <div className="flex items-center justify-end gap-2 px-5 py-4 border-t">
                            <button onClick={closeStatusModal} className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
                            <button onClick={saveStatus} disabled={statusSubmitting}
                                className="flex items-center gap-1.5 px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-60 font-medium">
                                {statusSubmitting ? <><span className="animate-spin h-3 w-3 border-2 border-white border-t-transparent rounded-full inline-block"></span> Saving…</> : 'Save Status'}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* ══════════ CREATE MODAL ══════════ */}
            {createOpen && (
                <div role="dialog" aria-modal="true" className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
                    <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
                        <form onSubmit={submitCreate} noValidate>
                            <div className="flex items-center justify-between px-5 py-4 border-b">
                                <h3 className="text-base font-semibold">New E-Filing</h3>
                                <button type="button" onClick={() => setCreateOpen(false)} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded"><i className="ri ri-close-line text-lg"></i></button>
                            </div>
                            <div className="px-5 py-4 space-y-4">
                                {/* matter */}
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Matter <span className="text-red-500">*</span></label>
                                    <select className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        value={cForm.client_matter_id} onChange={e => setCForm(p => ({ ...p, client_matter_id: e.target.value }))}>
                                        <option value="">Select matter</option>
                                        {matters.map(m => <option key={m.id} value={m.id}>{m.reference_number ?? m.name}</option>)}
                                    </select>
                                    {cErrors.client_matter_id && <p className="text-xs text-red-600 mt-1">{cErrors.client_matter_id[0]}</p>}
                                </div>
                                {/* provider */}
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Provider <span className="text-red-500">*</span></label>
                                    <input type="text" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        placeholder="e.g. Tyler Technologies" value={cForm.provider} onChange={e => setCForm(p => ({ ...p, provider: e.target.value }))} />
                                    {cErrors.provider && <p className="text-xs text-red-600 mt-1">{cErrors.provider[0]}</p>}
                                </div>
                                {/* jurisdiction */}
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Jurisdiction <span className="text-red-500">*</span></label>
                                    <input type="text" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        placeholder="e.g. Superior Court of California" value={cForm.jurisdiction} onChange={e => setCForm(p => ({ ...p, jurisdiction: e.target.value }))} />
                                    {cErrors.jurisdiction && <p className="text-xs text-red-600 mt-1">{cErrors.jurisdiction[0]}</p>}
                                </div>
                                {/* fee */}
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Filing Fee ($)</label>
                                    <input type="number" min="0" step="0.01" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        placeholder="0.00" value={cForm.filing_fee} onChange={e => setCForm(p => ({ ...p, filing_fee: e.target.value }))} />
                                    {cErrors.filing_fee && <p className="text-xs text-red-600 mt-1">{cErrors.filing_fee[0]}</p>}
                                </div>
                                {/* notes */}
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                                    <textarea className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        rows={3} placeholder="Optional notes" value={cForm.notes} onChange={e => setCForm(p => ({ ...p, notes: e.target.value }))} />
                                </div>
                            </div>
                            <div className="flex items-center justify-end gap-2 px-5 py-4 border-t">
                                <button type="button" onClick={() => setCreateOpen(false)} className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
                                <button type="submit" disabled={creating}
                                    className="flex items-center gap-1.5 px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-60 font-medium">
                                    {creating ? <><span className="animate-spin h-3 w-3 border-2 border-white border-t-transparent rounded-full inline-block"></span> Creating…</> : 'Create Filing'}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* ══════════ EDIT MODAL ══════════ */}
            {editOpen && editFiling && (
                <div role="dialog" aria-modal="true" className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4">
                    <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
                        <form onSubmit={submitEdit} noValidate>
                            <div className="flex items-center justify-between px-5 py-4 border-b">
                                <h3 className="text-base font-semibold">Edit Filing #{editFiling.id}</h3>
                                <button type="button" onClick={() => setEditOpen(false)} className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded"><i className="ri ri-close-line text-lg"></i></button>
                            </div>
                            <div className="px-5 py-4 space-y-4">
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Provider</label>
                                    <input type="text" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        value={eForm.provider} onChange={e => setEForm(p => ({ ...p, provider: e.target.value }))} />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Jurisdiction</label>
                                    <input type="text" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        value={eForm.jurisdiction} onChange={e => setEForm(p => ({ ...p, jurisdiction: e.target.value }))} />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Filing Fee ($)</label>
                                    <input type="number" min="0" step="0.01" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        value={eForm.filing_fee} onChange={e => setEForm(p => ({ ...p, filing_fee: e.target.value }))} />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                                    <textarea className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                        rows={3} value={eForm.notes} onChange={e => setEForm(p => ({ ...p, notes: e.target.value }))} />
                                </div>
                            </div>
                            <div className="flex items-center justify-end gap-2 px-5 py-4 border-t">
                                <button type="button" onClick={() => setEditOpen(false)} className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
                                <button type="submit" disabled={editing}
                                    className="flex items-center gap-1.5 px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-60 font-medium">
                                    {editing ? <><span className="animate-spin h-3 w-3 border-2 border-white border-t-transparent rounded-full inline-block"></span> Saving…</> : 'Save Changes'}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}
        </div>
    );
}