import React, {useEffect, useState} from 'react';
import {usePage, Link} from '@inertiajs/react';
import Create from '@/Pages/Matters/Create';
import {makeGetRequest, makeDeleteRequest, makePutRequest, makePostRequest} from '@/lib/request';
import { notify } from '@/lib/notify';

export default function Index(): JSX.Element {
    const { auth } = usePage<{ auth: { user: any } }>().props;
    const token = auth?.user?.token ?? auth?.user?.api_token ?? undefined;

    const [matters, setMatters] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);
    const [page, setPage] = useState(1);
    const [meta, setMeta] = useState<any>(null);
    const [query, setQuery] = useState('');
    const [statusFilter, setStatusFilter] = useState('');
    const [createOpen, setCreateOpen] = useState(false);
    const [selectedMatter, setSelectedMatter] = useState<any | null>(null);
    const [editingStatusFor, setEditingStatusFor] = useState<number | null>(null);
    const [statusSelection, setStatusSelection] = useState<string>('');
    const expectedRoles = ['Lead Attorney', 'Associate', 'Paralegal', 'Co-Counsel', 'Legal Assistant'];

    // Assign modal state
    const [assignOpen, setAssignOpen] = useState<boolean>(false);
    const [assignMatter, setAssignMatter] = useState<any | null>(null);
    const [users, setUsers] = useState<any[]>([]);
    const [userQuery, setUserQuery] = useState<string>('');
    const [userLoading, setUserLoading] = useState<boolean>(false);
    const [filteredUsers, setFilteredUsers] = useState<any[]>([]);
    const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
    const [assignRole, setAssignRole] = useState<string>(expectedRoles[1] || 'Associate');
    const [assignSubmitting, setAssignSubmitting] = useState<boolean>(false);

    useEffect(() => {
        fetchMatters();

        const onCreated = () => fetchMatters();
        window.addEventListener('matter:created', onCreated as EventListener);

        const onUpdated = () => fetchMatters();
        window.addEventListener('matter:updated', onUpdated as EventListener);

        return () => {
            window.removeEventListener('matter:created', onCreated as EventListener);
            window.removeEventListener('matter:updated', onUpdated as EventListener);
        };
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [page, query, statusFilter, token]);

    async function fetchMatters() {
        setLoading(true);
        try {
            const params = new URLSearchParams();
            params.append('page', String(page));
            if (query) params.append('search', query);
            if (statusFilter) params.append('status', statusFilter);

            const url = `/api/matters?${params.toString()}`;
            const res = await makeGetRequest(url, { token });
            const payload = res.data?.result ?? res.data ?? {};
            const list = payload?.data ?? payload ?? [];
            setMatters(Array.isArray(list) ? list : []);

            // normalize meta so we always have current_page/last_page/total
            const normalizedMeta = payload?.meta
                ? payload.meta
                : (payload && payload.data ? {
                    current_page: payload.current_page ?? payload.currentPage ?? page,
                    last_page: payload.last_page ?? payload.lastPage ?? 1,
                    total: payload.total ?? 0,
                    per_page: payload.per_page ?? payload.perPage ?? list.length,
                } : null);

            setMeta(normalizedMeta);

            // if current page has no items and we're beyond page 1, go back one page
            const current = normalizedMeta?.current_page ?? page;
            if (Array.isArray(list) && list.length === 0 && current > 1) {
                setPage(current - 1);
            }
        } catch (e) {
            // eslint-disable-next-line no-console
            console.warn('Failed to fetch matters', e);
        } finally {
            setLoading(false);
        }
    }

    // Debounce: when query/status change reset to page 1
    useEffect(() => {
        const t = setTimeout(() => setPage(1), 300);
        return () => clearTimeout(t);
    }, [query, statusFilter]);

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

    const remove = async (m: any) => {
        if (!confirm('Delete this matter?')) return;
        try {
            await makeDeleteRequest(`/api/matters/${m.id}`, { token });
            notify.toastSuccessMessage('Matter deleted');
            // Refresh list; keep current page but fetchMatters will adjust if needed
            fetchMatters();
        } catch (e: any) {
            notify.toastErrorMessage(e?.response?.data?.message || 'Failed to delete matter');
        }
    };

    const openStatusEditor = (m: any) => {
        setEditingStatusFor(m.id);
        setStatusSelection((m.status ?? 'intake').toLowerCase());
    };

    const cancelStatusEdit = () => {
        setEditingStatusFor(null);
        setStatusSelection('');
    };

    const updateStatus = async (m: any, newStatus: string) => {
        try {
            await makePutRequest(`/api/matters/${m.id}`, { status: newStatus }, { token });
            notify.toastSuccessMessage('Status updated');
            setEditingStatusFor(null);
            fetchMatters();
        } catch (e: any) {
            notify.toastErrorMessage(e?.response?.data?.message || 'Failed to update status');
        }
    };

    const openAssignModal = (m: any) => {
        setAssignMatter(m);
        setAssignOpen(true);
        setSelectedUserId(null);
        setUserQuery('');
        setFilteredUsers([]);
        setAssignRole(expectedRoles[1] || 'Associate');
    };

    const closeAssignModal = () => {
        setAssignOpen(false);
        setAssignMatter(null);
    };

    // server-side user search (debounced)
    useEffect(() => {
        let mounted = true;
        const q = userQuery.trim();
        const timer = setTimeout(async () => {
            try {
                setUserLoading(true);
                const params = new URLSearchParams();
                params.append('per_page', '50');
                if (q) params.append('search', q);
                const url = `/api/users?${params.toString()}`;
                const res = await makeGetRequest(url, { token });
                const payload = res.data?.result ?? res.data ?? {};
                const list = payload?.data ?? payload ?? [];
                if (mounted) setFilteredUsers(Array.isArray(list) ? list : []);
            } catch (e) {
                if (mounted) setFilteredUsers([]);
            } finally {
                if (mounted) setUserLoading(false);
            }
        }, 300);

        return () => {
            mounted = false;
            clearTimeout(timer);
        };
    }, [userQuery, token]);

    const submitAssign = async () => {
        if (!assignMatter || !selectedUserId) {
            alert('Select a user to assign');
            return;
        }

        setAssignSubmitting(true);
        try {
            await makePostRequest(`/api/matters/${assignMatter.id}/team-members`, { user_id: selectedUserId, role: assignRole }, { token });
            notify.toastSuccessMessage('Team member assigned');
            closeAssignModal();
            fetchMatters();
        } catch (e: any) {
            notify.toastErrorMessage(e?.response?.data?.message || 'Failed to assign team member');
        } finally {
            setAssignSubmitting(false);
        }
    };

    return (
        <>
            <div className="grid grid-cols-12 gap-6">
                {/* Main area: full width so table uses 100% */}
                <div className="col-span-12">
                    <div className="box">
                        <div className="box-body">
                            <div className="flex justify-between mb-5">
                                <div className="">
                                    <div className="relative sm:max-w-xs max-w-[210px]">
                                        <label htmlFor="hs-table-search" className="sr-only">Search</label>
                                        <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"
                                            name="hs-table-search"
                                            id="hs-table-search"
                                            className="p-2 pe-10 ti-form-input"
                                            placeholder="Search matters"
                                            value={query}
                                            onChange={(e) => setQuery(e.target.value)}
                                        />
                                    </div>
                                </div>
                                <div className="">
                                    <button
                                        type="button"
                                        className="ti-btn ti-btn-primary py-2 px-3 whitespace-nowrap"
                                        onClick={() => setCreateOpen(true)}
                                    >
                                        <i className="ri ri-edit-line mr-2"></i> New Matter
                                    </button>
                                </div>
                            </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 scope="col" className="dark:text-white/70">Ref</th>
                                        <th scope="col" className="dark:text-white/70">Client</th>
                                        <th scope="col" className="dark:text-white/70">Matter</th>
                                        <th scope="col" className="dark:text-white/70">Assigned Date</th>
                                        <th scope="col" className="dark:text-white/70">Status</th>
                                        <th scope="col" className="dark:text-white/70 min-w-[160px]">Assigned To</th>
                                        <th scope="col" className="!text-end dark:text-white/70">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody className="todo-drag">
                                    {loading ? (
                                        <tr>
                                            <td colSpan={9} className="text-center py-8">
                                                Loading...
                                            </td>
                                        </tr>
                                    ) : matters.length === 0 ? (
                                        <tr>
                                            <td colSpan={9} className="text-center py-8">
                                                No matters found.
                                            </td>
                                        </tr>
                                    ) : (
                                        matters.map((m: any) => (
                                            <tr key={m.id} className="todo-box">
                                                <td>
                                                    <Link href={`/matters/${m.id}`} className="text-sm font-semibold w-52 truncate text-indigo-600 hover:underline block">{m.reference_number}</Link>
                                                </td>
                                                <td>{m.client?.name}</td>
                                                <td>{m.matter_type}</td>
                                                <td>{m.assigned_date ?? new Date(m.created_at).toLocaleDateString() ?? '-'}</td>
                                                <td><span className={m.status === 'Active' ? 'text-success' : m.status === 'On-hold' ? 'text-info' : m.status === 'Intake' ? 'text-warning' : 'text-danger'}>{m.status ?? '-'}</span></td>
                                                <td>{m.attorney?.name}</td>
                                                <td className="text-end font-medium">
                                                    <div className="hs-tooltip ti-main-tooltip inline-flex">
                                                        <button
                                                            type="button"
                                                            className="hs-tooltip-toggle w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-secondary"
                                                            onClick={() => { setSelectedMatter(m); setCreateOpen(true); }}
                                                            title="Edit"
                                                        >
                                                            <i className="ti ti-pencil"></i>
                                                            <span className="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700 hidden" role="tooltip">Edit</span>
                                                        </button>
                                                    </div>
                                                    <div className="hs-tooltip ti-main-tooltip inline-flex ms-2">
                                                        <button
                                                            type="button"
                                                            className="hs-tooltip-toggle w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-info"
                                                            onClick={() => openAssignModal(m)}
                                                            title="Assign team"
                                                        >
                                                            <i className="ti ti-user-plus"></i>
                                                            <span className="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip">Assign team</span>
                                                        </button>
                                                    </div>
                                                    <div className="hs-tooltip ti-main-tooltip inline-flex ms-2">
                                                        <button
                                                            type="button"
                                                            className="hs-tooltip-toggle w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-info"
                                                            onClick={() => openStatusEditor(m)}
                                                            title="Change status"
                                                        >
                                                            <i className="ti ti-flag"></i>
                                                            <span className="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip">Change status</span>
                                                        </button>
                                                    </div>
                                                    <div className="hs-tooltip ti-main-tooltip">
                                                        {editingStatusFor === m.id ? (
                                                            <div className="inline-flex items-center gap-2">
                                                                <select
                                                                    className="ti-form-input text-sm"
                                                                    value={statusSelection}
                                                                    onChange={(e) => setStatusSelection(e.target.value)}
                                                                >
                                                                    <option value="intake">Intake</option>
                                                                    <option value="active">Active</option>
                                                                    <option value="on-hold">On-hold</option>
                                                                    <option value="closed">Closed</option>
                                                                    <option value="archived">Archived</option>
                                                                </select>
                                                                <button type="button" className="ti-btn ti-btn-success px-2 py-1" onClick={() => updateStatus(m, statusSelection)}>
                                                                    <i className="ti ti-check"></i>
                                                                </button>
                                                                <button type="button" className="ti-btn ti-border px-2 py-1" onClick={cancelStatusEdit}>
                                                                    <i className="ti ti-x"></i>
                                                                </button>
                                                            </div>
                                                        ) : (
                                                            <button
                                                                type="button"
                                                                onClick={() => remove(m)}
                                                                className="todo-remove hs-tooltip-toggle w-8 h-8 ti-btn rounded-full p-0 transition-none focus:outline-none ti-btn-soft-danger"
                                                                title="Delete"
                                                            >
                                                                <i className="ti ti-trash"></i>
                                                                <span className="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700" role="tooltip">Delete</span>
                                                            </button>
                                                        )}
                                                    </div>
                                                </td>
                                            </tr>
                                        ))
                                    )}
                                    </tbody>
                                </table>
                            </div>

                            <div className="flex items-center justify-between mt-4">
                                <div className="text-sm text-gray-600">showing {matters?.length} of {meta?.total ?? 0} items</div>
                                <div className="flex items-center gap-2">
                                    <button
                                        type="button"
                                        disabled={(meta?.current_page ?? 1) <= 1}
                                        onClick={() => gotoPage((meta?.current_page ?? 1) - 1)}
                                        className="px-2 py-1 border rounded disabled:opacity-40 disabled:cursor-not-allowed"
                                    >
                                        Prev
                                    </button>

                                    {Array.from({ length: meta?.last_page ?? 1 }).map((_, i) => {
                                        const p = i + 1;
                                        return (
                                            <button
                                                key={p}
                                                type="button"
                                                onClick={() => gotoPage(p)}
                                                className={`px-2 py-1 border rounded ${p === (meta?.current_page ?? page) ? 'bg-indigo-600 text-white' : ''}`}
                                            >
                                                {p}
                                            </button>
                                        );
                                    })}

                                    <button
                                        type="button"
                                        disabled={(meta?.current_page ?? 1) >= (meta?.last_page ?? 1)}
                                        onClick={() => gotoPage((meta?.current_page ?? 1) + 1)}
                                        className="px-2 py-1 border rounded disabled:opacity-40 disabled:cursor-not-allowed"
                                    >
                                        Next
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Create
                open={createOpen}
                onClose={() => { setCreateOpen(false); setSelectedMatter(null); }}
                matter={selectedMatter ?? undefined}
                mode={selectedMatter ? 'edit' : 'create'}
            />
            {assignOpen && (
                <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 max-h-[80vh] overflow-auto">
                        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-200 sticky top-0 bg-white z-10">
                            <h3 className="text-base font-semibold text-gray-800">Assign team member</h3>
                            <button type="button" className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors" onClick={closeAssignModal} aria-label="Close">
                                <i className="ri ri-close-line text-lg"></i>
                            </button>
                        </div>

                        <div className="px-5 py-5 space-y-4">
                            <div>
                                <label className="ti-form-label">Search user</label>
                                <input type="text" className="ti-form-input" placeholder="Search users by name or email" value={userQuery} onChange={e => setUserQuery(e.target.value)} />
                                {userLoading && <div className="text-xs text-gray-500 mt-2">Loading...</div>}
                                {!userLoading && filteredUsers.length === 0 && userQuery.trim() !== '' && (
                                    <div className="text-xs text-gray-500 mt-2">No results</div>
                                )}
                                {!userLoading && filteredUsers.length > 0 && (
                                    <ul className="mt-2 max-h-40 overflow-auto border rounded">
                                        {filteredUsers.map(u => (
                                            <li key={u.id} className={`p-2 hover:bg-gray-100 cursor-pointer ${selectedUserId === u.id ? 'bg-indigo-50' : ''}`} onClick={() => setSelectedUserId(u.id)}>
                                                <div className="font-medium">{u.name}</div>
                                                <div className="text-xs text-gray-500">{u.email}</div>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                            </div>

                            <div>
                                <label className="ti-form-label">Role</label>
                                <select className="ti-form-input" value={assignRole} onChange={e => setAssignRole(e.target.value)}>
                                    {expectedRoles.map(r => <option key={r} value={r}>{r}</option>)}
                                </select>
                            </div>
                        </div>

                        <div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-gray-200">
                            <button onClick={closeAssignModal} className="px-4 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
                            <button onClick={submitAssign} disabled={assignSubmitting} className="px-4 py-2 text-sm text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">
                                {assignSubmitting ? 'Assigning...' : 'Assign'}
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}