import React, {useEffect, useState} from 'react';
import {usePage} from '@inertiajs/react';
import {makeGetRequest, makePostRequest, makePutRequest} from '@/lib/request';
import toast from 'react-hot-toast';

interface CreateProps {
    open: boolean;
    onClose: () => void;
    matter?: any;
    mode?: 'create' | 'edit';
}

export default function Create({open, onClose, matter, mode = 'create'}: CreateProps): JSX.Element | null {
    const { auth } = usePage<{ auth: { user: any } }>().props;
    const token = auth?.user?.token ?? auth?.user?.api_token ?? undefined;

    // Form state
    const [clientProfileId, setClientProfileId] = useState<number | ''>('');
    const [attorneyId, setAttorneyId] = useState<number | ''>('');
    const [matterType, setMatterType] = useState('');
    const [practiceArea, setPracticeArea] = useState('');
    const [billingArrangement, setBillingArrangement] = useState('');
    const [courtDetails, setCourtDetails] = useState('');
    const [opposingName, setOpposingName] = useState('');
    const [opposingEmail, setOpposingEmail] = useState('');
    const [opposingBar, setOpposingBar] = useState('');
    const [caseNumber, setCaseNumber] = useState('');
    const [statuteDate, setStatuteDate] = useState<string | null>(null);

    const [submitting, setSubmitting] = useState(false);
    const [errors, setErrors] = useState<Record<string, string[]>>({});

    // Options
    const [clients, setClients] = useState<any[]>([]);
    const [users, setUsers] = useState<any[]>([]);
    const [attorneyQuery, setAttorneyQuery] = useState<string>('');
    const [filteredUsers, setFilteredUsers] = useState<any[]>([]);
    const [showAttorneyDropdown, setShowAttorneyDropdown] = useState<boolean>(false);
    const [userLoading, setUserLoading] = useState<boolean>(false);
    const [clientQuery, setClientQuery] = useState<string>('');
    const [filteredClients, setFilteredClients] = useState<any[]>([]);
    const [showClientDropdown, setShowClientDropdown] = useState<boolean>(false);
    const [clientLoading, setClientLoading] = useState<boolean>(false);

    useEffect(() => {
        // load clients and users
        const load = async () => {
            try {
                // Try to fetch a large page of clients for the select
                const resClients = await makeGetRequest('/api/clients', { token });
                const clientsPayload = resClients.data?.result?.data ?? resClients.data?.result ?? [];
                setClients(Array.isArray(clientsPayload) ? clientsPayload : []);
            } catch (e) {
                // ignore - leave clients empty
            }

            try {
                // Attempt to load an initial list of users
                let loaded = false;

                try {
                const res = await makeGetRequest('/api/users?role=ATTORNEY', {token});
                    const payload = res.data?.result?.data ?? res.data?.result ?? [];
                    if (Array.isArray(payload) && payload.length > 0) {
                        setUsers(payload);
                        loaded = true;
                    }
                } catch (e) {
                    // try next
                }

                if (!loaded && auth?.user) {
                    setUsers([auth.user]);
                }
            } catch (e) {
                // swallow
            }
        };

        load();
    }, [token]);

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

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

    // Server-side search for attorneys (debounced) - only users with role ATTORNEY
    useEffect(() => {
        let mounted = true;
        const q = attorneyQuery.trim();
        const timer = setTimeout(async () => {
            try {
                setUserLoading(true);
                const params = new URLSearchParams();
                params.append('per_page', '50');
                params.append('role', 'ATTORNEY');
                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);
        };
    }, [attorneyQuery, token]);

    const closeOverlay = () => {
        onClose();
    };

    // populate form when editing
    useEffect(() => {
        if (matter && mode === 'edit') {
            setClientProfileId(matter.client_profile_id ?? matter.client?.id ?? '');
            setClientQuery(matter.client?.name ? `${matter.client.name}${matter.client.email ? ` (${matter.client.email})` : ''}` : '');
            setAttorneyId(matter.attorney_id ?? matter.attorney?.id ?? '');
            setAttorneyQuery(matter.attorney?.name ? `${matter.attorney.name}${matter.attorney.email ? ` (${matter.attorney.email})` : ''}` : '');
            setMatterType(matter.matter_type ?? '');
            setPracticeArea(matter.practice_area ?? '');
            setBillingArrangement(matter.billing_arrangement ?? '');
            setCourtDetails(matter.court_details ?? '');
            setOpposingName(matter.opposing_counsel_name ?? '');
            setOpposingEmail(matter.opposing_counsel_email ?? '');
            setOpposingBar(matter.opposing_counsel_bar_number ?? '');
            setCaseNumber(matter.case_number ?? '');
            setStatuteDate(matter.statute_of_limitations_date ?? null);
        } else if (!open) {
            // reset when closed
            setClientProfileId('');
            setClientQuery('');
            setAttorneyId('');
            setAttorneyQuery('');
            setMatterType('');
            setPracticeArea('');
            setBillingArrangement('');
            setCourtDetails('');
            setOpposingName('');
            setOpposingEmail('');
            setOpposingBar('');
            setCaseNumber('');
            setStatuteDate(null);
            setErrors({});
        }
    }, [matter, mode, open]);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setErrors({});

        // Minimal client-side validation
        const validation: Record<string, string[]> = {};
        if (!clientProfileId) validation.client_profile_id = ['Client is required'];
        if (!attorneyId) validation.attorney_id = ['Attorney is required'];
        if (!matterType.trim()) validation.matter_type = ['Matter type is required'];
        if (!practiceArea.trim()) validation.practice_area = ['Practice area is required'];
        if (Object.keys(validation).length) {
            setErrors(validation);
            return;
        }

        setSubmitting(true);
        try {
            const payload: Record<string, any> = {
                client_profile_id: clientProfileId,
                attorney_id: attorneyId,
                matter_type: matterType.trim(),
                practice_area: practiceArea || null,
                billing_arrangement: billingArrangement || null,
                court_details: courtDetails || null,
                opposing_counsel_name: opposingName || null,
                opposing_counsel_email: opposingEmail || null,
                opposing_counsel_bar_number: opposingBar || null,
                case_number: caseNumber || null,
                statute_of_limitations_date: statuteDate || null,
            };

            if (mode === 'edit' && matter?.id) {
                const {data} = await makePutRequest(`/api/matters/${matter.id}`, payload, {token});
                toast.success('Matter updated');
                window.dispatchEvent(new CustomEvent('matter:updated', {detail: data.result}));
            } else {
                const {data} = await makePostRequest('/api/matters', payload, {token});
                toast.success('Matter created');
                window.dispatchEvent(new CustomEvent('matter:created', {detail: data.result}));
            }
            closeOverlay();
        } catch (err: any) {
            const resp = err?.response?.data;
            if (resp && resp.errors) {
                setErrors(resp.errors);
            } else {
                toast.error('Failed to create matter');
            }
        } finally {
            setSubmitting(false);
        }
    };

    if (!open) return null;

    return (
        <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-[80vh] overflow-auto">
                <form className="space-y-3" onSubmit={handleSubmit} noValidate>
                    <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">{mode == 'create' ? 'New Matter' : 'Edit Matter'}</h3>
                        <button
                            type="button"
                            className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors"
                            onClick={closeOverlay}
                        >
                            <i className="ri ri-close-line text-lg"></i>
                        </button>
                    </div>

                    <div className="px-5 py-5 space-y-4">
                        <div className="relative">
                            <label htmlFor="clientProfile" className="ti-form-label">Client</label>
                            <input
                                id="clientProfile"
                                type="text"
                                className="ti-form-input"
                                placeholder="Search client by name or email"
                                value={clientQuery}
                                onChange={(e) => {
                                    const v = e.target.value;
                                    setClientQuery(v);
                                    setShowClientDropdown(true);
                                    const q = v.trim().toLowerCase();
                                    setFilteredClients(
                                        q === ''
                                            ? clients.slice(0, 50)
                                            : clients.filter((c: any) => (
                                                (c.name || '').toLowerCase().includes(q) || (c.email || '').toLowerCase().includes(q)
                                            )).slice(0, 50)
                                    );
                                    // clear selected id when user types
                                    setClientProfileId('');
                                }}
                                onFocus={() => {
                                    setFilteredClients(clients.slice(0, 50));
                                    setShowClientDropdown(true);
                                }}
                                onBlur={() => setTimeout(() => setShowClientDropdown(false), 150)}
                            />
                            {showClientDropdown && (
                                <ul className="absolute z-20 left-0 right-0 bg-white border rounded mt-1 max-h-52 overflow-auto shadow">
                                    {clientLoading && (
                                        <li className="px-3 py-2 text-xs text-gray-500">Loading...</li>
                                    )}
                                    {!clientLoading && filteredClients.length === 0 && (
                                        <li className="px-3 py-2 text-xs text-gray-500">No results</li>
                                    )}
                                    {filteredClients.map((c: any) => (
                                        <li
                                            key={c.id}
                                            className="px-3 py-2 hover:bg-gray-100 cursor-pointer text-sm"
                                            onMouseDown={(e) => {
                                                e.preventDefault();
                                            }}
                                            onClick={() => {
                                                setClientProfileId(c.id);
                                                setClientQuery(c.name + (c.email ? ` (${c.email})` : ''));
                                                setShowClientDropdown(false);
                                            }}
                                        >
                                            <div className="font-medium">{c.name}</div>
                                            <div className="text-xs text-gray-500">{c.email ?? '-'}</div>
                                        </li>
                                    ))}
                                </ul>
                            )}
                            {errors.client_profile_id &&
                                <p className="text-sm text-red-600">{errors.client_profile_id[0]}</p>}
                        </div>

                        <div className="relative">
                            <label htmlFor="attorney" className="ti-form-label">Responsible Attorney</label>
                            <input
                                id="attorney"
                                type="text"
                                className="ti-form-input"
                                placeholder="Search attorney by name or email"
                                value={attorneyQuery}
                                onChange={(e) => {
                                    const v = e.target.value;
                                    setAttorneyQuery(v);
                                    setShowAttorneyDropdown(true);
                                    // clear selected id when user types
                                    setAttorneyId('');
                                }}
                                onFocus={() => {
                                    setShowAttorneyDropdown(true);
                                    setFilteredUsers(users.slice(0, 50));
                                }}
                                onBlur={() => setTimeout(() => setShowAttorneyDropdown(false), 150)}
                            />
                            {showAttorneyDropdown && (
                                <ul className="absolute z-20 left-0 right-0 bg-white border rounded mt-1 max-h-52 overflow-auto shadow">
                                    {userLoading && (
                                        <li className="px-3 py-2 text-xs text-gray-500">Loading...</li>
                                    )}
                                    {!userLoading && filteredUsers.length === 0 && (
                                        <li className="px-3 py-2 text-xs text-gray-500">No results</li>
                                    )}
                                    {filteredUsers.map((u: any) => (
                                        <li
                                            key={u.id}
                                            className="px-3 py-2 hover:bg-gray-100 cursor-pointer text-sm"
                                            onMouseDown={(e) => {
                                                e.preventDefault();
                                            }}
                                            onClick={() => {
                                                setAttorneyId(u.id);
                                                setAttorneyQuery(u.name + (u.email ? ` (${u.email})` : ''));
                                                setShowAttorneyDropdown(false);
                                            }}
                                        >
                                            <div className="font-medium">{u.name}</div>
                                            <div className="text-xs text-gray-500">{u.email ?? '-'}</div>
                                        </li>
                                    ))}
                                </ul>
                            )}
                            {errors.attorney_id && <p className="text-sm text-red-600">{errors.attorney_id[0]}</p>}
                        </div>

                        <div>
                            <label htmlFor="matterType" className="ti-form-label">Matter Type</label>
                            <input
                                id="matterType"
                                type="text"
                                className="ti-form-input"
                                placeholder="e.g. Litigation, Contract"
                                value={matterType}
                                onChange={(e) => setMatterType(e.target.value)}
                            />
                            {errors.matter_type && <p className="text-sm text-red-600">{errors.matter_type[0]}</p>}
                        </div>

                        <div>
                            <label htmlFor="practiceArea" className="ti-form-label">Practice Area</label>
                            <input
                                id="practiceArea"
                                type="text"
                                className="ti-form-input"
                                placeholder="Practice area"
                                value={practiceArea}
                                onChange={(e) => setPracticeArea(e.target.value)}
                            />
                        </div>

                        <div>
                            <label htmlFor="billingArrangement" className="ti-form-label">Billing Arrangement</label>
                            <input
                                id="billingArrangement"
                                type="text"
                                className="ti-form-input"
                                placeholder="e.g. Hourly, Fixed"
                                value={billingArrangement}
                                onChange={(e) => setBillingArrangement(e.target.value)}
                            />
                        </div>

                        <div>
                            <label htmlFor="courtDetails" className="ti-form-label">Court Details</label>
                            <input
                                id="courtDetails"
                                type="text"
                                className="ti-form-input"
                                placeholder="Court, Division, etc."
                                value={courtDetails}
                                onChange={(e) => setCourtDetails(e.target.value)}
                            />
                        </div>

                        <div>
                            <label htmlFor="opposingName" className="ti-form-label">Opposing Counsel / Party</label>
                            <input
                                id="opposingName"
                                type="text"
                                className="ti-form-input"
                                placeholder="Name"
                                value={opposingName}
                                onChange={(e) => setOpposingName(e.target.value)}
                            />
                            <div className="mt-2 grid grid-cols-1 md:grid-cols-3 gap-2">
                                <input
                                    id="opposingEmail"
                                    type="email"
                                    className="ti-form-input"
                                    placeholder="Email"
                                    value={opposingEmail}
                                    onChange={(e) => setOpposingEmail(e.target.value)}
                                />
                                <input
                                    id="opposingBar"
                                    type="text"
                                    className="ti-form-input"
                                    placeholder="Bar number"
                                    value={opposingBar}
                                    onChange={(e) => setOpposingBar(e.target.value)}
                                />
                                <input
                                    id="caseNumber"
                                    type="text"
                                    className="ti-form-input"
                                    placeholder="Case number"
                                    value={caseNumber}
                                    onChange={(e) => setCaseNumber(e.target.value)}
                                />
                            </div>
                        </div>

                        <div>
                            <label htmlFor="statuteDate" className="ti-form-label">Statute of Limitations</label>
                            <input
                                id="statuteDate"
                                type="date"
                                className="ti-form-input"
                                value={statuteDate ?? ''}
                                onChange={(e) => setStatuteDate(e.target.value || null)}
                            />
                        </div>
                    </div>
                    <div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-gray-200">
                        <div className="pt-2">
                            <button type="button" className="ti-btn ti-border ml-2" onClick={closeOverlay}>
                                Cancel
                            </button>
                            <button type="submit" className="ti-btn ti-btn-primary" disabled={submitting}>
                                {submitting ? (
                                    <>
                                        <span
                                            className="animate-spin h-3 w-3 border-2 border-white border-t-transparent rounded-full inline-block"></span>
                                        {mode === 'edit' ? 'Saving…' : 'Creating…'}
                                    </>
                                ) : (
                                    (mode === 'edit' ? 'Save' : 'Create')
                                )}
                            </button>

                        </div>
                    </div>
                </form>
            </div>
        </div>
    );
}