"use client";

import Link from "next/link";
import { LogOut, MessageCircle, PackageCheck } from "lucide-react";
import { type FormEvent, useState } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { useCustomerStore } from "@/store/customer-store";

type Mode = "login" | "register";

export function AccountDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  const { customer, hasHydrated, loading, error, login, register, logout } = useCustomerStore();
  const [mode, setMode] = useState<Mode>("login");
  const [form, setForm] = useState({ email: "", password: "", firstName: "", lastName: "" });

  async function submit(event: FormEvent) {
    event.preventDefault();
    const ok = mode === "login"
      ? await login(form.email, form.password)
      : await register(form.email, form.password, form.firstName, form.lastName);
    if (ok) setForm({ email: "", password: "", firstName: "", lastName: "" });
  }

  const isLoggedIn = hasHydrated && customer !== null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg p-7">
        <div className="pr-10">
          {isLoggedIn ? (
            <>
              <span className="text-xs font-black uppercase tracking-[.16em] text-ari-coral">Tu cuenta</span>
              <h2 className="mt-3 text-3xl font-black">Hola, {customer.firstName ?? customer.email}</h2>
              <p className="mt-3 text-sm leading-6 text-slate-600">{customer.email}</p>
              <div className="mt-6 grid gap-3">
                <Button asChild variant="outline"><Link href="/catalog" onClick={() => onOpenChange(false)}><PackageCheck />Ver mis opciones de compra</Link></Button>
                <Button variant="ghost" onClick={logout}><LogOut className="size-4" />Cerrar sesión</Button>
              </div>
            </>
          ) : (
            <>
              <span className="text-xs font-black uppercase tracking-[.16em] text-ari-coral">Atención personalizada</span>
              <h2 className="mt-3 text-3xl font-black">{mode === "login" ? "Inicia sesión" : "Crea tu cuenta"}</h2>
              <form onSubmit={submit} className="mt-5 space-y-3">
                {mode === "register" && (
                  <div className="grid gap-3 sm:grid-cols-2">
                    <Input placeholder="Nombre" required value={form.firstName} onChange={(event) => setForm({ ...form, firstName: event.target.value })} />
                    <Input placeholder="Apellido" required value={form.lastName} onChange={(event) => setForm({ ...form, lastName: event.target.value })} />
                  </div>
                )}
                <Input type="email" placeholder="Correo" required value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} />
                <Input type="password" placeholder="Contraseña" required minLength={8} value={form.password} onChange={(event) => setForm({ ...form, password: event.target.value })} />
                {error && <p className="text-sm font-bold text-rose-600">{error}</p>}
                <Button type="submit" variant="primary" size="lg" className="w-full" disabled={loading}>
                  {loading ? "Un momento…" : mode === "login" ? "Iniciar sesión" : "Crear cuenta"}
                </Button>
              </form>
              <button
                type="button"
                className="mt-3 text-sm font-bold text-ari-marino hover:underline"
                onClick={() => setMode(mode === "login" ? "register" : "login")}
              >
                {mode === "login" ? "¿No tienes cuenta? Regístrate" : "¿Ya tienes cuenta? Inicia sesión"}
              </button>
              <div className="mt-6 border-t border-slate-100 pt-5">
                <Button asChild variant="outline" className="w-full">
                  <a href={process.env.NEXT_PUBLIC_WHATSAPP_URL ?? "https://wa.link/rvcqqc"} target="_blank" rel="noopener noreferrer">
                    <MessageCircle />Hablar con ARI
                  </a>
                </Button>
              </div>
            </>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}