"use client";

import { IconFingerprint } from "@tabler/icons-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { OnboardingFrame } from "@/components/ui/onboarding-frame";

const STEPS = 3;
const H1 =
  "text-center font-serif font-medium text-3xl text-foreground leading-tight tracking-tight sm:text-4xl";
const SUB = "mt-2 text-center text-base text-muted-foreground";
const BLACK =
  "bg-foreground text-background hover:bg-foreground/90 disabled:opacity-50";
const TERMS_LINK =
  "underline decoration-foreground/30 underline-offset-4 hover:decoration-foreground";

function BackRow({ onBack }: { onBack: () => void }) {
  return (
    <div className="mt-6 flex items-center gap-6 text-muted-foreground text-sm">
      <button
        className="transition-colors hover:text-foreground"
        onClick={onBack}
        type="button"
      >
        Назад
      </button>
    </div>
  );
}

export default function Particle() {
  const [step, setStep] = useState(0);
  const [terms, setTerms] = useState(false);
  const [marketing, setMarketing] = useState(false);

  const next = () => setStep((s) => Math.min(s + 1, STEPS - 1));
  const back = () => setStep((s) => Math.max(s - 1, 0));

  return (
    <OnboardingFrame className="flex-none py-8" current={step} steps={STEPS}>
      {step === 0 ? (
        <div className="flex w-full max-w-130 flex-col items-center">
          <h1 className={H1}>Создадим ваш аккаунт</h1>
          <p className={SUB}>Несколько пунктов для подтверждения</p>
          <div className="mt-10 w-full rounded-2xl border bg-card p-5 sm:p-6">
            <div className="flex flex-col gap-5">
              <label className="flex cursor-pointer items-start gap-3 text-foreground/90 text-sm leading-relaxed">
                <Checkbox
                  checked={terms}
                  className="mt-1"
                  onCheckedChange={(v) => setTerms(v === true)}
                />
                <span>
                  Я принимаю{" "}
                  <a
                    className={TERMS_LINK}
                    href="/terms"
                    rel="noreferrer"
                    target="_blank"
                  >
                    Условия использования
                  </a>{" "}
                  Oracul и{" "}
                  <a
                    className={TERMS_LINK}
                    href="/aup"
                    rel="noreferrer"
                    target="_blank"
                  >
                    Политику допустимого использования
                  </a>{" "}
                  и подтверждаю, что мне исполнилось 18 лет.
                </span>
              </label>
              <label className="flex cursor-pointer items-start gap-3 text-foreground/90 text-sm leading-relaxed">
                <Checkbox
                  checked={marketing}
                  className="mt-1"
                  onCheckedChange={(v) => setMarketing(v === true)}
                />
                <span>Присылать новости и советы по работе с Oracul.</span>
              </label>
            </div>
          </div>
          <Button
            className={`mt-8 w-full max-w-105 ${BLACK}`}
            disabled={!terms}
            onClick={next}
            size="lg"
          >
            Продолжить
          </Button>
        </div>
      ) : step === 1 ? (
        <div className="flex w-full max-w-130 flex-col items-center">
          <h1 className={H1}>Как к вам обращаться?</h1>
          <p className={SUB}>Чтобы Oracul знал, как вас называть.</p>
          <div className="mt-10 flex w-full max-w-105 flex-col gap-4">
            <Field>
              <FieldLabel className="sr-only">Имя</FieldLabel>
              <Input placeholder="Введите имя" size="lg" type="text" />
            </Field>
            <Button className={`w-full ${BLACK}`} onClick={next} size="lg">
              Продолжить
            </Button>
          </div>
          <BackRow onBack={back} />
        </div>
      ) : (
        <div className="flex w-full max-w-110 flex-col items-center">
          <span
            aria-hidden="true"
            className="flex size-14 items-center justify-center rounded-2xl bg-muted text-foreground"
          >
            <IconFingerprint className="size-7" stroke={1} />
          </span>
          <h1 className={`mt-6 ${H1}`}>Входите быстрее</h1>
          <p className={`${SUB} max-w-sm`}>
            Добавьте passkey — и вместо письма со ссылкой будете входить
            биометрией, PIN-кодом или аппаратным ключом.
          </p>
          <div className="mt-10 flex w-full max-w-105 flex-col gap-2">
            <Button
              className={`w-full ${BLACK}`}
              onClick={() => setStep(0)}
              size="lg"
            >
              <IconFingerprint className="size-5" stroke={1.75} />
              Добавить passkey
            </Button>
            <Button
              className="w-full"
              onClick={() => setStep(0)}
              size="lg"
              variant="ghost"
            >
              Не сейчас
            </Button>
          </div>
          <BackRow onBack={back} />
        </div>
      )}
    </OnboardingFrame>
  );
}