import { Card, Checkbox } from '@/Components/ui';
import type { FormErrors, FormShape, UpdateFn } from './types';

type Props = {
    form: FormShape;
    errors: FormErrors;
    update: UpdateFn;
};

export default function SignupsTab({ form, errors, update }: Props) {
    return (
        <Card padding="lg">
            <header className="mb-5">
                <h2 className="text-base font-semibold tracking-tight text-foreground">
                    Signups
                </h2>
                <p className="mt-1 text-[12px] text-muted-foreground">
                    Pause new account creation without taking the marketing
                    site offline.
                </p>
            </header>

            <div className="flex flex-col gap-4">
                <label
                    className="flex items-start gap-3"
                    data-testid="admin-settings-signup-disabled-label"
                >
                    <Checkbox
                        checked={form.signup_disabled}
                        onChange={(e) =>
                            update('signup_disabled', e.target.checked)
                        }
                        wrapperClassName="mt-0.5"
                        data-testid="admin-settings-signup-disabled"
                    />
                    <span>
                        <span className="block text-sm font-medium text-foreground">
                            Disable new user signups
                        </span>
                        <span className="mt-1 block text-[12px] text-muted-foreground">
                            The /register endpoint returns 403 while this is
                            on. Existing users are unaffected.
                        </span>
                    </span>
                </label>
                {errors.signup_disabled && (
                    <p className="text-xs text-destructive">
                        {errors.signup_disabled}
                    </p>
                )}

                <label
                    className="flex items-start gap-3"
                    data-testid="admin-settings-verify-emails-label"
                >
                    <Checkbox
                        checked={form.require_email_verification}
                        onChange={(e) =>
                            update(
                                'require_email_verification',
                                e.target.checked,
                            )
                        }
                        wrapperClassName="mt-0.5"
                        data-testid="admin-settings-verify-emails"
                    />
                    <span>
                        <span className="block text-sm font-medium text-foreground">
                            Require email verification
                        </span>
                        <span className="mt-1 block text-[12px] text-muted-foreground">
                            New users must verify their email before
                            accessing the editor. Disable only if SMTP is
                            unavailable — unverified addresses can sign in
                            and use the app while this is off.
                        </span>
                        {form.require_email_verification === false && (
                            <span
                                className="mt-2 block rounded-md border border-warning/30 bg-warning/10 px-2 py-1 text-[11px] font-medium text-foreground"
                                data-testid="admin-settings-verify-emails-warning"
                            >
                                Warning: signups are accepted without
                                verification.
                            </span>
                        )}
                    </span>
                </label>
                {errors.require_email_verification && (
                    <p className="text-xs text-destructive">
                        {errors.require_email_verification}
                    </p>
                )}

                <label
                    className="flex items-start gap-3"
                    data-testid="admin-settings-signup-consent-label"
                >
                    <Checkbox
                        checked={form.require_signup_consent}
                        onChange={(e) =>
                            update('require_signup_consent', e.target.checked)
                        }
                        wrapperClassName="mt-0.5"
                        data-testid="admin-settings-signup-consent"
                    />
                    <span>
                        <span className="block text-sm font-medium text-foreground">
                            Require consent at signup
                        </span>
                        <span className="mt-1 block text-[12px] text-muted-foreground">
                            New users must tick a Privacy Policy / Terms
                            checkbox to register, and the consent time is
                            recorded on their account (GDPR Art. 7). Links use
                            your Terms / Privacy URLs (App settings), falling
                            back to the built-in /terms and /privacy pages.
                        </span>
                    </span>
                </label>
                {errors.require_signup_consent && (
                    <p className="text-xs text-destructive">
                        {errors.require_signup_consent}
                    </p>
                )}

                <div className="mt-1 border-t border-border pt-4">
                    <p className="mb-3 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
                        Account self-service (GDPR)
                    </p>

                    <label
                        className="flex items-start gap-3"
                        data-testid="admin-settings-allow-data-export-label"
                    >
                        <Checkbox
                            checked={form.allow_data_export}
                            onChange={(e) =>
                                update('allow_data_export', e.target.checked)
                            }
                            wrapperClassName="mt-0.5"
                            data-testid="admin-settings-allow-data-export"
                        />
                        <span>
                            <span className="block text-sm font-medium text-foreground">
                                Let users download their data
                            </span>
                            <span className="mt-1 block text-[12px] text-muted-foreground">
                                Adds a “Download my data” button on the account
                                page (a JSON export of their profile, projects,
                                billing history, and activity). Disable if you
                                handle data-access requests manually.
                            </span>
                        </span>
                    </label>

                    <label
                        className="mt-4 flex items-start gap-3"
                        data-testid="admin-settings-allow-self-delete-label"
                    >
                        <Checkbox
                            checked={form.allow_self_delete}
                            onChange={(e) =>
                                update('allow_self_delete', e.target.checked)
                            }
                            wrapperClassName="mt-0.5"
                            data-testid="admin-settings-allow-self-delete"
                        />
                        <span>
                            <span className="block text-sm font-medium text-foreground">
                                Let users delete their own account
                            </span>
                            <span className="mt-1 block text-[12px] text-muted-foreground">
                                Adds a self-service delete (password-confirmed)
                                on the account page. Past invoices are kept for
                                accounting. Disable if you handle erasure
                                requests manually.
                            </span>
                        </span>
                    </label>
                </div>
            </div>
        </Card>
    );
}
