import { useState } from "react";
import { changeEmail, resendVerificationEmail } from "~/fns/account-security";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/components/ui/Button";
import { ErrorBanner, TextField } from "~/components/ui/Field";
import { Badge, Panel } from "~/components/ui/Primitives";

export function EmailPanel({
  email,
  verified,
  hasPassword,
}: {
  email: string;
  verified: boolean;
  hasPassword: boolean;
}) {
  const resend = useAction(resendVerificationEmail, { invalidate: false });
  const change = useAction(changeEmail, { invalidate: false });
  const [notice, setNotice] = useState<string | null>(null);

  return (
    <Panel title="Email">
      <div className="space-y-4 p-4 text-sm">
        <ErrorBanner message={resend.error ?? change.error} />
        {notice && <p className="text-emerald-300">{notice}</p>}
        <div className="flex items-center gap-3">
          <span className="font-medium text-gray-100">{email}</span>
          {verified ? <Badge tone="accent">Verified</Badge> : <Badge tone="amber">Unverified</Badge>}
          {!verified && (
            <Button
              size="sm"
              className="ml-auto"
              pending={resend.pending}
              onClick={async () => {
                if (await resend.run(undefined)) setNotice(`Verification email sent to ${email}.`);
              }}
            >
              Resend verification
            </Button>
          )}
        </div>
        <form
          method="post"
          className="space-y-3"
          onSubmit={async (event) => {
            event.preventDefault();
            const formElement = event.currentTarget;
            const form = new FormData(formElement);
            const next = String(form.get("email") ?? "");
            const result = await change.run({ data: { email: next, password: String(form.get("password") ?? "") } });
            if (result) {
              formElement.reset();
              setNotice(`Check ${next} for a link to confirm the change.`);
            }
          }}
        >
          <TextField label="New email address" name="email" type="email" autoComplete="email" required />
          {hasPassword && (
            <TextField
              label="Current password"
              name="password"
              type="password"
              autoComplete="current-password"
              required
            />
          )}
          <Button type="submit" pending={change.pending}>
            Change email
          </Button>
        </form>
      </div>
    </Panel>
  );
}