import React, {FormEvent, useEffect, useState} from 'react';
import {usePage} from '@inertiajs/react';
import axios from 'axios';
import FilePondUploader from '@/components/FilePondUploader';
import Modal from '@/components/ui/modal/Modal';
import {makeGetRequest, makePostRequest} from '@/lib/request';
import {notify} from '@/lib/notify';
import SignatureCanvas from './SignatureCanvas';

type Props = {
    document: any | null;
    token?: string;
    permissions: string[];
    onClose: () => void;
    onRefresh: () => Promise<void> | void;
    variant?: 'modal' | 'page';
    onEdit?: () => void;
    onManageAccess?: () => void;
    onDelete?: () => void;
};

type Action = 'submit' | 'review' | 'signature' | 'apply_signature' | 'retention' | 'signature_status' | null;
type SignatureMode = 'saved' | 'drawn' | 'uploaded';

const tabs = ['Overview', 'Versions', 'Approval', 'Signatures', 'Retention'];

function label(value?: string | null): string {
    if (!value) return '—';
    return value.replaceAll('_', ' ').replace(/\b\w/g, letter => letter.toUpperCase());
}

function date(value?: string | null): string {
    return value ? new Date(value).toLocaleString() : '—';
}

function versionLabel(value: unknown): string {
    if (value && typeof value === 'object') {
        const version = (value as {version?: unknown}).version;
        return typeof version === 'string' || typeof version === 'number' ? String(version) : '—';
    }

    return typeof value === 'string' || typeof value === 'number' ? String(value) : '—';
}

function versionActor(document: any, version: any): string {
    const signature = (document.applied_signatures ?? []).find((item: any) => item.signed_document_version_id === version.id);
    if (signature?.external_signatory_name) return `${signature.external_signatory_name}${signature.external_signatory_email ? ` · ${signature.external_signatory_email}` : ''}`;
    if (signature?.signed_by?.name) return signature.signed_by.name;
    return version.uploader?.name ?? '—';
}

function statusClass(status?: string): string {
    if (['approved', 'finalized', 'signed'].includes(status ?? '')) return 'bg-green-100 text-green-700';
    if (['changes_requested', 'rejected', 'declined', 'failed'].includes(status ?? '')) return 'bg-red-100 text-red-700';
    if (['pending_review', 'pending', 'awaiting_confirmation'].includes(status ?? '')) return 'bg-amber-100 text-amber-700';
    return 'bg-gray-100 text-gray-700';
}

export default function DocumentDetailModal({document, token, permissions, onClose, onRefresh, variant = 'modal', onEdit, onManageAccess, onDelete}: Props): JSX.Element {
    const currentUser = usePage<any>().props.auth?.user;
    const [activeTab, setActiveTab] = useState('Overview');
    const [action, setAction] = useState<Action>(null);
    const [submitting, setSubmitting] = useState(false);
    const [downloading, setDownloading] = useState<number | null>(null);
    const [reviewers, setReviewers] = useState<any[]>([]);
    const [reviewerId, setReviewerId] = useState('');
    const [decision, setDecision] = useState('approved');
    const [comments, setComments] = useState('');
    const [signatory, setSignatory] = useState({name: '', email: '', role: ''});
    const [signatureRequest, setSignatureRequest] = useState<any | null>(null);
    const [signatureStatus, setSignatureStatus] = useState('pending');
    const [externalReference, setExternalReference] = useState('');
    const [retentionUntil, setRetentionUntil] = useState('');
    const [legalHold, setLegalHold] = useState(false);
const [legalHoldReason, setLegalHoldReason] = useState('');
const [savedSignatures, setSavedSignatures] = useState<any[]>([]);
const [signatureMode, setSignatureMode] = useState<SignatureMode>('saved');
const [selectedSignatureId, setSelectedSignatureId] = useState('');
const [signatureFile, setSignatureFile] = useState<File | null>(null);
const [saveSignature, setSaveSignature] = useState(false);
const [signatureLabel, setSignatureLabel] = useState('My signature');
const [signaturePage, setSignaturePage] = useState('1');
const [signaturePosition, setSignaturePosition] = useState('bottom-right');
const [signatureWidth, setSignatureWidth] = useState('20');
const [linkedSignatureRequestId, setLinkedSignatureRequestId] = useState('');

    const canVersion = permissions.includes('documents_create_versions');
    const canRollback = permissions.includes('documents_version_rollback');
    const canSubmit = permissions.includes('documents_submit_review');
    const canReview = permissions.includes('documents_review');
    const canFinalize = permissions.includes('documents_finalize');
    const canRequestSignatures = permissions.includes('documents_request_signatures');
    const canManageSignatureStatus = permissions.includes('documents_manage_signature_status');
    const canApplySignatures = permissions.includes('documents_apply_signatures');
    const canManageRetention = permissions.includes('documents_manage_retention');

    useEffect(() => {
        setActiveTab('Overview');
        setAction(null);
        setRetentionUntil(document?.retention_until?.slice(0, 10) ?? '');
        setLegalHold(Boolean(document?.legal_hold));
        setLegalHoldReason(document?.legal_hold_reason ?? '');
    }, [document?.id]);

    async function loadReviewers() {
        try {
            const response = await makeGetRequest('/api/documents/reviewers', {token});
            setReviewers(response.data?.result ?? []);
        } catch (error: any) {
            notify.toastErrorMessage(error?.response?.data?.message || 'Unable to load reviewers');
        }
    }

    async function loadSavedSignatures() {
    try {
        const response = await makeGetRequest('/api/document-signatures', {token});
        const signatures = response.data?.result ?? [];
        setSavedSignatures(signatures);
        const preferred = signatures.find((item: any) => item.is_default) ?? signatures[0];
        setSelectedSignatureId(preferred ? String(preferred.id) : '');
        setSignatureMode(preferred ? 'saved' : 'drawn');
    } catch (error: any) {
        notify.toastErrorMessage(error?.response?.data?.message || 'Unable to load saved signatures');
    }
}

function openAction(nextAction: Action, request?: any) {
        setComments('');
if (nextAction === 'submit') loadReviewers();
if (nextAction === 'apply_signature') {
    setSignatureFile(null);
    setSaveSignature(false);
    setSignaturePage('1');
    setSignaturePosition('bottom-right');
    setSignatureWidth('20');
    setLinkedSignatureRequestId('');
    loadSavedSignatures();
}
        if (nextAction === 'signature_status') {
            setSignatureRequest(request);
            setSignatureStatus(request?.status === 'draft' || request?.status === 'failed' ? 'pending' : 'cancelled');
            setExternalReference(request?.external_reference ?? '');
        }
        setAction(nextAction);
    }

    async function download(version: any, documentId?: number) {
        if (!document || downloading) return;
        setDownloading(version.id);
        const previewWindow = window.open('', '_blank');
        try {
            const response = await axios.get(`/api/documents/${documentId ?? document.id}/versions/${version.id}`, {
                responseType: 'blob',
                headers: token ? {Authorization: `Bearer ${token}`} : {},
            });
            const url = URL.createObjectURL(response.data);
            if (previewWindow) {
                previewWindow.opener = null;
                previewWindow.location.href = url;
            }
            window.setTimeout(() => URL.revokeObjectURL(url), 60000);
        } catch (error: any) {
            previewWindow?.close();
            notify.toastErrorMessage(error?.response?.data?.message || 'Unable to open document');
        } finally {
            setDownloading(null);
        }
    }

    async function deleteSavedSignature(signature: any) {
    if (!confirm(`Delete the saved signature “${signature.label}”? Existing signed documents will not be changed.`)) return;
    try {
        await axios.delete(`/api/document-signatures/${signature.id}`, {
            headers: token ? {Authorization: `Bearer ${token}`} : {},
        });
        await loadSavedSignatures();
        notify.toastSuccessMessage('Saved signature deleted');
    } catch (error: any) {
        notify.toastErrorMessage(error?.response?.data?.message || 'Unable to delete saved signature');
    }
}

async function rollback(version: any) {
        if (!document || !confirm(`Make ${version.version} the active version? The file is not duplicated and all other versions remain in history.`)) return;
        try {
            await makePostRequest(`/api/documents/${document.id}/versions/${version.id}/rollback`, {}, {token});
            notify.toastSuccessMessage('Active document version updated');
            await onRefresh();
        } catch (error: any) {
            notify.toastErrorMessage(error?.response?.data?.message || 'Unable to update active version');
        }
    }

    async function previewPendingSignature(request: any) {
        const previewWindow = window.open('', '_blank');
        try {
            const response = await axios.get(`/api/documents/${document.id}/signature-requests/${request.id}/pending-document`, {
                responseType: 'blob', headers: token ? {Authorization: `Bearer ${token}`} : {},
            });
            const url = URL.createObjectURL(response.data);
            if (previewWindow) { previewWindow.opener = null; previewWindow.location.href = url; }
            window.setTimeout(() => URL.revokeObjectURL(url), 60000);
        } catch (error: any) {
            previewWindow?.close();
            notify.toastErrorMessage(error?.response?.data?.message || 'Unable to preview the submitted signed document');
        }
    }

    async function confirmSignatureSubmission(request: any) {
        if (!confirm('Confirm the submitted signatures? This will create the next active document version and mark it Approved.')) return;
        try {
            await makePostRequest(`/api/documents/${document.id}/signature-requests/${request.id}/confirm`, {}, {token});
            notify.toastSuccessMessage('Signed submission confirmed and approved version created');
            await onRefresh();
        } catch (error: any) {
            const errors = error?.response?.data?.errors;
            notify.toastErrorMessage(errors ? Object.values(errors).flat().join(' ') : error?.response?.data?.message || 'Unable to confirm the signed submission');
        }
    }

    async function rejectSignatureSubmission(request: any) {
        const remarks = window.prompt('Why are you rejecting this signed submission?');
        if (!remarks?.trim()) return;
        try {
            await makePostRequest(`/api/documents/${document.id}/signature-requests/${request.id}/reject`, {remarks: remarks.trim()}, {token});
            notify.toastSuccessMessage('Signed submission rejected; no document version was created');
            await onRefresh();
        } catch (error: any) {
            const errors = error?.response?.data?.errors;
            notify.toastErrorMessage(errors ? Object.values(errors).flat().join(' ') : error?.response?.data?.message || 'Unable to reject the signed submission');
        }
    }

    async function finalizeDocument() {
        if (!document || !confirm('Finalize the approved active version? Ordinary editing will be locked.')) return;
        setSubmitting(true);
        try {
            await makePostRequest(`/api/documents/${document.id}/finalize`, {}, {token});
            notify.toastSuccessMessage('Document finalized');
            await onRefresh();
        } catch (error: any) {
            notify.toastErrorMessage(error?.response?.data?.message || 'Unable to finalize document');
        } finally {
            setSubmitting(false);
        }
    }

    async function submitAction(event: FormEvent) {
        event.preventDefault();
        if (!document || !action) return;
        setSubmitting(true);
        try {
            if (action === 'submit') {
                await makePostRequest(`/api/documents/${document.id}/submit-review`, {reviewer_id: Number(reviewerId), comments}, {token});
                notify.toastSuccessMessage('Document submitted for review');
            } else if (action === 'review') {
                await makePostRequest(`/api/documents/${document.id}/review`, {decision, comments}, {token});
                notify.toastSuccessMessage(decision === 'approved' ? 'Document approved' : 'Changes requested');
            } else if (action === 'signature') {
                await makePostRequest(`/api/documents/${document.id}/signature-requests`, {
                    signatories: [{...signatory, signing_order: 1}],
                }, {token});
                notify.toastSuccessMessage('Secure signature request sent by email');
            } else if (action === 'apply_signature') {
    if (signatureMode === 'saved' && !selectedSignatureId) throw new Error('Choose a saved signature or draw/upload one.');
    if (signatureMode !== 'saved' && !signatureFile) throw new Error('Draw or upload a PNG signature first.');
    const positions: Record<string, [number, number]> = {
        'bottom-left': [8, 82], 'bottom-center': [40, 82], 'bottom-right': [72, 82],
    };
    const [xPercent, yPercent] = positions[signaturePosition];
    const formData = new FormData();
    if (signatureMode === 'saved') formData.append('user_signature_id', selectedSignatureId);
    if (signatureMode !== 'saved' && signatureFile) formData.append('signature_file', signatureFile);
    formData.append('signature_method', signatureMode);
    formData.append('page_number', signaturePage);
    formData.append('x_percent', String(xPercent));
    formData.append('y_percent', String(yPercent));
    formData.append('width_percent', signatureWidth);
    if (linkedSignatureRequestId) formData.append('document_signature_request_id', linkedSignatureRequestId);
    if (signatureMode !== 'saved' && saveSignature) {
        formData.append('save_signature', '1');
        formData.append('signature_label', signatureLabel);
    }
    await axios.post(`/api/documents/${document.id}/apply-signature`, formData, {
        headers: token ? {Authorization: `Bearer ${token}`} : {},
    });
    notify.toastSuccessMessage('Signed version created and made active');
} else if (action === 'retention') {
                await axios.patch(`/api/documents/${document.id}/retention`, {
                    retention_until: retentionUntil || null,
                    legal_hold: legalHold,
                    legal_hold_reason: legalHold ? legalHoldReason : null,
                }, {headers: token ? {Authorization: `Bearer ${token}`} : {}});
                notify.toastSuccessMessage('Retention controls updated');
            } else if (action === 'signature_status' && signatureRequest) {
                await axios.patch(`/api/documents/${document.id}/signature-requests/${signatureRequest.id}`, {
                    status: signatureStatus,
                    external_reference: externalReference || null,
                    remarks: comments || null,
                }, {headers: token ? {Authorization: `Bearer ${token}`} : {}});
                notify.toastSuccessMessage('Signature status updated');
            }
            setAction(null);
            await onRefresh();
        } catch (error: any) {
            const errors = error?.response?.data?.errors;
            const message = errors ? Object.values(errors).flat().join(' ') : error?.response?.data?.message || error?.message;
            notify.toastErrorMessage(message || 'Unable to complete document action');
        } finally {
            setSubmitting(false);
        }
    }

    const footer = document ? <>
        {canSubmit && ['draft', 'changes_requested'].includes(document.status) ? <button key="submit" type="button" className="ti-btn ti-btn-primary" onClick={() => openAction('submit')}><i className="fa fa-paper-plane me-2" />Submit for review</button> : null}
        {canReview && document.status === 'pending_review' ? <button key="review" type="button" className="ti-btn ti-btn-primary" onClick={() => openAction('review')}><i className="fa fa-check-square-o me-2" />Review</button> : null}
        {canFinalize && document.status === 'approved' ? <button key="finalize" type="button" className="ti-btn ti-btn-success" disabled={submitting} onClick={finalizeDocument}><i className="fa fa-lock me-2" />Finalize</button> : null}
        {canRequestSignatures && document.status === 'approved' ? <button key="signature-request" type="button" className="ti-btn ti-btn-secondary" onClick={() => openAction('signature')}><i className="fa fa-pencil-square-o me-2" />Send signature request</button> : null}
        {canApplySignatures && document.status === 'approved' && document.current_version?.mime_type === 'application/pdf' ? <button key="apply-signature" type="button" className="ti-btn ti-btn-secondary" onClick={() => openAction('apply_signature')}><i className="fa fa-pencil me-2" />Sign document</button> : null}
        {canManageRetention ? <button key="retention" type="button" className="ti-btn ti-btn-light" onClick={() => openAction('retention')}><i className="fa fa-shield me-2" />Retention</button> : null}
        {variant === 'modal' ? <button key="close" type="button" className="ti-btn ti-btn-light" onClick={onClose}>Close</button> : null}
    </> : null;

    return <>
        <DocumentDetailsContainer variant={variant} document={document} permissions={permissions} footer={footer} onClose={onClose} onEdit={onEdit} onManageAccess={onManageAccess} onDelete={onDelete}>
            {document ? <div>
                <nav className="mb-5 flex overflow-x-auto border-b">{tabs.map(tab => <button key={tab} type="button" onClick={() => setActiveTab(tab)} className={`px-4 py-3 text-sm font-medium border-b-2 ${activeTab === tab ? 'border-primary text-primary' : 'border-transparent text-gray-500'}`}>{tab}</button>)}</nav>

                {activeTab === 'Overview' ? <div className="grid gap-4 sm:grid-cols-2">
                    <Info label="Matter" value={`${document.matter?.reference_number ?? '—'} — ${document.matter?.client?.name ?? ''}`} />
                    <Info label="Litigation case" value={document.litigation_case ? `${document.litigation_case.case_number} — ${document.litigation_case.case_title}` : 'Not linked'} />
                    <Info label="Responsible lawyer" value={document.responsible_lawyer?.name ?? '—'} />
                    <Info label="Current version" value={versionLabel(document.current_version)} />
                    <Info label="Confidentiality" value={label(document.confidentiality_classification)} />
                    <Info label="Source template" value={document.source_template?.name ?? 'Not generated from a template'} />
                    <Info label="Created" value={date(document.created_at)} />
                    <Info label="Last modified" value={date(document.updated_at)} />
                    <div className="sm:col-span-2"><Info label="Description" value={document.description || 'No description provided.'} /></div>
                </div> : null}

                {activeTab === 'Versions' ? <div className="space-y-5">
                    <div className="overflow-x-auto"><table className="ti-custom-table w-full"><thead><tr><th>Version</th><th>File</th><th>Created by</th><th>Created</th><th className="text-end">Actions</th></tr></thead><tbody>{(document.versions ?? []).slice().reverse().map((version: any) => <tr key={version.id}><td>{version.version} {version.is_current ? <span className="ms-1 rounded bg-green-100 px-2 py-0.5 text-xs text-green-700">Active</span> : null}{document.finalized_version_id === version.id ? <span className="ms-1 rounded bg-indigo-100 px-2 py-0.5 text-xs text-indigo-700">Finalized</span> : null}</td><td>{version.file_name}</td><td>{versionActor(document, version)}</td><td>{date(version.created_at)}</td><td className="text-end"><button type="button" className="h-8 w-8 rounded-full p-0 ti-btn ti-btn-soft-primary" title="View document" onClick={() => download(version)} disabled={downloading === version.id}><i className={`fa ${downloading === version.id ? 'fa-spinner fa-spin' : 'fa-eye'}`} /></button>{canRollback && !version.is_current ? <button type="button" className="ms-1 h-8 w-8 rounded-full p-0 ti-btn ti-btn-soft-warning" title="Make active version" onClick={() => rollback(version)}><i className="fa fa-history" /></button> : null}</td></tr>)}</tbody></table></div>
                    {canVersion && document.status !== 'pending_review' && !document.signature_locked ? <div><h5 className="mb-2 font-semibold">Upload a new version</h5>{document.status === 'finalized' ? <p className="mb-2 text-sm text-amber-700">A new upload preserves the finalized version and starts a new draft approval cycle.</p> : null}<FilePondUploader url={`/api/documents/${document.id}/versions`} onSuccess={async () => { notify.toastSuccessMessage('New version uploaded'); await onRefresh(); }} onError={() => notify.toastErrorMessage('Version upload failed')} /></div> : null}
                </div> : null}

                {activeTab === 'Approval' ? <div className="space-y-4">
                    <div className="grid gap-4 sm:grid-cols-3"><Info label="Status" value={label(document.status)} /><Info label="Reviewer" value={document.reviewer?.name ?? '—'} /><Info label="Approved by" value={document.approved_by?.name ? `${document.approved_by.name} · ${date(document.approved_at)}` : '—'} /></div>
                    {(document.approval_actions ?? []).length ? <div className="space-y-3">{document.approval_actions.map((item: any) => <div key={item.id} className="rounded-lg border p-3"><div className="flex items-center justify-between gap-3"><strong>{label(item.action)}</strong><span className="text-xs text-gray-500">{date(item.created_at)}</span></div><div className="mt-1 text-sm text-gray-600">{item.actor?.name ?? 'System'} · {label(item.previous_status)} → {label(item.new_status)}</div>{item.comments ? <p className="mt-2 text-sm">{item.comments}</p> : null}</div>)}</div> : <p className="text-sm text-gray-500">No approval history yet.</p>}
                </div> : null}

                {activeTab === 'Signatures' ? <div className="space-y-4">
                    {(document.signature_requests ?? []).length ? document.signature_requests.map((request: any) => <div key={request.id} className="rounded-lg border p-4"><div className="flex items-start justify-between gap-3"><div><div className="font-semibold">Request for {request.version?.version}</div><div className="text-sm text-gray-500">Signing method: {request.provider === 'internal' ? 'Secure internal signing' : request.provider || 'Legacy request'} · Created {date(request.created_at)}</div></div><div className="flex items-center gap-2"><span className={`rounded px-2 py-1 text-xs ${statusClass(request.status)}`}>{label(request.status)}</span>{canManageSignatureStatus && ['draft', 'pending', 'failed'].includes(request.status) ? <button type="button" className="h-8 w-8 rounded-full p-0 ti-btn ti-btn-soft-primary" title="Update signature status" onClick={() => openAction('signature_status', request)}><i className="fa fa-pencil" /></button> : null}</div></div><div className="mt-3 space-y-2">{request.signatories?.map((person: any) => <div key={person.id} className="flex justify-between rounded bg-gray-50 px-3 py-2 text-sm"><span>{person.name} · {person.email}</span><span>{label(person.status)}</span></div>)}</div>{request.status === 'awaiting_confirmation' && (request.requested_by?.id === currentUser?.id || canManageSignatureStatus) ? <div className="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3"><p className="mb-3 text-sm text-amber-800">All signatories have submitted. Preview the PDF with the signatures in their selected positions, then confirm or reject it.</p><div className="flex flex-wrap gap-2"><button type="button" className="ti-btn ti-btn-light" onClick={() => previewPendingSignature(request)}><i className="fa fa-eye me-2" />Preview submission</button><button type="button" className="ti-btn ti-btn-success" onClick={() => confirmSignatureSubmission(request)}><i className="fa fa-check me-2" />Confirm and approve</button><button type="button" className="ti-btn ti-btn-danger" onClick={() => rejectSignatureSubmission(request)}><i className="fa fa-times me-2" />Reject</button></div></div> : null}{!request.provider ? <p className="mt-3 text-sm text-amber-700">The request is stored as a draft until an approved electronic-signature provider is configured.</p> : null}</div>) : <p className="text-sm text-gray-500">No electronic-signature requests have been recorded.</p>}</div> : null}

                {activeTab === 'Retention' ? <div className="grid gap-4 sm:grid-cols-2"><Info label="Retain until" value={document.retention_until ? new Date(document.retention_until).toLocaleDateString() : 'No retention date'} /><Info label="Legal hold" value={document.legal_hold ? 'Active' : 'Not active'} />{document.legal_hold ? <><Info label="Placed by" value={document.legal_hold_by?.name ?? '—'} /><Info label="Placed on" value={date(document.legal_hold_at)} /><div className="sm:col-span-2"><Info label="Reason" value={document.legal_hold_reason ?? '—'} /></div></> : null}</div> : null}
            </div> : null}
        </DocumentDetailsContainer>

        <Modal open={Boolean(action)} onClose={() => setAction(null)} title={actionTitle(action)} maxWidthClassName="max-w-lg" footer={<><button type="button" className="ti-btn ti-btn-light" onClick={() => setAction(null)}>Cancel</button><button type="submit" form="document-workflow-action" className="ti-btn ti-btn-primary" disabled={submitting}>{submitting ? 'Saving…' : action === 'apply_signature' ? 'Apply signature' : 'Save'}</button></>}>
            <form id="document-workflow-action" className="space-y-4" onSubmit={submitAction}>
                {action === 'submit' ? <><Field label="Reviewer"><select className="ti-form-input" required value={reviewerId} onChange={event => setReviewerId(event.target.value)}><option value="">Select reviewer</option>{reviewers.map(reviewer => <option key={reviewer.id} value={reviewer.id}>{reviewer.name} · {reviewer.email}</option>)}</select></Field><TextArea label="Submission comments" value={comments} onChange={setComments} /></> : null}
                {action === 'review' ? <><Field label="Decision"><select className="ti-form-input" value={decision} onChange={event => setDecision(event.target.value)}><option value="approved">Approve</option><option value="changes_requested">Request changes</option></select></Field><TextArea label={decision === 'changes_requested' ? 'Comments (required)' : 'Comments'} required={decision === 'changes_requested'} value={comments} onChange={setComments} /></> : null}
                {action === 'signature' ? <><Field label="Signatory name"><input className="ti-form-input" required value={signatory.name} onChange={event => setSignatory({...signatory, name: event.target.value})} /></Field><Field label="Signatory email"><input className="ti-form-input" type="email" required value={signatory.email} onChange={event => setSignatory({...signatory, email: event.target.value})} /></Field><Field label="Signatory role"><input className="ti-form-input" value={signatory.role} onChange={event => setSignatory({...signatory, role: event.target.value})} placeholder="e.g. Client, Partner" /></Field><p className="text-sm text-gray-500">The signatory receives a secure, expiring link by email and verifies ownership with a one-time code before signing.</p></> : null}
{action === 'apply_signature' ? <>
    <div className="grid grid-cols-3 gap-2 rounded-lg bg-gray-100 p-1">
        {(['saved', 'drawn', 'uploaded'] as SignatureMode[]).map(mode => <button key={mode} type="button" className={`rounded-md px-3 py-2 text-sm font-medium ${signatureMode === mode ? 'bg-white text-primary shadow-sm' : 'text-gray-600'}`} onClick={() => { setSignatureMode(mode); setSignatureFile(null); }}>{label(mode)}</button>)}
    </div>
    {signatureMode === 'saved' ? <div className="space-y-2">
        {savedSignatures.length ? savedSignatures.map(signature => <label key={signature.id} className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 ${selectedSignatureId === String(signature.id) ? 'border-primary bg-primary/5' : ''}`}><input type="radio" name="saved_signature" value={signature.id} checked={selectedSignatureId === String(signature.id)} onChange={event => setSelectedSignatureId(event.target.value)} /><img src={`/api/document-signatures/${signature.id}/image`} alt={`${signature.label} signature`} className="h-12 w-36 rounded border bg-white object-contain" /><span className="min-w-0 flex-1 text-sm font-medium">{signature.label}{signature.is_default ? ' (default)' : ''}</span><button type="button" className="h-8 w-8 rounded-full p-0 ti-btn ti-btn-soft-danger" title="Delete saved signature" onClick={event => { event.preventDefault(); event.stopPropagation(); deleteSavedSignature(signature); }}><i className="fa fa-trash" /></button></label>) : <p className="rounded-lg border border-dashed p-4 text-center text-sm text-gray-500">No saved signatures yet. Draw or upload one and select “Save for future use”.</p>}
    </div> : null}
    {signatureMode === 'drawn' ? <SignatureCanvas onChange={setSignatureFile} /> : null}
    {signatureMode === 'uploaded' ? <Field label="Signature PNG"><input className="ti-form-input" type="file" accept="image/png,.png" required onChange={event => setSignatureFile(event.target.files?.[0] ?? null)} /><span className="mt-1 block text-xs text-gray-500">Accepted dimensions: 20×10 to 2000×1000 pixels. Recommended: approximately 900×300 pixels with a transparent background. Maximum file size: 2 MB.</span></Field> : null}
    {signatureMode !== 'saved' ? <><label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={saveSignature} onChange={event => setSaveSignature(event.target.checked)} />Save this signature for future documents</label>{saveSignature ? <Field label="Saved signature name"><input className="ti-form-input" required value={signatureLabel} onChange={event => setSignatureLabel(event.target.value)} /></Field> : null}</> : null}
    <div className="grid gap-3 sm:grid-cols-3"><Field label="PDF page"><input className="ti-form-input" type="number" min="1" required value={signaturePage} onChange={event => setSignaturePage(event.target.value)} /></Field><Field label="Position"><select className="ti-form-input" value={signaturePosition} onChange={event => setSignaturePosition(event.target.value)}><option value="bottom-left">Bottom left</option><option value="bottom-center">Bottom centre</option><option value="bottom-right">Bottom right</option></select></Field><Field label="Size"><select className="ti-form-input" value={signatureWidth} onChange={event => setSignatureWidth(event.target.value)}><option value="12">Small</option><option value="20">Medium</option><option value="28">Large</option></select></Field></div>
    {(document.signature_requests ?? []).some((request: any) => ['draft', 'pending'].includes(request.status)) ? <Field label="Related signature request (optional)"><select className="ti-form-input" value={linkedSignatureRequestId} onChange={event => setLinkedSignatureRequestId(event.target.value)}><option value="">No linked request</option>{document.signature_requests.filter((request: any) => ['draft', 'pending'].includes(request.status)).map((request: any) => <option key={request.id} value={request.id}>Request #{request.id} · {label(request.status)}</option>)}</select></Field> : null}
    <p className="text-sm text-amber-700">The signed PDF will be stored as the next active version of this document. Earlier versions remain available in version history.</p>
</> : null}
{action === 'retention' ? <><Field label="Retention date"><input className="ti-form-input" type="date" value={retentionUntil} onChange={event => setRetentionUntil(event.target.value)} /></Field><label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={legalHold} onChange={event => setLegalHold(event.target.checked)} />Place this document on legal hold</label>{legalHold ? <TextArea label="Legal-hold reason" required value={legalHoldReason} onChange={setLegalHoldReason} /> : null}</> : null}
                {action === 'signature_status' ? <><Field label="Status"><select className="ti-form-input" value={signatureStatus} onChange={event => setSignatureStatus(event.target.value)}>{signatureRequest?.status === 'draft' || signatureRequest?.status === 'failed' ? <option value="pending">Pending with provider</option> : null}<option value="cancelled">Cancelled</option>{signatureRequest?.status === 'pending' ? <><option value="declined">Declined</option><option value="failed">Failed</option></> : null}</select></Field>{signatureStatus === 'pending' ? <Field label="Provider reference"><input className="ti-form-input" required value={externalReference} onChange={event => setExternalReference(event.target.value)} /></Field> : null}<TextArea label="Remarks" value={comments} onChange={setComments} /><p className="text-sm text-gray-500">Internal signing completes automatically when the email-verified signatory submits their signature. Use this action only to cancel or manage exceptional legacy requests.</p></> : null}
            </form>
        </Modal>
    </>;
}

function DocumentDetailsContainer({variant, document, permissions, footer, onClose, onEdit, onManageAccess, onDelete, children}: {
    variant: 'modal' | 'page';
    document: any | null;
    permissions: string[];
    footer: React.ReactNode;
    onClose: () => void;
    onEdit?: () => void;
    onManageAccess?: () => void;
    onDelete?: () => void;
    children: React.ReactNode;
}): JSX.Element {
    if (variant === 'modal') {
        return <Modal open={Boolean(document)} onClose={onClose} title={document ? <div><div className="flex items-center gap-2"><h3 className="text-base font-semibold">{document.title}</h3><span className={`rounded px-2 py-0.5 text-xs ${statusClass(document.status)}`}>{label(document.status)}</span></div><p className="text-xs text-gray-500">{document.matter?.reference_number} · {label(document.document_type)}</p></div> : undefined} maxWidthClassName="max-w-4xl" bodyClassName="max-h-[72vh] overflow-y-auto" footer={footer}>{children}</Modal>;
    }

    const canUpdate = permissions.includes('documents_update') && document?.status !== 'finalized' && !document?.signature_locked;
    const canShare = permissions.includes('documents_share');
    const canDelete = permissions.includes('documents_delete') && !document?.signature_locked;

    return <div className="space-y-5">
        <div className="box mb-0">
            <div className="box-body">
                <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
                    <div className="flex min-w-0 items-center gap-4">
                        <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full border-2 border-blue-200 bg-blue-50 text-2xl text-primary"><i className="fa fa-file-text-o" /></div>
                        <div className="min-w-0">
                            <div className="mb-2 flex flex-wrap items-center gap-2"><h2 className="truncate text-xl font-semibold text-gray-900 dark:text-white">{document?.title}</h2><span className={`rounded px-2 py-1 text-xs ${statusClass(document?.status)}`}>{label(document?.status)}</span>{document?.legal_hold ? <span className="rounded bg-red-100 px-2 py-1 text-xs text-red-700">Legal hold</span> : null}</div>
                            <div className="flex flex-wrap gap-x-5 gap-y-2 text-sm text-gray-500"><span><i className="fa fa-folder-open-o me-2" />{document?.matter?.reference_number ?? 'No matter'}</span><span><i className="fa fa-tag me-2" />{label(document?.document_type)}</span><span><i className="fa fa-code-fork me-2" />{versionLabel(document?.current_version)}</span></div>
                        </div>
                    </div>
                    <div className="flex flex-wrap gap-2 lg:justify-end">
                        <button type="button" className="ti-btn ti-btn-light" onClick={onClose}><i className="fa fa-arrow-left me-2" />Back</button>
                        {canUpdate && onEdit ? <button type="button" className="ti-btn ti-btn-warning" onClick={onEdit}><i className="fa fa-pencil me-2" />Edit</button> : null}
                        {canShare && onManageAccess ? <button type="button" className="ti-btn ti-btn-secondary" onClick={onManageAccess}><i className="fa fa-users me-2" />Manage access</button> : null}
                        {canDelete && onDelete ? <button type="button" className="ti-btn ti-btn-danger" onClick={onDelete}><i className="fa fa-trash me-2" />Delete</button> : null}
                    </div>
                </div>
                <div className="mt-5 flex flex-wrap gap-2 border-t pt-4">{footer}</div>
            </div>
        </div>
        <div className="box mb-0"><div className="box-body">{children}</div></div>
    </div>;
}

function Info({label: title, value}: {label: string; value: React.ReactNode}): JSX.Element {
    return <div className="rounded-lg border bg-gray-50 p-3"><div className="text-xs font-medium uppercase text-gray-500">{title}</div><div className="mt-1 text-sm text-gray-900">{value}</div></div>;
}

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 TextArea({label: title, value, onChange, required = false}: {label: string; value: string; onChange: (value: string) => void; required?: boolean}): JSX.Element {
    return <Field label={title}><textarea className="ti-form-input" rows={3} required={required} value={value} onChange={event => onChange(event.target.value)} /></Field>;
}

function actionTitle(action: Action): string {
    return ({submit: 'Submit document for review', review: 'Review document', signature: 'Create signature request', apply_signature: 'Sign document', retention: 'Retention and legal hold', signature_status: 'Update signature request'} as Record<string, string>)[action ?? ''] ?? '';
}