"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { ArrowRight, Copy } from "@/components/ui/icons";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Panel } from "@/components/ui/panel";
import { Badge } from "@/components/ui/badge";
import { toast } from "@/components/ui/toast";
import { createClient, type CreateClientResult } from "../actions";

const PLAN_OPTIONS = [
  { value: "presence", label: "Presence (49,99 € / mois)" },
  { value: "developpement", label: "Developpement (a partir de 99 € / mois)" },
  { value: "ecommerce", label: "E-commerce (a partir de 199 € / mois)" },
];

export function NewClientForm() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<{
    email: string;
    password: string;
  } | null>(null);

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (success) return;
    setError(null);

    const formData = new FormData(event.currentTarget);

    startTransition(async () => {
      const result: CreateClientResult = await createClient(formData);
      if (!result.ok) {
        setError(result.error);
        toast.error(result.error);
        return;
      }
      setSuccess({ email: result.userEmail, password: result.generatedPassword });
      toast.success(`Compte cree pour ${result.userEmail}. Mot de passe initial visible ci-dessous.`);
    });
  }

  if (success) {
    return (
      <Panel className="p-6">
        <div className="space-y-5">
          <div>
            <Badge tone="success" dot>
              Client provisionne
            </Badge>
            <h2 className="mt-3 font-editorial text-2xl text-text">
              Identifiants generes
            </h2>
            <p className="mt-1 text-sm text-text-dim">
              Transmettez ces identifiants au client par un canal securise. Le mot de
              passe ne sera plus reaffiche.
            </p>
          </div>

          <div className="space-y-3">
            <CopyableField label="E-mail de connexion" value={success.email} />
            <CopyableField label="Mot de passe initial" value={success.password} mono />
          </div>

          <div className="flex flex-wrap items-center gap-2 pt-2">
            <Button
              variant="primary"
              onClick={() => {
                router.push("/atelier-novelia/clients");
                router.refresh();
              }}
            >
              Retour a la liste
              <ArrowRight className="size-4" />
            </Button>
            <Button
              variant="ghost"
              onClick={() => {
                setSuccess(null);
                setError(null);
              }}
            >
              Provisionner un autre client
            </Button>
          </div>
        </div>
      </Panel>
    );
  }

  return (
    <Panel className="p-6">
      <form className="space-y-5" onSubmit={handleSubmit}>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Field id="companyName" label="Raison sociale" required>
            <Input
              type="text"
              name="companyName"
              placeholder="Cabinet Aurore Vidal"
              required
              autoComplete="organization"
              disabled={isPending}
            />
          </Field>

          <Field
            id="domain"
            label="Domaine du site"
            hint="Optionnel. Sans https://. Tu pourras l'ajouter plus tard."
          >
            <Input
              type="text"
              name="domain"
              placeholder="cabinet-vidal.fr"
              autoComplete="url"
              disabled={isPending}
            />
          </Field>

          <Field id="contactName" label="Nom du contact" required>
            <Input
              type="text"
              name="contactName"
              placeholder="Aurore Vidal"
              required
              autoComplete="name"
              disabled={isPending}
            />
          </Field>

          <Field id="contactEmail" label="E-mail du contact" required>
            <Input
              type="email"
              name="contactEmail"
              placeholder="contact@cabinet-vidal.fr"
              required
              autoComplete="email"
              inputMode="email"
              disabled={isPending}
            />
          </Field>

          <Field id="plan" label="Plan" className="md:col-span-2" required>
            <Select name="plan" defaultValue="presence" required disabled={isPending}>
              {PLAN_OPTIONS.map((p) => (
                <option key={p.value} value={p.value}>
                  {p.label}
                </option>
              ))}
            </Select>
          </Field>
        </div>

        {error ? (
          <p
            role="alert"
            className="rounded-md border border-[color:var(--color-danger)]/30 bg-[color:var(--color-danger)]/10 px-3 py-2 text-sm text-[color:var(--color-danger)]"
          >
            {error}
          </p>
        ) : null}

        <div className="flex flex-wrap items-center gap-2 pt-2 border-t border-border">
          <Button type="submit" variant="primary" loading={isPending}>
            Provisionner le client
            <ArrowRight className="size-4" />
          </Button>
          <Link href="/atelier-novelia/clients">
            <Button type="button" variant="ghost" disabled={isPending}>
              Annuler
            </Button>
          </Link>
        </div>
      </form>
    </Panel>
  );
}

function CopyableField({
  label,
  value,
  mono = false,
}: {
  label: string;
  value: string;
  mono?: boolean;
}) {
  const [copied, setCopied] = useState(false);

  async function copy() {
    try {
      await navigator.clipboard.writeText(value);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      // ignore
    }
  }

  return (
    <div className="flex items-center gap-2 rounded-md border border-border bg-stone-900/[0.03] px-3 py-2">
      <div className="min-w-0 flex-1">
        <div className="text-xxs uppercase tracking-wider text-text-faint">{label}</div>
        <div className={`text-sm text-text truncate ${mono ? "font-mono" : ""}`}>{value}</div>
      </div>
      <Button type="button" variant="ghost" size="sm" onClick={copy}>
        <Copy className="size-3.5" />
        {copied ? "Copie" : "Copier"}
      </Button>
    </div>
  );
}