import { useState, type FormEvent } from 'react';
import { Link } from 'react-router-dom';
import { Heading } from '../../components/ui/heading';
import { InputControl } from '../../components/ui/input-control';
import { Button } from '../../components/ui/button';
import { DismissibleAlert } from '../../components/ui/dismissible-alert';
import { requestNeutralAccount, type NeutralAccountOutcome } from '../../services/neutralAccountRequest';

// Creating an account on the org-less patient portal: an email and a name, no practice involved.
export const NeutralSignupPage = () => {
    const [email, setEmail] = useState('');
    const [firstname, setFirstname] = useState('');
    const [lastname, setLastname] = useState('');
    // The age-gated features read this from the record, so the account is not made without it.
    const [birthdate, setBirthdate] = useState('');
    const [submitting, setSubmitting] = useState(false);
    const [outcome, setOutcome] = useState<NeutralAccountOutcome | null>(null);

    const birthdateInFuture = birthdate !== '' && birthdate > new Date().toISOString().slice(0, 10);
    const canSubmit = email.trim() !== '' && firstname.trim() !== '' && lastname.trim() !== ''
        && birthdate !== '' && !birthdateInFuture && !submitting;

    const onSubmit = async (event: FormEvent) => {
        event.preventDefault();
        if (!canSubmit) return;
        setSubmitting(true);
        setOutcome(null);
        setOutcome(await requestNeutralAccount({ email, firstname, lastname, birthdate }));
        setSubmitting(false);
    };

    // Never says the account was created: the server answers the same way for an address it already holds.
    if (outcome?.outcome === 'accepted') {
        return (
            <div className="p-8 max-w-lg mx-auto space-y-3">
                <DismissibleAlert status="success">
                    Check your email. If that address can be used, we have sent what you need to sign in.
                </DismissibleAlert>
                <Link to="/login">Sign in</Link>
            </div>
        );
    }

    return (
        <form onSubmit={onSubmit} noValidate className="p-8 max-w-lg mx-auto space-y-3">
            <Heading level={2}>Create your Akashic account</Heading>
            <p>Your record belongs to you, not to a practice. You can add your practices later.</p>
            {outcome?.outcome === 'refused' && <DismissibleAlert status="error">{outcome.message}</DismissibleAlert>}
            {outcome?.outcome === 'unreachable' && (
                <DismissibleAlert status="error">We could not reach Akashic. Check your connection and try again.</DismissibleAlert>
            )}
            <InputControl label="Email" type="email" autoComplete="email" value={email} onChange={(value) => setEmail(value ?? '')} />
            <InputControl label="First name" autoComplete="given-name" value={firstname} onChange={(value) => setFirstname(value ?? '')} />
            <InputControl label="Last name" autoComplete="family-name" value={lastname} onChange={(value) => setLastname(value ?? '')} />
            <InputControl label="Date of birth" type="date" autoComplete="bday" value={birthdate} onChange={(value) => setBirthdate(value ?? '')} />
            {birthdateInFuture && <p className="text-sm text-destructive">Date of birth cannot be in the future.</p>}
            <div className="flex items-center justify-between">
                <Link to="/login">I already have an account</Link>
                <Button type="submit" disabled={!canSubmit}>{submitting ? 'Creating...' : 'Create account'}</Button>
            </div>
        </form>
    );
};

export default NeutralSignupPage;