"use client";

import { useEffect, useMemo, useState, useCallback } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import {
  BookUser, CheckCircle2, ClipboardList, FileText, Handshake,
  MapPin, Pencil, Phone, Plus, Save, Search, Trash2, Truck,
  Users, X, XCircle,
} from "lucide-react";
import { motion } from "framer-motion";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import { getPB } from "@/lib/pocketbase";
import { createCliente, listPedidos } from "@/lib/pb/pedidos";
import { listCrmOportunidades } from "@/lib/pb/crm";
import { listPresupuestos } from "@/lib/pb/presupuestos";
import { createProveedor, listProveedores, updateProveedor } from "@/lib/pb/proveedores";
import { celularToWaMe, stripArgCelularPrefix, normalizeCelular } from "@/lib/format";
import type { Cliente, Pedido } from "@/lib/types/pedido";
import type { CrmOportunidad } from "@/lib/types/crm";
import type { Presupuesto } from "@/lib/types/presupuesto";
import type { Proveedor, ProveedorInput } from "@/lib/types/proveedor";
import { cn } from "@/lib/cn";

type Tab = "clientes" | "proveedores";

export default function ContactosPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const tab = ((searchParams.get("tab") as Tab) || "clientes") satisfies Tab;

  function switchTab(next: Tab) {
    router.replace(`/contactos?tab=${next}`);
  }

  return (
    <div className="max-w-5xl space-y-5">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="flex items-center gap-2 text-2xl font-extrabold text-ink">
            <BookUser className="h-6 w-6 text-brand-dark" /> Contactos
          </h1>
          <p className="text-sm text-ink-soft mt-0.5">Clientes y proveedores en un solo lugar.</p>
        </div>
        <div className="inline-flex rounded-xl border border-line bg-surface p-1 text-sm font-semibold">
          <button
            type="button"
            onClick={() => switchTab("clientes")}
            className={cn(
              "flex items-center gap-2 rounded-lg px-4 py-2 transition-colors",
              tab === "clientes" ? "bg-canvas text-ink shadow-sm" : "text-ink-soft hover:text-ink",
            )}
          >
            <Users size={15} /> Clientes
          </button>
          <button
            type="button"
            onClick={() => switchTab("proveedores")}
            className={cn(
              "flex items-center gap-2 rounded-lg px-4 py-2 transition-colors",
              tab === "proveedores" ? "bg-canvas text-ink shadow-sm" : "text-ink-soft hover:text-ink",
            )}
          >
            <Truck size={15} /> Proveedores
          </button>
        </div>
      </div>

      {tab === "clientes" ? <ClientesTab /> : <ProveedoresTab />}
    </div>
  );
}

// ─── CLIENTES ────────────────────────────────────────────────────────────────

type ClienteDraft = {
  nombre: string; celular: string; direccion: string; notas: string;
  tipo_cliente: "persona" | "empresa"; documento_tipo: "dni" | "cuil" | "cuit";
  documento_numero: string; razon_social: string; contacto_nombre: string; contacto_celular: string;
};

const EMPTY_CLIENTE: ClienteDraft = {
  nombre: "", celular: "", direccion: "", notas: "", tipo_cliente: "persona",
  documento_tipo: "dni", documento_numero: "", razon_social: "", contacto_nombre: "", contacto_celular: "",
};

function ClientesTab() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [clientes, setClientes] = useState<Cliente[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState<Cliente | null>(null);
  const [creating, setCreating] = useState(false);
  const [draft, setDraft] = useState<ClienteDraft>(EMPTY_CLIENTE);
  const [related, setRelated] = useState<{ crm: CrmOportunidad[]; presupuestos: Presupuesto[]; pedidos: Pedido[] }>({
    crm: [], presupuestos: [], pedidos: [],
  });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState("");

  const reload = useCallback(async () => {
    setLoading(true);
    try {
      setErr("");
      let filter = "";
      if (search.trim()) {
        const clean = search.trim().replace(/"/g, "");
        const digits = clean.replace(/\D/g, "");
        const conditions = [`nombre ~ "${clean}"`, `razon_social ~ "${clean}"`, `contacto_nombre ~ "${clean}"`];
        if (digits) { conditions.push(`celular ~ "${digits}"`); conditions.push(`contacto_celular ~ "${digits}"`); }
        filter = conditions.join(" || ");
      }
      const res = await getPB().collection("clientes").getList<Cliente>(1, 500, { filter, sort: "nombre" });
      setClientes(res.items);
    } catch (e) {
      setErr((e as Error).message || "No se pudieron cargar clientes");
    } finally {
      setLoading(false);
    }
  }, [search]);

  useEffect(() => {
    const t = setTimeout(reload, search ? 250 : 0);
    return () => clearTimeout(t);
  }, [reload, search]);

  useEffect(() => {
    const clienteId = searchParams.get("cliente");
    const esNuevo = searchParams.get("nuevo") === "1";
    if (esNuevo) { if (!creating) { setCreating(true); setSelected(null); setDraft(EMPTY_CLIENTE); } return; }
    if (!clienteId) { if (selected || creating) { setSelected(null); setCreating(false); setRelated({ crm: [], presupuestos: [], pedidos: [] }); } return; }
    if (selected?.id === clienteId) return;
    const match = clientes.find((item) => item.id === clienteId);
    if (match) { hydrateCliente(match); return; }
    getPB().collection("clientes").getOne<Cliente>(clienteId)
      .then(hydrateCliente)
      .catch(() => setErr("No se pudo abrir la ficha del cliente."));
  }, [clientes, searchParams, selected?.id, creating]);

  function hydrateCliente(cliente: Cliente) {
    setSelected(cliente); setCreating(false);
    setDraft({
      nombre: cliente.nombre || "", celular: stripArgCelularPrefix(cliente.celular), direccion: cliente.direccion || "",
      notas: cliente.notas || "", tipo_cliente: cliente.tipo_cliente || "persona",
      documento_tipo: cliente.documento_tipo || "dni", documento_numero: cliente.documento_numero || "",
      razon_social: cliente.razon_social || "", contacto_nombre: cliente.contacto_nombre || "",
      contacto_celular: stripArgCelularPrefix(cliente.contacto_celular),
    });
  }

  function openCliente(cliente: Cliente) { router.replace(`/contactos?tab=clientes&cliente=${cliente.id}`, { scroll: false }); }
  function newCliente() { router.replace("/contactos?tab=clientes&nuevo=1", { scroll: false }); }
  function closeCliente() { router.replace("/contactos?tab=clientes", { scroll: false }); }

  async function saveCliente() {
    if (!draft.nombre.trim()) return;
    setSaving(true); setErr("");
    try {
      const payload = {
        nombre: draft.nombre.trim(), celular: normalizeCelular(draft.celular.trim()), direccion: draft.direccion.trim(),
        notas: draft.notas, tipo_cliente: draft.tipo_cliente, documento_tipo: draft.documento_tipo,
        documento_numero: draft.documento_numero.trim(), razon_social: draft.razon_social.trim(),
        contacto_nombre: draft.contacto_nombre.trim(), contacto_celular: normalizeCelular(draft.contacto_celular.trim()),
      };
      const updated = selected
        ? await getPB().collection("clientes").update<Cliente>(selected.id, payload)
        : await createCliente(payload);
      setClientes((prev) => selected ? prev.map((item) => (item.id === updated.id ? updated : item)) : [updated, ...prev]);
      setSelected(updated); setCreating(false);
      router.replace(`/contactos?tab=clientes&cliente=${updated.id}`, { scroll: false });
    } catch (e) {
      setErr((e as Error).message || "No se pudo guardar cliente");
    } finally { setSaving(false); }
  }

  useEffect(() => {
    if (!selected) return;
    (async () => {
      const [crmRes, presupuestosRes, pedidosRes] = await Promise.all([
        listCrmOportunidades({ cliente: selected.id, estado: "todos", perPage: 20 }).catch(() => ({ items: [] })),
        listPresupuestos({ cliente: selected.id, perPage: 20 }).catch(() => ({ items: [] })),
        listPedidos({ cliente: selected.id, perPage: 20 }).catch(() => ({ items: [] })),
      ]);
      setRelated({ crm: crmRes.items, presupuestos: presupuestosRes.items, pedidos: pedidosRes.items });
    })();
  }, [selected]);

  async function deleteCliente() {
    if (!selected || !confirm(`¿Borrar cliente ${selected.nombre}?`)) return;
    setSaving(true); setErr("");
    try {
      await getPB().collection("clientes").delete(selected.id);
      setClientes((prev) => prev.filter((item) => item.id !== selected.id));
      closeCliente();
    } catch (e) {
      setErr((e as Error).message || "No se pudo borrar. Puede tener pedidos asociados.");
    } finally { setSaving(false); }
  }

  return (
    <>
      <div className="flex items-center justify-between gap-4">
        <p className="text-sm text-faint">Se cargan automáticamente al crear pedidos.</p>
        <Button type="button" onClick={newCliente}><Plus size={16} /> Nuevo cliente</Button>
      </div>

      <div className="card p-4">
        <Input placeholder="Buscar por nombre o celular" prefix={<Search size={16} />} value={search} onChange={(e) => setSearch(e.target.value)} />
      </div>

      <div className="card overflow-hidden">
        {err && <div className="border-b border-line bg-red-50 px-4 py-2 text-sm text-bad">{err}</div>}
        {loading ? (
          <div className="p-10 text-center text-faint text-sm">Cargando…</div>
        ) : clientes.length === 0 ? (
          <div className="p-12 text-center">
            <Users size={32} className="mx-auto text-faint mb-2" />
            <p className="text-ink-soft">{search ? "Ningún cliente coincide." : "Sin clientes todavía."}</p>
          </div>
        ) : (
          <ul className="divide-y divide-line">
            {clientes.map((c, i) => (
              <motion.li key={c.id} initial={{ opacity: 0, y: 4 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.02 }}
                className="px-5 py-3 flex items-center gap-4 hover:bg-canvas/50">
                <div className="w-10 h-10 rounded-full bg-brand-soft text-brand-dark grid place-items-center font-bold">
                  {c.nombre.slice(0, 1).toUpperCase()}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="font-semibold text-ink truncate">{c.nombre}</p>
                  <div className="text-xs text-ink-soft flex items-center gap-3 mt-0.5">
                    {c.celular && <span className="flex items-center gap-1"><Phone size={11} /> {c.celular}</span>}
                    {c.direccion && <span className="flex items-center gap-1 truncate"><MapPin size={11} /> {c.direccion}</span>}
                  </div>
                </div>
                <button type="button" onClick={() => openCliente(c)} className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-line text-faint hover:text-ink" title="Abrir ficha">
                  <Pencil size={14} />
                </button>
              </motion.li>
            ))}
          </ul>
        )}
      </div>

      {(selected || creating) && (
        <div className="fixed inset-0 z-40 grid place-items-center bg-black/35 p-4" onClick={closeCliente}>
          <div className="max-h-[92dvh] w-full max-w-2xl overflow-auto rounded-xl border border-line bg-surface p-5 shadow-[var(--shadow-lg)]" onClick={(e) => e.stopPropagation()}>
            <div className="mb-4 flex items-center justify-between gap-3">
              <h2 className="text-lg font-extrabold text-ink">{creating ? "Nuevo cliente" : "Ficha cliente"}</h2>
              <button type="button" onClick={closeCliente} className="rounded-lg p-1.5 text-faint hover:text-ink"><X size={18} /></button>
            </div>
            <div className="grid gap-3">
              <Input label="Nombre" value={draft.nombre} onChange={(e) => setDraft((d) => ({ ...d, nombre: e.target.value }))} />
              <Input label="Celular" prefix={<span className="text-sm font-medium text-ink-soft select-none">+549</span>} placeholder="2915114902" value={draft.celular} onChange={(e) => setDraft((d) => ({ ...d, celular: e.target.value }))} />
              <Input label="Direccion" value={draft.direccion} onChange={(e) => setDraft((d) => ({ ...d, direccion: e.target.value }))} />
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
                <label className="flex flex-col gap-1.5">
                  <span className="text-sm font-medium text-ink-soft">Tipo</span>
                  <select value={draft.tipo_cliente} onChange={(e) => setDraft((d) => ({ ...d, tipo_cliente: e.target.value as ClienteDraft["tipo_cliente"] }))} className="h-11 rounded-xl border border-line bg-surface px-3 text-sm text-ink outline-none focus:border-brand">
                    <option value="persona">Persona</option>
                    <option value="empresa">Empresa</option>
                  </select>
                </label>
                <label className="flex flex-col gap-1.5">
                  <span className="text-sm font-medium text-ink-soft">Documento</span>
                  <select value={draft.documento_tipo} onChange={(e) => setDraft((d) => ({ ...d, documento_tipo: e.target.value as ClienteDraft["documento_tipo"] }))} className="h-11 rounded-xl border border-line bg-surface px-3 text-sm text-ink outline-none focus:border-brand">
                    <option value="dni">DNI</option>
                    <option value="cuil">CUIL</option>
                    <option value="cuit">CUIT</option>
                  </select>
                </label>
                <Input label="Numero" value={draft.documento_numero} onChange={(e) => setDraft((d) => ({ ...d, documento_numero: e.target.value }))} />
              </div>
              {draft.tipo_cliente === "empresa" && (
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
                  <Input label="Razon social" value={draft.razon_social} onChange={(e) => setDraft((d) => ({ ...d, razon_social: e.target.value }))} />
                  <Input label="Contacto" value={draft.contacto_nombre} onChange={(e) => setDraft((d) => ({ ...d, contacto_nombre: e.target.value }))} />
                  <Input label="Celular contacto" prefix={<span className="text-sm font-medium text-ink-soft select-none">+549</span>} placeholder="2915114902" value={draft.contacto_celular} onChange={(e) => setDraft((d) => ({ ...d, contacto_celular: e.target.value }))} />
                </div>
              )}
              <label className="flex flex-col gap-1.5">
                <span className="text-sm font-medium text-ink-soft">Notas</span>
                <textarea value={draft.notas} onChange={(e) => setDraft((d) => ({ ...d, notas: 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" />
              </label>
            </div>
            {selected && (
              <div className="mt-5 grid gap-3">
                <RelatedList title="Oportunidades" icon={Handshake} items={related.crm.map((item) => ({ href: `/crm/${item.id}`, label: item.titulo, meta: item.estado }))} />
                <RelatedList title="Presupuestos" icon={FileText} items={related.presupuestos.map((item) => ({ href: `/presupuestos/${item.id}`, label: item.codigo || "Presupuesto", meta: item.estado }))} />
                <RelatedList title="Pedidos" icon={ClipboardList} items={related.pedidos.map((item) => ({ href: `/pedidos/${item.id}`, label: item.codigo || (item.numero ? `#${item.numero}` : "Pedido"), meta: item.estado_pedido }))} />
              </div>
            )}
            {err && <p className="mt-3 text-sm text-bad">{err}</p>}
            <div className="mt-5 flex justify-between gap-2">
              {selected ? (
                <Button type="button" variant="danger" onClick={deleteCliente} loading={saving}><Trash2 size={16} /> Borrar</Button>
              ) : <span />}
              <div className="flex gap-2">
                <Button type="button" variant="secondary" onClick={closeCliente}>Cerrar</Button>
                <Button type="button" onClick={saveCliente} loading={saving}><Save size={16} /> Guardar</Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function RelatedList({ title, icon: Icon, items }: {
  title: string; icon: typeof Handshake;
  items: Array<{ href: string; label: string; meta: string }>;
}) {
  return (
    <section className="rounded-xl border border-line bg-canvas p-3">
      <h3 className="mb-2 flex items-center gap-2 text-sm font-bold text-ink"><Icon size={15} /> {title}</h3>
      {items.length === 0 ? (
        <p className="text-xs text-faint">Sin registros vinculados.</p>
      ) : (
        <div className="space-y-1">
          {items.map((item) => (
            <Link key={item.href} href={item.href} className="flex items-center justify-between gap-3 rounded-lg bg-surface px-3 py-2 text-sm hover:bg-white/70">
              <span className="font-semibold text-ink">{item.label}</span>
              <span className="text-xs text-faint">{item.meta}</span>
            </Link>
          ))}
        </div>
      )}
    </section>
  );
}

// ─── PROVEEDORES ─────────────────────────────────────────────────────────────

const EMPTY_PROV: ProveedorInput = { nombre: "", rubro: "", telefono: "", direccion: "", cuit: "", email: "", notas: "", activo: true };

function ProveedoresTab() {
  const [proveedores, setProveedores] = useState<Proveedor[]>([]);
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState<Proveedor | null>(null);
  const [draft, setDraft] = useState<ProveedorInput>(EMPTY_PROV);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState("");

  async function load(term = search) {
    setLoading(true); setErr("");
    try { setProveedores(await listProveedores(term)); }
    catch (e) { setErr((e as Error).message || "No se pudieron cargar proveedores"); }
    finally { setLoading(false); }
  }

  useEffect(() => {
    const timer = setTimeout(() => { void load(search); }, search ? 250 : 0);
    return () => clearTimeout(timer);
  }, [search]);

  const activos = useMemo(() => proveedores.filter((p) => p.activo).length, [proveedores]);

  function openEdit(proveedor: Proveedor) {
    setSelected(proveedor);
    setDraft({ nombre: proveedor.nombre || "", rubro: proveedor.rubro || "", telefono: proveedor.telefono || "", direccion: proveedor.direccion || "", cuit: proveedor.cuit || "", email: proveedor.email || "", notas: proveedor.notas || "", activo: proveedor.activo });
  }
  function openNew() { setSelected(null); setDraft(EMPTY_PROV); }

  async function saveProveedor(e: React.FormEvent) {
    e.preventDefault();
    if (!draft.nombre.trim()) return;
    setSaving(true); setErr("");
    try {
      const payload: ProveedorInput = {
        nombre: draft.nombre.trim(), rubro: draft.rubro?.trim(), telefono: draft.telefono?.trim(),
        direccion: draft.direccion?.trim(), cuit: draft.cuit?.trim(), email: draft.email?.trim(),
        notas: draft.notas?.trim(), activo: draft.activo ?? true,
      };
      const saved = selected ? await updateProveedor(selected.id, payload) : await createProveedor(payload);
      setProveedores((prev) => [saved, ...prev.filter((item) => item.id !== saved.id)].sort((a, b) => a.nombre.localeCompare(b.nombre)));
      setSelected(saved);
    } catch (e) {
      setErr((e as Error).message || "No se pudo guardar proveedor");
    } finally { setSaving(false); }
  }

  return (
    <>
      <div className="grid gap-3 md:grid-cols-3">
        <ProvMetric label="Proveedores" value={proveedores.length} />
        <ProvMetric label="Activos" value={activos} />
        <ProvMetric label="Inactivos" value={proveedores.length - activos} />
      </div>

      <form onSubmit={saveProveedor} className="rounded-xl border border-line bg-surface p-4">
        <div className="mb-4 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
          <h2 className="text-lg font-extrabold text-ink">{selected ? "Editar proveedor" : "Nuevo proveedor"}</h2>
          {selected && <Button type="button" variant="secondary" size="sm" onClick={openNew}><Plus size={14} /> Nuevo proveedor</Button>}
        </div>
        <div className="grid gap-3 md:grid-cols-4">
          <ProvField label="Nombre"><Input value={draft.nombre} onChange={(e) => setDraft({ ...draft, nombre: e.target.value })} required /></ProvField>
          <ProvField label="Rubro"><Input value={draft.rubro || ""} onChange={(e) => setDraft({ ...draft, rubro: e.target.value })} /></ProvField>
          <ProvField label="Teléfono"><Input value={draft.telefono || ""} onChange={(e) => setDraft({ ...draft, telefono: e.target.value })} /></ProvField>
          <ProvField label="Dirección"><Input value={draft.direccion || ""} onChange={(e) => setDraft({ ...draft, direccion: e.target.value })} /></ProvField>
          <ProvField label="CUIT"><Input value={draft.cuit || ""} onChange={(e) => setDraft({ ...draft, cuit: e.target.value })} /></ProvField>
          <ProvField label="Email"><Input type="email" value={draft.email || ""} onChange={(e) => setDraft({ ...draft, email: e.target.value })} /></ProvField>
          <label className="flex items-center gap-2 self-end pb-3 text-sm font-semibold text-ink-soft">
            <input type="checkbox" checked={draft.activo ?? true} onChange={(e) => setDraft({ ...draft, activo: e.target.checked })} className="h-4 w-4 rounded border-line text-brand" />
            Activo
          </label>
          <div className="flex items-end justify-end gap-2">
            <Button type="button" variant="secondary" onClick={openNew}>Limpiar</Button>
            <Button type="submit" loading={saving}>Guardar</Button>
          </div>
          <div className="md:col-span-4">
            <ProvField label="Notas">
              <textarea value={draft.notas || ""} onChange={(e) => setDraft({ ...draft, notas: e.target.value })} className="min-h-20 w-full rounded-xl border border-line bg-white px-3 py-2 text-sm outline-none focus:border-brand" />
            </ProvField>
          </div>
        </div>
        {err && <p className="mt-2 text-sm text-bad">{err}</p>}
      </form>

      <section className="space-y-3">
        <div className="relative">
          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-faint" />
          <Input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Buscar por nombre, rubro o CUIT" className="pl-9" />
        </div>
        <div className="overflow-hidden rounded-xl border border-line bg-surface">
          {loading ? (
            <div className="py-14 text-center text-sm text-faint">Cargando...</div>
          ) : proveedores.length ? (
            <div className="divide-y divide-line">
              {proveedores.map((proveedor) => (
                <article key={proveedor.id} className="grid gap-3 px-4 py-3 md:grid-cols-[1fr_130px_120px_80px] md:items-center">
                  <div className="min-w-0">
                    <div className="truncate text-sm font-extrabold text-ink">{proveedor.nombre}</div>
                    <div className="truncate text-xs text-faint">{[proveedor.rubro, proveedor.telefono, proveedor.email].filter(Boolean).join(" · ") || "Sin datos extra"}</div>
                  </div>
                  <span className="text-xs font-semibold text-ink-soft">{proveedor.cuit || "-"}</span>
                  <span className={`inline-flex w-fit items-center gap-1 rounded-full px-2 py-1 text-xs font-bold ${proveedor.activo ? "bg-green-100 text-green-800" : "bg-zinc-100 text-zinc-700"}`}>
                    {proveedor.activo ? <CheckCircle2 size={13} /> : <XCircle size={13} />} {proveedor.activo ? "Activo" : "Inactivo"}
                  </span>
                  <button type="button" onClick={() => openEdit(proveedor)} className="inline-flex items-center justify-center gap-1 rounded-lg border border-line px-2 py-1 text-xs font-semibold text-ink-soft hover:text-ink">
                    <Pencil size={13} /> Editar
                  </button>
                </article>
              ))}
            </div>
          ) : (
            <div className="py-14 text-center text-sm text-faint">Sin proveedores.</div>
          )}
        </div>
      </section>
    </>
  );
}

function ProvMetric({ label, value }: { label: string; value: number }) {
  return (
    <div className="rounded-xl border border-line bg-surface p-4">
      <div className="text-xs font-bold uppercase text-faint">{label}</div>
      <div className="mt-1 text-xl font-extrabold tabular-nums text-ink">{value}</div>
    </div>
  );
}

function ProvField({ label, children }: { label: string; children: React.ReactNode }) {
  return <label className="grid gap-1.5 text-sm font-semibold text-ink-soft">{label}{children}</label>;
}