import { Head, useForm } from '@inertiajs/react';
import { MailCheck, ShieldAlert, ShieldCheck, Users } from 'lucide-react';
import { Callout, SectionCard } from '@/components/crm/page-header';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import { update as updatePortal } from '@/routes/portal';
import type { PortalSettingsProps } from '@/types';

/**
 * Settings -> Customer portal.
 *
 * The behaviour of the portal rather than its looks: whether somebody who
 * opens an account has to confirm the email address before they can see their
 * household's address, systems and reports.
 *
 * Confirmation is what proves the address is theirs, so it is on by default.
 * An installation that already knows its customers by phone can turn it off
 * here and the sign-up goes straight through.
 */
export default function CustomerPortalSettings({
    portal,
}: PortalSettingsProps) {
    const form = useForm({ verify_email: portal.verify_email });

    const submit = () => {
        form.put(updatePortal().url, { preserveScroll: true });
    };

    const off = !form.data.verify_email;
    const changed = form.data.verify_email !== portal.verify_email;

    return (
        <>
            <Head title="Customer portal" />

            <Callout
                tone={off ? 'warning' : 'success'}
                icon={off ? ShieldAlert : ShieldCheck}
                title={
                    off
                        ? 'Email confirmation is off'
                        : 'Every new account confirms its address first'
                }
            >
                {off
                    ? 'A new portal account opens the moment it is created. That also covers any account still waiting to confirm, so this is only for an installation that is sure it can tell who is signing up.'
                    : 'A new account is signed in but sees nothing until the link in its email is opened. That link is what proves the address belongs to the person asking.'}
            </Callout>

            <SectionCard
                title="Creating an account"
                description="Applies to the sign-up form on the portal landing page, and to any account that has not confirmed its address yet."
                icon={Users}
                tone="solar"
            >
                <div className="flex items-start gap-3">
                    <Checkbox
                        id="verify_email"
                        className="mt-0.5"
                        checked={form.data.verify_email}
                        onCheckedChange={(checked) =>
                            form.setData('verify_email', checked === true)
                        }
                    />
                    <div className="min-w-0">
                        <Label htmlFor="verify_email">
                            Ask new accounts to confirm their email address
                        </Label>
                        <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
                            When this is on, we email a signed link as soon as
                            somebody registers and hold the portal shut until it
                            is opened. When it is off, no email is sent and the
                            account works immediately.
                        </p>
                        <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
                            Existing customers are matched by email and phone
                            either way; this only changes whether we prove the
                            address before showing what is on the account.
                        </p>
                    </div>
                </div>

                <div className="mt-5 flex flex-wrap items-center gap-3 border-t border-hairline pt-4">
                    <Button
                        onClick={submit}
                        disabled={form.processing || !changed}
                    >
                        {form.processing && <Spinner />}
                        Save
                    </Button>

                    {!changed ? (
                        <span className="text-xs text-muted-foreground">
                            {off
                                ? 'Confirmation is off.'
                                : 'Confirmation is on, which is the default.'}
                        </span>
                    ) : (
                        <span className="text-xs text-muted-foreground">
                            {off
                                ? 'Saving turns confirmation off for everybody who signs up.'
                                : 'Saving puts the confirmation step back for everybody who signs up.'}
                        </span>
                    )}
                </div>
            </SectionCard>

            <p className="flex items-start gap-2 text-xs leading-relaxed text-muted-foreground">
                <MailCheck className="mt-0.5 size-3.5 shrink-0" />
                The confirmation email is sent through Settings → Email
                delivery, so check that server works before relying on this.
            </p>
        </>
    );
}
