import React, {FormEvent, useEffect, useState} from 'react';
import {Link, usePage} from '@inertiajs/react';
import AppPageHeader from '@/components/AppPageHeader';
import MainLayout from '@/layouts/MainLayout';
import Modal from '@/components/ui/modal/Modal';
import {makeGetRequest, makePostRequest, makePutRequest} from '@/lib/request';
import {notify} from '@/lib/notify';
import ListingPagination from '@/components/ListingPagination';

const emptyForm = {client_matter_id: '', court: '', case_number: '', case_title: '', case_type: '', filing_date: '', status: 'active', notes: ''};

export default function Index({canCreate, canUpdate}: {canCreate: boolean; canUpdate: boolean}): JSX.Element {
    const {auth} = usePage<{auth: {user: any}}>().props;
    const token = auth?.user?.token ?? auth?.user?.api_token;
    const [cases, setCases] = useState<any[]>([]);
    const [matters, setMatters] = useState<any[]>([]);
    const [search, setSearch] = useState('');
    const [status, setStatus] = useState('');
    const [page, setPage] = useState(1);
    const [meta, setMeta] = useState({current_page: 1, last_page: 1, total: 0});
    const [loading, setLoading] = useState(true);
    const [showCreate, setShowCreate] = useState(false);
    const [editingCase, setEditingCase] = useState<any | null>(null);
    const [submitting, setSubmitting] = useState(false);
    const [form, setForm] = useState({...emptyForm});

    async function loadCases() {
        setLoading(true);
        try {
            const params = new URLSearchParams();
            if (search) params.set('search', search);
            if (status) params.set('status', status);
            params.set('page', String(page));
            const response = await makeGetRequest(`/api/litigation?${params}`, {token});
            const payload = response.data?.result ?? response.data ?? {};
            const rows = payload.data ?? payload ?? [];
            setCases(rows);
            setMeta({
                current_page: payload.current_page ?? page,
                last_page: payload.last_page ?? 1,
                total: payload.total ?? rows.length,
            });
        } catch (error: any) {
            notify.toastErrorMessage(error?.response?.data?.message || 'Unable to load litigation cases');
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => { const timer = setTimeout(loadCases, 250); return () => clearTimeout(timer); }, [search, status, page]);
    useEffect(() => {
        makeGetRequest('/api/matters?status=active&per_page=100', {token}).then(response => {
            const payload = response.data?.result ?? response.data ?? {};
            const availableMatters = payload.data ?? payload ?? [];
            setMatters(availableMatters.filter((matter: any) => matter.status === 'active'));
        }).catch(() => setMatters([]));
    }, [token]);

    async function submit(event: FormEvent) {
        event.preventDefault();
        setSubmitting(true);
        try {
            if (editingCase) {
                const {client_matter_id: _clientMatterId, ...payload} = form;
                await makePutRequest(`/api/litigation/${editingCase.id}`, {...payload, filing_date: payload.filing_date || null}, {token});
                notify.toastSuccessMessage('Litigation case updated');
                setShowCreate(false);
                setEditingCase(null);
                setForm({...emptyForm});
                await loadCases();
            } else {
                const response = await makePostRequest('/api/litigation', {...form, client_matter_id: Number(form.client_matter_id)}, {token});
                const created = response.data?.result ?? response.data;
                notify.toastSuccessMessage('Litigation case created');
                window.location.href = `/litigation/${created.id}`;
            }
        } catch (error: any) {
            notify.toastErrorMessage(error?.response?.data?.message || `Unable to ${editingCase ? 'update' : 'create'} litigation case`);
        } finally {
            setSubmitting(false);
        }
    }

    function openCreateModal() {
        setEditingCase(null);
        setForm({...emptyForm});
        setShowCreate(true);
    }

    function openEditModal(item: any) {
        setEditingCase(item);
        setForm({
            client_matter_id: String(item.client_matter_id ?? ''),
            court: item.court ?? '',
            case_number: item.case_number ?? '',
            case_title: item.case_title ?? '',
            case_type: item.case_type ?? '',
            filing_date: item.filing_date ? String(item.filing_date).slice(0, 10) : '',
            status: item.status ?? 'active',
            notes: item.notes ?? '',
        });
        setShowCreate(true);
    }

    function closeFormModal() {
        if (submitting) return;
        setShowCreate(false);
        setEditingCase(null);
        setForm({...emptyForm});
    }

    return <MainLayout>
        <AppPageHeader title="Litigation Management" subtitle="Practice" />
        <div className="box">
            <div className="box-header flex flex-wrap items-center justify-between gap-3">
                <div><h5 className="box-title">Litigation cases</h5><p className="text-sm text-gray-500">Structured court records linked to existing matters.</p></div>
                {canCreate ? <button type="button" className="ti-btn ti-btn-primary" onClick={openCreateModal}><i className="fa fa-plus me-2" />New litigation record</button> : null}
            </div>
            <div className="box-body">
                <div className="mb-5 grid grid-cols-1 gap-3 md:grid-cols-3">
                    <input className="ti-form-input" placeholder="Search case, court, title, or matter" value={search} onChange={event => { setPage(1); setSearch(event.target.value); }} />
                    <select className="ti-form-input" value={status} onChange={event => { setPage(1); setStatus(event.target.value); }}><option value="">All statuses</option>{['pre_filing', 'active', 'stayed', 'appealed', 'concluded', 'closed'].map(value => <option key={value} value={value}>{label(value)}</option>)}</select>
                </div>
                <div className="rounded-sm overflow-auto todo-table w-full"><table className="ti-custom-table ti-custom-table-head whitespace-nowrap w-full"><thead className="bg-gray-100 dark:bg-bodybg"><tr><th>Case</th><th>Matter / client</th><th>Court</th><th>Type</th><th>Status</th><th className="!text-end">Actions</th></tr></thead><tbody>
                    {loading ? <tr><td colSpan={6} className="text-center py-8">Loading…</td></tr> : cases.length === 0 ? <tr><td colSpan={6} className="text-center py-8 text-gray-500">No litigation records found.</td></tr> : cases.map(item => <tr key={item.id}><td><Link href={`/litigation/${item.id}`} className="block w-64 text-indigo-600 hover:underline"><div className="truncate font-semibold">{item.case_title}</div><div className="truncate text-xs text-gray-500">{item.case_number}</div></Link></td><td><div>{item.matter?.reference_number}</div><div className="text-xs text-gray-500">{item.matter?.client?.name}</div></td><td>{item.court}</td><td>{item.case_type}</td><td><span className="badge bg-primary/10 text-primary">{label(item.status)}</span></td><td className="text-end">{canUpdate ? <button type="button" className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 transition hover:bg-gray-100 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100" onClick={() => openEditModal(item)} title="Edit litigation" aria-label="Edit litigation"><i className="fa fa-pencil" /></button> : '—'}</td></tr>)}
                </tbody></table></div>
                <ListingPagination currentPage={meta.current_page} lastPage={meta.last_page} total={meta.total} itemCount={cases.length} onPageChange={setPage} />
            </div>
        </div>
        <Modal
            open={showCreate}
            onClose={closeFormModal}
            title={editingCase ? 'Edit litigation record' : 'New litigation record'}
            maxWidthClassName="max-w-3xl"
            bodyClassName="max-h-[75vh] overflow-y-auto"
            footer={<><button type="button" className="ti-btn ti-border" onClick={closeFormModal} disabled={submitting}>Cancel</button><button type="submit" form="litigation-case-form" className="ti-btn ti-btn-primary" disabled={submitting}>{submitting ? 'Saving...' : editingCase ? 'Update record' : 'Create record'}</button></>}
        >
            <form id="litigation-case-form" className="space-y-5" onSubmit={submit}>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div className="sm:col-span-2"><Field label="Existing matter">{editingCase ? <div className="rounded-lg border bg-gray-50 px-3 py-2 dark:bg-bodybg">{editingCase.matter?.reference_number} — {editingCase.matter?.client?.name}</div> : <select required className="ti-form-input" value={form.client_matter_id} onChange={event => setForm({...form, client_matter_id: event.target.value})}><option value="">Select matter</option>{matters.map(matter => <option key={matter.id} value={matter.id}>{matter.reference_number} — {matter.client?.name ?? matter.matter_type}</option>)}</select>}</Field></div>
                    <Field label="Court or tribunal"><input required className="ti-form-input" value={form.court} onChange={event => setForm({...form, court: event.target.value})} /></Field>
                    <Field label="Case number"><input required className="ti-form-input" value={form.case_number} onChange={event => setForm({...form, case_number: event.target.value})} /></Field>
                    <div className="sm:col-span-2"><Field label="Case title"><input required className="ti-form-input" value={form.case_title} onChange={event => setForm({...form, case_title: event.target.value})} /></Field></div>
                    <Field label="Case type"><input required className="ti-form-input" value={form.case_type} onChange={event => setForm({...form, case_type: event.target.value})} /></Field>
                    <Field label="Filing date"><input type="date" className="ti-form-input" value={form.filing_date} onChange={event => setForm({...form, filing_date: event.target.value})} /></Field>
                    <Field label="Status"><select className="ti-form-input" value={form.status} onChange={event => setForm({...form, status: event.target.value})}>{['pre_filing', 'active', 'stayed', 'appealed', 'concluded', 'closed'].map(value => <option key={value} value={value}>{label(value)}</option>)}</select></Field>
                    <div className="sm:col-span-2"><Field label="Notes"><textarea rows={3} className="ti-form-input" value={form.notes} onChange={event => setForm({...form, notes: event.target.value})} /></Field></div>
                </div>
            </form>
        </Modal>
    </MainLayout>;
}

function Field({label: title, children}: {label: string; children: React.ReactNode}): JSX.Element { return <label className="block"><span className="ti-form-label">{title}</span>{children}</label>; }
function label(value: string): string { return value.replaceAll('_', ' ').replace(/\b\w/g, letter => letter.toUpperCase()); }