"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { createClient } from "@/lib/supabase/client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Loader2 } from "lucide-react";

export default function SignupForm() {
  const router = useRouter();
  const [form, setForm] = useState({
    societe: "",
    siret: "",
    prenom: "",
    nom: "",
    telephone: "",
    email: "",
    password: "",
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  function update<K extends keyof typeof form>(key: K, value: string) {
    setForm((f) => ({ ...f, [key]: value }));
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError(null);

    const cleanSiret = form.siret.replace(/\s/g, "");
    if (!/^\d{14}$/.test(cleanSiret)) {
      setError("SIRET invalide (14 chiffres requis).");
      setLoading(false);
      return;
    }
    const cleanPhone = form.telephone.replace(/\s/g, "");
    if (!/^(\+33|0)[6-7]\d{8}$/.test(cleanPhone)) {
      setError("Numéro de portable invalide (format français requis).");
      setLoading(false);
      return;
    }

    const supabase = createClient();
    const { data: signUpData, error: signUpError } = await supabase.auth.signUp({
      email: form.email,
      password: form.password,
    });

    if (signUpError || !signUpData.user) {
      setError(signUpError?.message ?? "Impossible de créer le compte.");
      setLoading(false);
      return;
    }

    const { error: profileError } = await supabase.from("profiles").insert({
      id: signUpData.user.id,
      societe: form.societe,
      siret: cleanSiret,
      prenom: form.prenom,
      nom: form.nom,
      telephone: cleanPhone,
      statut: "en_attente",
      role: "client",
    });

    if (profileError) {
      setError("Compte créé, mais profil incomplet. Contactez le support.");
      setLoading(false);
      return;
    }

    router.refresh();
    router.push("/pending");
  }

  return (
    <form onSubmit={onSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="societe">Nom de la société</Label>
        <Input
          id="societe"
          required
          value={form.societe}
          onChange={(e) => update("societe", e.target.value)}
          placeholder="Serrurerie Dupont"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="siret">SIRET (14 chiffres)</Label>
        <Input
          id="siret"
          inputMode="numeric"
          required
          value={form.siret}
          onChange={(e) => update("siret", e.target.value)}
          placeholder="12345678900012"
        />
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div className="space-y-2">
          <Label htmlFor="prenom">Prénom</Label>
          <Input
            id="prenom"
            required
            value={form.prenom}
            onChange={(e) => update("prenom", e.target.value)}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="nom">Nom</Label>
          <Input
            id="nom"
            required
            value={form.nom}
            onChange={(e) => update("nom", e.target.value)}
          />
        </div>
      </div>
      <div className="space-y-2">
        <Label htmlFor="telephone">Téléphone portable</Label>
        <Input
          id="telephone"
          type="tel"
          inputMode="tel"
          required
          value={form.telephone}
          onChange={(e) => update("telephone", e.target.value)}
          placeholder="06 12 34 56 78"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="email">Email professionnel</Label>
        <Input
          id="email"
          type="email"
          autoComplete="email"
          required
          value={form.email}
          onChange={(e) => update("email", e.target.value)}
          placeholder="vous@societe.fr"
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="password">Mot de passe (8 caractères min.)</Label>
        <Input
          id="password"
          type="password"
          autoComplete="new-password"
          required
          minLength={8}
          value={form.password}
          onChange={(e) => update("password", e.target.value)}
        />
      </div>
      {error && (
        <p className="text-sm font-medium text-destructive">{error}</p>
      )}
      <Button type="submit" className="w-full" size="lg" disabled={loading}>
        {loading && <Loader2 className="h-4 w-4 animate-spin" />}
        Créer mon compte pro
      </Button>
    </form>
  );
}