"use client";

import { useState } from "react";
import Link from "next/link";
import { Loader2, LockKeyhole, Mail, UserRound } from "lucide-react";

const inputClass = "mt-1 h-10 w-full rounded-lg border border-white/10 bg-white px-3 text-sm font-semibold text-ink-950 placeholder:text-slate-400 focus:border-felt focus:ring-felt";
const labelClass = "block text-[11px] font-bold uppercase text-slate-300";

export function AffiliateLoginForm() {
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(false);

  async function submit(formData: FormData) {
    setLoading(true);
    setMessage("");
    const response = await fetch("/api/affiliation/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: formData.get("email"),
        password: formData.get("password")
      })
    });
    const payload = await response.json();
    setLoading(false);
    if (!payload.ok) {
      setMessage(payload.error?.message ?? "Connexion impossible");
      return;
    }
    window.location.href = "/affiliation/dashboard";
  }

  return (
    <form action={submit} className="space-y-3">
      <label className={labelClass}>
        E-mail
        <input name="email" type="email" required placeholder="affilie@email.com" className={inputClass} />
      </label>
      <label className={labelClass}>
        Mot de passe
        <input name="password" type="password" required placeholder="Votre mot de passe" className={inputClass} />
      </label>
      <button disabled={loading} className="flex h-10 w-full items-center justify-center gap-2 rounded-lg bg-felt text-sm font-black text-ink-950 disabled:opacity-60">
        {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <LockKeyhole className="h-4 w-4" />}
        Connexion
      </button>
      {message ? <p className="rounded-lg border border-ember/25 bg-ember/10 p-2 text-xs font-semibold text-ember">{message}</p> : null}
      <p className="text-center text-xs font-semibold text-slate-500">
        Pas encore affilié ?{" "}
        <Link href="/affiliation/register" className="text-felt">
          S'inscrire
        </Link>
      </p>
    </form>
  );
}

export function AffiliateRegisterForm() {
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(false);

  async function submit(formData: FormData) {
    setLoading(true);
    setMessage("");
    const sources = String(formData.get("trafficSources") ?? "")
      .split(",")
      .map((value) => value.trim())
      .filter(Boolean);

    const response = await fetch("/api/affiliation/auth/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        email: formData.get("email"),
        password: formData.get("password"),
        firstName: formData.get("firstName"),
        lastName: formData.get("lastName"),
        dateOfBirth: formData.get("dateOfBirth"),
        country: formData.get("country"),
        displayName: formData.get("displayName"),
        companyName: formData.get("companyName") || null,
        website: formData.get("website") || null,
        trafficSources: sources,
        payoutMethod: formData.get("payoutMethod") || null,
        acceptedTerms: formData.get("acceptedTerms") === "on"
      })
    });
    const payload = await response.json();
    setLoading(false);
    if (!payload.ok) {
      setMessage(payload.error?.message ?? "Inscription impossible");
      return;
    }
    window.location.href = "/affiliation/dashboard";
  }

  return (
    <form action={submit} className="space-y-3">
      <div className="grid gap-2 sm:grid-cols-2">
        <label className={labelClass}>
          Prénom
          <input name="firstName" required placeholder="Prénom" className={inputClass} />
        </label>
        <label className={labelClass}>
          Nom
          <input name="lastName" required placeholder="Nom" className={inputClass} />
        </label>
      </div>
      <div className="grid gap-2 sm:grid-cols-2">
        <label className={labelClass}>
          E-mail
          <input name="email" type="email" required placeholder="affilie@email.com" className={inputClass} />
        </label>
        <label className={labelClass}>
          Mot de passe
          <input name="password" type="password" required placeholder="12 caractères minimum" className={inputClass} />
        </label>
      </div>
      <div className="grid gap-2 sm:grid-cols-2">
        <label className={labelClass}>
          Date de naissance
          <input name="dateOfBirth" type="date" required className={inputClass} />
        </label>
        <label className={labelClass}>
          Pays
          <select name="country" defaultValue="FR" className={inputClass}>
            <option value="FR">France</option>
            <option value="BE">Belgique</option>
            <option value="CH">Suisse</option>
            <option value="CA">Canada</option>
            <option value="LU">Luxembourg</option>
          </select>
        </label>
      </div>
      <label className={labelClass}>
        Nom public affilié
        <input name="displayName" required placeholder="Votre marque ou pseudo" className={inputClass} />
      </label>
      <div className="grid gap-2 sm:grid-cols-2">
        <label className={labelClass}>
          Société
          <input name="companyName" placeholder="Optionnel" className={inputClass} />
        </label>
        <label className={labelClass}>
          Site web
          <input name="website" type="url" placeholder="https://..." className={inputClass} />
        </label>
      </div>
      <label className={labelClass}>
        Sources de trafic
        <input name="trafficSources" placeholder="SEO, Telegram, Instagram..." className={inputClass} />
      </label>
      <label className={labelClass}>
        Méthode de paiement souhaitée
        <input name="payoutMethod" placeholder="USDT, virement, autre..." className={inputClass} />
      </label>
      <label className="flex items-start gap-2 text-xs leading-5 text-slate-400">
        <input name="acceptedTerms" type="checkbox" required className="mt-1 rounded border-white/10 bg-ink-900 text-felt" />
        J'accepte les conditions du programme d'affiliation et confirme fournir des informations exactes.
      </label>
      <button disabled={loading} className="flex h-10 w-full items-center justify-center gap-2 rounded-lg bg-felt text-sm font-black text-ink-950 disabled:opacity-60">
        {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <UserRound className="h-4 w-4" />}
        Créer mon accès affilié
      </button>
      {message ? <p className="rounded-lg border border-ember/25 bg-ember/10 p-2 text-xs font-semibold text-ember">{message}</p> : null}
      <p className="text-center text-xs font-semibold text-slate-500">
        Déjà inscrit ?{" "}
        <Link href="/affiliation/login" className="text-felt">
          Connexion
        </Link>
      </p>
    </form>
  );
}