"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export function RegisterForm() {
  const [state, setState] = useState({ name: "", email: "", password: "", newsletter: false });
  const [msg, setMsg] = useState("");
  async function submit(e: React.FormEvent) {
    e.preventDefault();
    const res = await fetch("/api/auth/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(state),
    });
    const data = await res.json();
    setMsg(data.message ?? data.error ?? "Fertig.");
  }
  return (
    <form
      onSubmit={submit}
      className="space-y-4 border-2 border-ink-primary bg-surface-base p-6 shadow-[6px_6px_0_rgb(var(--ink-primary))]"
    >
      <p
        className="mb-1 text-[0.65rem] font-bold uppercase tracking-[0.18em] text-ink-tertiary"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        Neu hier?
      </p>
      <h2 className="font-display text-xl font-bold uppercase tracking-tight text-ink-primary">
        Konto erstellen
      </h2>
      <Input placeholder="Name optional" value={state.name} onChange={(e) => setState({ ...state, name: e.target.value })} />
      <Input type="email" placeholder="E-Mail" required value={state.email} onChange={(e) => setState({ ...state, email: e.target.value })} />
      <Input
        type="password"
        placeholder="Passwort, mindestens 10 Zeichen"
        required
        minLength={10}
        value={state.password}
        onChange={(e) => setState({ ...state, password: e.target.value })}
      />
      <label className="flex items-start gap-3 text-sm leading-6 text-ink-secondary">
        <input
          type="checkbox"
          className="mt-1 border-2 border-ink-primary"
          checked={state.newsletter}
          onChange={(e) => setState({ ...state, newsletter: e.target.checked })}
        />
        <span>
          Newsletter abonnieren: neue Tools, Updates, Premium-Funktionen und wichtige Änderungen.
          Nicht vorausgewählt, Bestätigung per Double-Opt-in.
        </span>
      </label>
      <Button type="submit" className="w-full">
        Registrieren
      </Button>
      {msg && (
        <p className="border-2 border-brand-500 bg-brand-50 p-3 text-sm text-ink-primary">{msg}</p>
      )}
    </form>
  );
}

export function LoginForm() {
  const [state, setState] = useState({ email: "", password: "", code: "", challengeId: "" });
  const [msg, setMsg] = useState("");
  async function login(e: React.FormEvent) {
    e.preventDefault();
    const res = await fetch("/api/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email: state.email, password: state.password }),
    });
    const data = await res.json();
    if (data.challengeId) setState((current) => ({ ...current, challengeId: data.challengeId }));
    setMsg(data.message ?? data.error ?? "");
  }
  async function verify(e: React.FormEvent) {
    e.preventDefault();
    const res = await fetch("/api/auth/2fa/verify", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ challengeId: state.challengeId, code: state.code }),
    });
    const data = await res.json();
    if (data.ok) window.location.href = "/account";
    else setMsg(data.error ?? "Code konnte nicht bestätigt werden.");
  }
  return (
    <form
      onSubmit={state.challengeId ? verify : login}
      className="space-y-4 border-2 border-ink-primary bg-surface-base p-6 shadow-[6px_6px_0_rgb(var(--brand-500))]"
    >
      <p
        className="mb-1 text-[0.65rem] font-bold uppercase tracking-[0.18em] text-ink-tertiary"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        Bereits dabei?
      </p>
      <h2 className="font-display text-xl font-bold uppercase tracking-tight text-ink-primary">
        Anmelden
      </h2>
      {!state.challengeId ? (
        <>
          <Input
            type="email"
            placeholder="E-Mail"
            required
            value={state.email}
            onChange={(e) => setState({ ...state, email: e.target.value })}
          />
          <Input
            type="password"
            placeholder="Passwort"
            required
            value={state.password}
            onChange={(e) => setState({ ...state, password: e.target.value })}
          />
          <Button type="submit" className="w-full">
            Login-Code senden
          </Button>
        </>
      ) : (
        <>
          <p className="text-sm text-ink-secondary">
            Gib den Code ein, der per E-Mail gesendet wurde. Er ist nur kurz gültig.
          </p>
          <Input
            inputMode="numeric"
            placeholder="6-stelliger Code"
            required
            value={state.code}
            onChange={(e) => setState({ ...state, code: e.target.value })}
          />
          <Button type="submit" className="w-full">
            Code bestätigen
          </Button>
        </>
      )}
      {msg && (
        <p className="border-2 border-brand-500 bg-brand-50 p-3 text-sm text-ink-primary">{msg}</p>
      )}
      <a
        href="/reset-password"
        className="block text-[0.75rem] font-bold uppercase tracking-[0.1em] text-brand-500 underline underline-offset-4 hover:text-brand-600"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        Passwort vergessen?
      </a>
    </form>
  );
}

export function ResetPasswordForm({ token }: { token?: string }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [msg, setMsg] = useState("");
  async function submit(e: React.FormEvent) {
    e.preventDefault();
    const url = token ? "/api/auth/password-reset/confirm" : "/api/auth/password-reset/request";
    const body = token ? { token, password } : { email };
    const res = await fetch(url, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
    const data = await res.json();
    setMsg(data.message ?? data.error ?? (data.ok ? "Erledigt." : "Fehler."));
  }
  return (
    <form
      onSubmit={submit}
      className="mx-auto max-w-md space-y-4 border-2 border-ink-primary bg-surface-base p-6 shadow-[6px_6px_0_rgb(var(--brand-500))]"
    >
      <p
        className="mb-1 text-[0.65rem] font-bold uppercase tracking-[0.18em] text-ink-tertiary"
        style={{ fontFamily: '"Courier New", monospace' }}
      >
        Passwort
      </p>
      <h1 className="font-display text-2xl font-bold uppercase tracking-tight text-ink-primary">
        Passwort zurücksetzen
      </h1>
      {token ? (
        <Input
          type="password"
          minLength={10}
          required
          placeholder="Neues Passwort"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      ) : (
        <Input
          type="email"
          required
          placeholder="E-Mail"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      )}
      <Button type="submit" className="w-full">
        {token ? "Passwort ändern" : "Reset-Link senden"}
      </Button>
      {msg && (
        <p className="border-2 border-brand-500 bg-brand-50 p-3 text-sm text-ink-primary">{msg}</p>
      )}
    </form>
  );
}