"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { ArrowLeft, ExternalLink, Mail, Phone, Plus, Search, Trash2 } from "lucide-react";

type SponsoredSupplier = {
  id: string;
  name: string;
  legal_name: string | null;
  cnpj: string;
  category: string | null;
  city: string | null;
  email: string;
  phone: string;
  payment_terms_primary: string;
  payment_terms_secondary: string;
  subscriber_discount: string | null;
  website_url: string | null;
  notes: string | null;
  active: boolean;
  position: number;
  created_at?: string | null;
  updated_at?: string | null;
};

function digits(value: string) {
  return String(value || "").replace(/\D/g, "");
}

function formatPhone(value: string) {
  const d = digits(value).slice(0, 11);
  if (d.length <= 2) return d ? `(${d}` : "";
  if (d.length <= 6) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
  if (d.length <= 10) return `(${d.slice(0, 2)}) ${d.slice(2, 6)}-${d.slice(6)}`;
  return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
}

function formatCnpj(value: string) {
  const d = digits(value).slice(0, 14);
  if (d.length <= 2) return d;
  if (d.length <= 5) return `${d.slice(0, 2)}.${d.slice(2)}`;
  if (d.length <= 8) return `${d.slice(0, 2)}.${d.slice(2, 5)}.${d.slice(5)}`;
  if (d.length <= 12) return `${d.slice(0, 2)}.${d.slice(2, 5)}.${d.slice(5, 8)}/${d.slice(8)}`;
  return `${d.slice(0, 2)}.${d.slice(2, 5)}.${d.slice(5, 8)}/${d.slice(8, 12)}-${d.slice(12)}`;
}

function Badge({ active }: { active: boolean }) {
  return (
    <span
      className={[
        "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold",
        active ? "border-emerald-200 bg-emerald-50 text-emerald-700" : "border-slate-200 bg-slate-50 text-slate-600",
      ].join(" ")}
    >
      {active ? "Ativo" : "Inativo"}
    </span>
  );
}

export default function SponsoredSuppliersListClient({ initialRows }: { initialRows: SponsoredSupplier[] }) {
  const [rows, setRows] = useState<SponsoredSupplier[]>(() => initialRows || []);
  const [query, setQuery] = useState("");
  const [status, setStatus] = useState("todos");
  const [loading, setLoading] = useState(false);
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [busyDelete, setBusyDelete] = useState(false);

  const filtered = useMemo(() => {
    const term = query.trim().toLowerCase();
    return rows.filter((row) => {
      if (status === "ativos" && !row.active) return false;
      if (status === "inativos" && row.active) return false;
      if (!term) return true;
      const hay = `${row.name} ${row.legal_name || ""} ${row.cnpj} ${row.email} ${row.city || ""} ${row.category || ""} ${row.subscriber_discount || ""}`.toLowerCase();
      return hay.includes(term);
    });
  }, [rows, query, status]);

  async function reload() {
    setLoading(true);
    try {
      const res = await fetch("/api/sponsored-suppliers");
      const json = (await res.json().catch(() => null)) as { suppliers?: SponsoredSupplier[] } | null;
      setRows(Array.isArray(json?.suppliers) ? json.suppliers : []);
      setDeleteId(null);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="min-h-screen bg-slate-50/50 p-6 font-sans sm:p-8">
      <div className="mx-auto flex max-w-[1600px] flex-col gap-6">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="space-y-1">
            <div className="flex items-center gap-3">
              <Link
                href="/"
                className="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50"
                aria-label="Voltar"
                title="Voltar"
              >
                <ArrowLeft className="h-4.5 w-4.5 text-slate-700" />
              </Link>
              <div>
                <h1 className="text-2xl font-bold tracking-tight text-slate-900">Fornecedores patrocinados</h1>
                <p className="text-slate-500">Cadastre fornecedores globais que aparecerão para todas as empresas no Admin.</p>
              </div>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <Link
              href="/fornecedores-patrocinados/novo"
              className="inline-flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800"
            >
              <Plus className="h-4.5 w-4.5" />
              Novo fornecedor
            </Link>
          </div>
        </div>

        <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
          <div className="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
            <div className="flex h-11 items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 text-sm text-slate-700">
              <Search className="h-4 w-4 text-slate-400" />
              <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Buscar por nome, CNPJ, e-mail ou cidade..."
                className="min-w-0 flex-1 bg-transparent outline-none placeholder:text-slate-400"
              />
            </div>

            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
              <select
                value={status}
                onChange={(e) => setStatus(e.target.value)}
                className="h-11 rounded-xl border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-700 outline-none"
              >
                <option value="todos">Status: Todos</option>
                <option value="ativos">Status: Ativos</option>
                <option value="inativos">Status: Inativos</option>
              </select>

              <button
                type="button"
                onClick={() => reload()}
                className="inline-flex h-11 items-center justify-center rounded-xl bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50"
              >
                {loading ? "Atualizando..." : "Atualizar"}
              </button>
            </div>
          </div>
        </div>

        <div className="grid gap-4 md:grid-cols-3">
          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <div className="text-xs font-semibold uppercase tracking-[0.12em] text-slate-500">Fornecedores</div>
            <div className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-slate-950">{rows.length}</div>
            <div className="mt-2 text-sm text-slate-500">Cadastros globais disponíveis para o Admin.</div>
          </div>
          <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
            <div className="text-xs font-semibold uppercase tracking-[0.12em] text-slate-500">Ativos</div>
            <div className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-slate-950">{rows.filter((row) => row.active).length}</div>
            <div className="mt-2 text-sm text-slate-500">Esses aparecem imediatamente na aba de patrocinados do Admin.</div>
          </div>
          <div className="rounded-2xl border border-slate-200 bg-[linear-gradient(135deg,rgba(79,70,229,0.10)_0%,rgba(124,58,237,0.10)_100%)] p-5 shadow-sm">
            <div className="text-xs font-semibold uppercase tracking-[0.12em] text-slate-600">Observação</div>
            <div className="mt-3 text-base font-semibold text-slate-950">Base global separada</div>
            <div className="mt-2 text-sm text-slate-600">Esse cadastro não entra na lista privada do cliente; ele alimenta apenas a vitrine patrocinada.</div>
          </div>
        </div>

        <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
          <div className="max-h-[700px] overflow-auto">
            <table className="w-full border-collapse text-sm">
              <thead className="sticky top-0 z-10 bg-white">
                <tr className="border-b border-slate-200 text-xs font-semibold text-slate-500">
                  <th className="px-4 py-3 text-left">Fornecedor</th>
                  <th className="px-4 py-3 text-left">Contato</th>
                  <th className="px-4 py-3 text-left">Condições</th>
                  <th className="px-4 py-3 text-left">Oferta Ktalogu</th>
                  <th className="px-4 py-3 text-left">Status</th>
                  <th className="w-[240px] px-4 py-3 text-right">Ações</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((row) => {
                  const isConfirming = deleteId === row.id;
                  return (
                    <tr key={row.id} className="border-b border-slate-100 transition hover:bg-slate-50">
                      <td className="px-4 py-4">
                        <div className="min-w-0">
                          <div className="text-sm font-semibold text-slate-950">{row.name}</div>
                          <div className="mt-0.5 text-xs text-slate-500">
                            {formatCnpj(row.cnpj)}
                            {row.category ? ` • ${row.category}` : ""}
                            {row.city ? ` • ${row.city}` : ""}
                          </div>
                          {row.legal_name && row.legal_name !== row.name ? <div className="mt-1 text-xs text-slate-500">{row.legal_name}</div> : null}
                        </div>
                      </td>
                      <td className="px-4 py-4">
                        <div className="space-y-1 text-sm text-slate-700">
                          <div className="flex items-center gap-2">
                            <Mail className="h-4 w-4 text-slate-400" />
                            <span className="truncate">{row.email}</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <Phone className="h-4 w-4 text-slate-400" />
                            <span>{formatPhone(row.phone)}</span>
                          </div>
                          {row.website_url ? (
                            <a
                              href={row.website_url}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="inline-flex items-center gap-2 text-xs font-semibold text-slate-600 transition hover:text-slate-900"
                            >
                              <ExternalLink className="h-3.5 w-3.5" />
                              {row.website_url}
                            </a>
                          ) : null}
                        </div>
                      </td>
                      <td className="px-4 py-4">
                        <div className="text-sm font-semibold text-slate-900">{row.payment_terms_primary}</div>
                        <div className="mt-0.5 text-xs text-slate-500">{row.payment_terms_secondary}</div>
                        <div className="mt-1 text-xs text-slate-500">Posição: {row.position}</div>
                      </td>
                      <td className="px-4 py-4">
                        {row.subscriber_discount ? (
                          <span className="inline-flex items-center rounded-full border border-violet-200 bg-violet-50 px-2.5 py-1 text-xs font-semibold text-violet-700">
                            {row.subscriber_discount}
                          </span>
                        ) : (
                          <span className="text-xs text-slate-400">Sem oferta</span>
                        )}
                      </td>
                      <td className="px-4 py-4">
                        <Badge active={row.active} />
                      </td>
                      <td className="px-4 py-4 text-right">
                        {isConfirming ? (
                          <div className="inline-flex items-center gap-2">
                            <button
                              type="button"
                              disabled={busyDelete}
                              onClick={() => setDeleteId(null)}
                              className="inline-flex h-9 items-center justify-center rounded-xl bg-white px-3 text-xs font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50 disabled:opacity-60"
                            >
                              Cancelar
                            </button>
                            <button
                              type="button"
                              disabled={busyDelete}
                              onClick={async () => {
                                setBusyDelete(true);
                                try {
                                  const res = await fetch(`/api/sponsored-suppliers?id=${encodeURIComponent(row.id)}`, { method: "DELETE" });
                                  if (res.ok) {
                                    await reload();
                                  }
                                } finally {
                                  setBusyDelete(false);
                                }
                              }}
                              className="inline-flex h-9 items-center justify-center gap-2 rounded-xl bg-rose-600 px-3 text-xs font-semibold text-white shadow-sm transition hover:bg-rose-500 disabled:opacity-60"
                            >
                              <Trash2 className="h-4 w-4" />
                              {busyDelete ? "Deletando..." : "Confirmar"}
                            </button>
                          </div>
                        ) : (
                          <div className="inline-flex items-center gap-2">
                            <Link
                              href={`/fornecedores-patrocinados/${encodeURIComponent(row.id)}`}
                              className="inline-flex h-9 items-center justify-center rounded-xl bg-white px-3 text-xs font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50"
                            >
                              Editar
                            </Link>
                            <button
                              type="button"
                              onClick={() => setDeleteId(row.id)}
                              className="inline-flex h-9 items-center justify-center gap-2 rounded-xl bg-white px-3 text-xs font-semibold text-rose-600 shadow-sm ring-1 ring-rose-200 transition hover:bg-rose-50"
                            >
                              <Trash2 className="h-4 w-4" />
                              Deletar
                            </button>
                          </div>
                        )}
                      </td>
                    </tr>
                  );
                })}
                {filtered.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="px-4 py-10 text-center text-sm text-slate-500">
                      Nenhum fornecedor patrocinado encontrado.
                    </td>
                  </tr>
                ) : null}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}