import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../../../components/ui/dialog.tsx';
import { Input } from '../../../../components/ui/input.tsx';
import { useActivationContinuation } from '../../../../hooks/useActivationContinuation';

interface Props {
    open: boolean; onOpenChange(open: boolean): void; patientId: string; patientName?: string; onActivated(isCurrent: () => boolean): void;
}

export default function GivePatientALoginDialog({ open, onOpenChange, patientId, patientName, onActivated }: Props) {
    const flow = useActivationContinuation({ open, childPatientId: patientId, onActivated });
    const subject = patientName?.trim() || 'this patient';
    const changeOpen = (next: boolean) => { if (!next && !flow.retire()) return; onOpenChange(next); };
    return (
        <Dialog open={open} onOpenChange={changeOpen}>
            <DialogContent className="max-w-md">
                <DialogHeader>
                    <DialogTitle>Give {subject} a login</DialogTitle>
                    <DialogDescription>This account can access their existing record and history. No duplicate record is created.</DialogDescription>
                </DialogHeader>
                <div className="space-y-1">
                    <label className="text-sm font-medium" htmlFor="give-login-email">Email address <span className="text-destructive">*</span></label>
                    <Input id="give-login-email" type="email" value={flow.email} onChange={event => flow.setEmail(event.target.value)}
                        disabled={flow.submitting} placeholder="patient@example.com" />
                    {flow.email.trim() && !flow.emailValid && <p className="text-xs text-destructive">Enter a valid email address.</p>}
                    <p className="text-xs text-muted-foreground">Only do this once you are sure this is the right person — you are vouching that they are.</p>
                </div>
                {flow.notice && <p role="status" className="text-sm">{flow.notice}</p>}
                {flow.answer?.caseReference && <p className="text-xs">Reference: {flow.answer.caseReference}</p>}
                {flow.error && <p role="alert" className="text-sm text-destructive">{flow.error}</p>}
                <div className="flex items-center gap-2">
                    <button type="button" className="btn btn-blue" onClick={() => void flow.submit()} disabled={!flow.emailValid || flow.submitting}>
                        {flow.submitting ? (flow.checking ? 'Checking…' : 'Creating login…') : flow.checking ? 'Check status' : 'Create login'}
                    </button>
                    {flow.canStartNew && <button type="button" className="btn btn-blue-ghost" onClick={flow.startNew} disabled={flow.submitting}>Start a new activation</button>}
                    <button type="button" className="btn btn-red-ghost" onClick={() => changeOpen(false)}>Close</button>
                </div>
            </DialogContent>
        </Dialog>
    );
}