import React, {useEffect, useState} from 'react';
import axios from 'axios';
import {usePage} from '@inertiajs/react';
import toast from 'react-hot-toast';
import MainLayout from '@/layouts/MainLayout';
import AppPageHeader from '@/components/AppPageHeader';
import Modal from '@/components/ui/modal/Modal';
import {Table, TableBody, TableCell, TableContainer, TableHead, TableHeaderCell, TablePagination, TableRow, TableStateRow} from '@/components/ui/table';

const emptyForm = () => ({client_profile_id: '', responsible_lawyer_id: '', title: '', scheduled_at: '', ends_at: '', status: 'scheduled', notes: '', outcome: ''});
const localDate = (value?: string) => value ? value.slice(0, 16) : '';

export default function Consultations(): JSX.Element {
    const {auth} = usePage<{auth: {user: any}}>().props;
    const token = auth?.user?.api_token ?? auth?.user?.token;
    const headers = {headers: {Authorization: `Bearer ${token}`}};
    const canUpdate = auth?.user?.user_permissions?.includes('clients_update') ?? false;
    const [results, setResults] = useState<any>({data: [], current_page: 1, last_page: 1, total: 0});
    const [page, setPage] = useState(1);
    const [clients, setClients] = useState<any[]>([]);
    const [lawyers, setLawyers] = useState<any[]>([]);
    const [editing, setEditing] = useState<any>(null);
    const [form, setForm] = useState(emptyForm());
    const [open, setOpen] = useState(false);
    const [saving, setSaving] = useState(false);
    const [detail, setDetail] = useState<{title: string; text: string} | null>(null);

    const load = async () => { const {data} = await axios.get(`/api/consultations?page=${page}`, headers); setResults(data.result ?? results); };
    useEffect(() => { load().catch(() => toast.error('Unable to load consultations')); }, [page]);
    useEffect(() => { if (!canUpdate) return; Promise.all([axios.get('/api/clients?per_page=200', headers), axios.get('/api/consultations/lawyers', headers)]).then(([c,l]) => { setClients(c.data.result?.data ?? []); setLawyers(l.data.result ?? []); }).catch(() => toast.error('Unable to load consultation options')); }, [canUpdate]);
    const showCreate = () => { setEditing(null); setForm(emptyForm()); setOpen(true); };
    const showEdit = (item: any) => { setEditing(item); setForm({client_profile_id: item.client_profile_id ?? '', responsible_lawyer_id: item.responsible_lawyer_id ?? '', title: item.title ?? '', scheduled_at: localDate(item.scheduled_at), ends_at: localDate(item.ends_at), status: item.status ?? 'scheduled', notes: item.notes ?? '', outcome: item.outcome ?? ''}); setOpen(true); };
    const save = async (event: React.FormEvent) => { event.preventDefault(); setSaving(true); try { const payload = {...form, client_profile_id: Number(form.client_profile_id), responsible_lawyer_id: form.responsible_lawyer_id ? Number(form.responsible_lawyer_id) : null, ends_at: form.ends_at || null}; if (editing) await axios.put(`/api/consultations/${editing.id}`, payload, headers); else await axios.post('/api/consultations', payload, headers); setOpen(false); await load(); toast.success(editing ? 'Consultation updated' : 'Consultation scheduled'); } catch (error: any) { toast.error(error.response?.data?.message ?? 'Unable to save consultation'); } finally { setSaving(false); } };
    const remove = async (item: any) => { if (!confirm(`Delete consultation “${item.title ?? 'Client consultation'}”?`)) return; try { await axios.delete(`/api/consultations/${item.id}`, headers); await load(); toast.success('Consultation deleted'); } catch (error: any) { toast.error(error.response?.data?.message ?? 'Unable to delete consultation'); } };

    return <MainLayout><AppPageHeader title="Consultations" subtitle="Client intake" />
        <section className="border border-gray-200 bg-white"><div className="flex items-center justify-between border-b p-5"><h2 className="font-semibold">Consultation register</h2>{canUpdate && <button className="ti-btn ti-btn-primary" onClick={showCreate}><i className="fa fa-plus mr-2" />Schedule</button>}</div>
        <TableContainer><Table><TableHead><TableRow><TableHeaderCell>Client</TableHeaderCell><TableHeaderCell>Consultation</TableHeaderCell><TableHeaderCell>Notes</TableHeaderCell><TableHeaderCell>Schedule</TableHeaderCell><TableHeaderCell>Lawyer</TableHeaderCell><TableHeaderCell>Status</TableHeaderCell><TableHeaderCell className="text-right">Actions</TableHeaderCell></TableRow></TableHead><TableBody>{results.data?.length ? results.data.map((item: any) => <TableRow key={item.id}><TableCell>{item.client?.name ?? item.intake?.name ?? 'Unlinked'}</TableCell><TableCell><div className="font-medium">{item.title ?? 'Client consultation'}</div></TableCell><TableCell className="max-w-xs whitespace-normal break-words"><span>{item.notes ? `${item.notes.slice(0, 100)}${item.notes.length > 100 ? '...' : ''}` : 'No notes'}</span>{(item.notes?.length ?? 0) > 100 && <button type="button" className="ml-2 text-sm font-medium text-indigo-600 hover:underline" onClick={() => setDetail({title: `Consultation notes: ${item.title ?? 'Client consultation'}`, text: item.notes})}>Read more</button>}</TableCell><TableCell>{new Date(item.scheduled_at).toLocaleString()}</TableCell><TableCell>{item.lawyer?.name ?? 'Unassigned'}</TableCell><TableCell><span className="capitalize">{item.status.replace('_', ' ')}</span></TableCell><TableCell className="text-right"><div className="flex justify-end gap-2">{item.outcome && <button type="button" title="View outcome" className="ti-btn ti-btn-soft-info" onClick={() => setDetail({title: `Consultation outcome: ${item.title ?? 'Client consultation'}`, text: item.outcome})}>Outcome</button>}{canUpdate && <><button title="Edit" className="ti-btn ti-btn-soft-primary" onClick={() => showEdit(item)}><i className="fa fa-pencil" /></button><button title="Delete" className="ti-btn ti-btn-soft-danger" onClick={() => remove(item)}><i className="fa fa-trash" /></button></>}</div></TableCell></TableRow>) : <TableStateRow colSpan={7} message="No consultations found." />}</TableBody></Table></TableContainer>
        <div className="px-5 pb-5"><TablePagination meta={results} itemCount={results.data?.length ?? 0} currentPage={page} onPageChange={setPage} itemLabel="consultations" /></div></section>
        <Modal open={open} onClose={() => setOpen(false)} title={editing ? 'Edit consultation' : 'Schedule consultation'} footer={<><button type="button" className="ti-btn ti-btn-light" onClick={() => setOpen(false)}>Cancel</button><button type="submit" form="consultation-form" className="ti-btn ti-btn-primary" disabled={saving}>{saving ? 'Saving...' : 'Save'}</button></>}>
            <form id="consultation-form" onSubmit={save} className="grid gap-4 sm:grid-cols-2">
                <div className="sm:col-span-2"><label htmlFor="consultation-client" className="mb-1 block text-sm font-medium text-gray-700">Client</label><select id="consultation-client" required className="ti-form-select" value={form.client_profile_id} onChange={e => setForm({...form,client_profile_id:e.target.value})}><option value="">Select client</option>{clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}</select></div>
                <div className="sm:col-span-2"><label htmlFor="consultation-title" className="mb-1 block text-sm font-medium text-gray-700">Consultation title</label><input id="consultation-title" className="ti-form-input" value={form.title} onChange={e => setForm({...form,title:e.target.value})}/></div>
                <div><label htmlFor="consultation-start" className="mb-1 block text-sm font-medium text-gray-700">Starts at</label><input id="consultation-start" required type="datetime-local" className="ti-form-input" value={form.scheduled_at} onChange={e => setForm({...form,scheduled_at:e.target.value})}/></div>
                <div><label htmlFor="consultation-end" className="mb-1 block text-sm font-medium text-gray-700">Ends at</label><input id="consultation-end" type="datetime-local" className="ti-form-input" value={form.ends_at} onChange={e => setForm({...form,ends_at:e.target.value})}/></div>
                <div><label htmlFor="consultation-lawyer" className="mb-1 block text-sm font-medium text-gray-700">Responsible lawyer</label><select id="consultation-lawyer" className="ti-form-select" value={form.responsible_lawyer_id} onChange={e => setForm({...form,responsible_lawyer_id:e.target.value})}><option value="">Unassigned</option>{lawyers.map(l => <option key={l.id} value={l.id}>{l.name}</option>)}</select></div>
                <div><label htmlFor="consultation-status" className="mb-1 block text-sm font-medium text-gray-700">Status</label><select id="consultation-status" className="ti-form-select" value={form.status} onChange={e => setForm({...form,status:e.target.value})}><option value="scheduled">Scheduled</option><option value="completed">Completed</option><option value="cancelled">Cancelled</option><option value="no_show">No show</option></select></div>
                <div><label htmlFor="consultation-notes" className="mb-1 block text-sm font-medium text-gray-700">Notes</label><textarea id="consultation-notes" className="ti-form-textarea" value={form.notes} onChange={e => setForm({...form,notes:e.target.value})}/></div>
                <div><label htmlFor="consultation-outcome" className="mb-1 block text-sm font-medium text-gray-700">Outcome</label><textarea id="consultation-outcome" className="ti-form-textarea" value={form.outcome} onChange={e => setForm({...form,outcome:e.target.value})}/></div>
            </form>
        </Modal>
        <Modal open={detail !== null} onClose={() => setDetail(null)} title={detail?.title ?? 'Consultation details'} maxWidthClassName="max-w-xl"><div className="whitespace-pre-wrap break-words text-sm leading-6 text-gray-700 dark:text-gray-200">{detail?.text}</div></Modal>
    </MainLayout>;
}