"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowLeft, CalendarClock, Handshake, MapPin, Phone, Save, Search, User, Users } from "lucide-react";
import { motion } from "framer-motion";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import { listClientes } from "@/lib/pb/clientes";
import { createCrmOportunidad } from "@/lib/pb/crm";
import { useUnsavedChangesGuard } from "@/lib/useUnsavedChangesGuard";
import type { Cliente } from "@/lib/types/pedido";
import {
  ESTADO_CRM_LABELS,
  ORIGEN_CRM_LABELS,
  PRIORIDAD_CRM_LABELS,
  type EstadoCrm,
  type OrigenCrm,
  type PrioridadCrm,
} from "@/lib/types/crm";

export default function NuevaOportunidadPage() {
  const router = useRouter();
  const [titulo, setTitulo] = useState("");
  const [clienteMode, setClienteMode] = useState<"existente" | "nuevo">("existente");
  const [clienteSearch, setClienteSearch] = useState("");
  const [clientes, setClientes] = useState<Cliente[]>([]);
  const [selectedCliente, setSelectedCliente] = useState<Cliente | null>(null);
  const [nombre, setNombre] = useState("");
  const [celular, setCelular] = useState("");
  const [direccion, setDireccion] = useState("");
  const [origen, setOrigen] = useState<OrigenCrm>("whatsapp");
  const [estado, setEstado] = useState<EstadoCrm>("nuevo");
  const [prioridad, setPrioridad] = useState<PrioridadCrm>("media");
  const [valorEstimado, setValorEstimado] = useState("");
  const [proximoContacto, setProximoContacto] = useState("");
  const [nota, setNota] = useState("");
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState("");

  const hasUnsavedChanges = Boolean(
    titulo.trim() || selectedCliente || clienteSearch.trim() || nombre.trim() || celular.trim() ||
      direccion.trim() || valorEstimado.trim() || proximoContacto || nota.trim(),
  );
  async function handleSaveOnly() {
    if (!titulo.trim()) {
      throw new Error("Falta el nombre del trabajo u oportunidad");
    }
    if (clienteMode === "existente" && !selectedCliente) {
      throw new Error("Elegí un cliente o cargá uno nuevo");
    }
    if (clienteMode === "nuevo" && !nombre.trim()) {
      throw new Error("Falta el nombre del cliente");
    }
    const created = await createCrmOportunidad({
      titulo,
      cliente: {
        id: selectedCliente?.id,
        nombre: selectedCliente?.nombre || nombre.trim(),
        celular: selectedCliente?.celular || celular.trim() || undefined,
        direccion: selectedCliente?.direccion || direccion.trim() || undefined,
      },
      origen,
      estado,
      prioridad,
      valor_estimado: Number(valorEstimado) || 0,
      proximo_contacto: proximoContacto || undefined,
      nota: nota.trim(),
    });
    return created;
  }

  useUnsavedChangesGuard(hasUnsavedChanges && !saving, async () => {
    const created = await handleSaveOnly();
    return !!created;
  });

  useEffect(() => {
    if (clienteMode !== "existente") return;
    const t = setTimeout(async () => {
      try {
        const res = await listClientes(clienteSearch, 60);
        setClientes(res.items);
      } catch {
        setClientes([]);
      }
    }, clienteSearch ? 250 : 0);
    return () => clearTimeout(t);
  }, [clienteMode, clienteSearch]);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setErr("");
    setSaving(true);
    try {
      const created = await handleSaveOnly();
      router.replace(`/crm/${created.id}`);
    } catch (e) {
      setErr((e as Error).message || "No se pudo crear la oportunidad");
      setSaving(false);
    }
  }

  return (
    <div className="max-w-5xl">
      <div className="mb-6 flex items-center gap-3">
        <Link href="/crm" className="text-ink-soft hover:text-ink"><ArrowLeft size={20} /></Link>
        <div>
          <h1 className="text-2xl font-extrabold text-ink">Nueva oportunidad</h1>
          <p className="text-sm text-ink-soft">Un seguimiento comercial antes de presupuestar.</p>
        </div>
      </div>

      <form onSubmit={submit} className="grid grid-cols-1 gap-5 lg:grid-cols-3">
        <motion.section initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} className="card space-y-4 p-5 lg:col-span-3">
          <h2 className="flex items-center gap-2 font-bold text-ink"><Handshake size={16} /> Oportunidad</h2>
          <Input label="Trabajo / oportunidad *" value={titulo} onChange={(e) => setTitulo(e.target.value)} placeholder="Ej: Bajo mesada, placard, vestidor..." />
          <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
            <Select label="Origen" value={origen} onChange={(v) => setOrigen(v as OrigenCrm)} options={ORIGEN_CRM_LABELS} />
            <Select label="Estado" value={estado} onChange={(v) => setEstado(v as EstadoCrm)} options={ESTADO_CRM_LABELS} />
            <Select label="Prioridad" value={prioridad} onChange={(v) => setPrioridad(v as PrioridadCrm)} options={PRIORIDAD_CRM_LABELS} />
            <Input label="Valor estimado" type="number" value={valorEstimado} onChange={(e) => setValorEstimado(e.target.value)} />
          </div>
          <Input label="Próximo seguimiento" type="date" value={proximoContacto} onChange={(e) => setProximoContacto(e.target.value)} prefix={<CalendarClock size={16} />} />
          <label className="flex flex-col gap-1.5">
            <span className="text-sm font-medium text-ink-soft">Nota</span>
            <textarea
              value={nota}
              onChange={(e) => setNota(e.target.value)}
              rows={4}
              className="rounded-xl border border-line bg-surface px-3 py-2 text-sm text-ink outline-none focus:border-brand"
              placeholder="Qué pidió, objeciones, medidas aproximadas, próximos pasos..."
            />
          </label>
        </motion.section>

        <motion.section initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.05 }} className="card space-y-4 p-5 lg:col-span-3">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <h2 className="flex items-center gap-2 font-bold text-ink"><User size={16} /> Cliente</h2>
            <div className="flex rounded-xl border border-line bg-canvas p-1 text-sm font-semibold">
              <button type="button" onClick={() => setClienteMode("existente")} className={`rounded-lg px-3 py-1.5 ${clienteMode === "existente" ? "bg-surface text-ink shadow-sm" : "text-ink-soft"}`}>Buscar contacto</button>
              <button type="button" onClick={() => { setClienteMode("nuevo"); setSelectedCliente(null); }} className={`rounded-lg px-3 py-1.5 ${clienteMode === "nuevo" ? "bg-surface text-ink shadow-sm" : "text-ink-soft"}`}>Nuevo cliente</button>
            </div>
          </div>
          {clienteMode === "existente" ? (
            <div className="space-y-3">
              <Input label="Buscar en contactos" value={clienteSearch} onChange={(e) => setClienteSearch(e.target.value)} prefix={<Search size={16} />} placeholder="Nombre o celular" />
              <div className="max-h-64 overflow-auto rounded-xl border border-line">
                {clientes.length === 0 ? (
                  <div className="p-5 text-center text-sm text-faint"><Users size={24} className="mx-auto mb-2" /> No hay contactos para mostrar.</div>
                ) : (
                  <div className="divide-y divide-line">
                    {clientes.map((cliente) => (
                      <button key={cliente.id} type="button" onClick={() => setSelectedCliente(cliente)} className={`flex w-full items-center justify-between gap-3 px-4 py-3 text-left hover:bg-canvas ${selectedCliente?.id === cliente.id ? "bg-brand-soft/60" : ""}`}>
                        <div>
                          <p className="font-semibold text-ink">{cliente.nombre}</p>
                          <p className="text-xs text-faint">{[cliente.celular, cliente.direccion].filter(Boolean).join(" · ") || "Sin datos extra"}</p>
                        </div>
                        {selectedCliente?.id === cliente.id && <span className="rounded-lg bg-brand px-2 py-1 text-xs font-bold text-white">Elegido</span>}
                      </button>
                    ))}
                  </div>
                )}
              </div>
            </div>
          ) : (
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <Input label="Nombre *" value={nombre} onChange={(e) => setNombre(e.target.value)} prefix={<User size={16} />} />
              <Input label="Celular" type="tel" value={celular} onChange={(e) => setCelular(e.target.value)} prefix={<Phone size={16} />} />
              <div className="sm:col-span-2">
                <Input label="Dirección" value={direccion} onChange={(e) => setDireccion(e.target.value)} prefix={<MapPin size={16} />} />
              </div>
            </div>
          )}
        </motion.section>

        <div className="lg:col-span-3 flex items-center justify-end gap-3">
          {err && <span className="text-sm font-medium text-bad">{err}</span>}
          <Button type="submit" size="lg" loading={saving}><Save size={18} /> Guardar oportunidad</Button>
        </div>
      </form>
    </div>
  );
}

function Select({ label, value, onChange, options }: {
  label: string;
  value: string;
  onChange: (value: string) => void;
  options: Record<string, string>;
}) {
  return (
    <label className="flex flex-col gap-1.5">
      <span className="text-sm font-medium text-ink-soft">{label}</span>
      <select value={value} onChange={(e) => onChange(e.target.value)} className="h-11 rounded-xl border border-line bg-surface px-3 text-sm outline-none focus:border-brand">
        {Object.entries(options).map(([key, label]) => <option key={key} value={key}>{label}</option>)}
      </select>
    </label>
  );
}