"use client";

import { useMemo, useState } from "react";
import Image from "next/image";
import { Check, Plus, Settings2, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { BibliotecaDeServicos } from "@/components/products/biblioteca-de-servicos";
import {
  GRUPO_PADRAO,
  vitrineDeServicos,
  type CustoDoServico,
  type GrupoDeServicos,
  type ServicoOpcional,
} from "@/lib/servicos-opcionais";
import type { VinculoDeServico } from "@/lib/vinculos-de-servico";

/*
  Quais serviços este produto oferece.

  Aqui não se cadastra nada: o serviço é da empresa, cadastrado uma vez na
  biblioteca. Esta tela só liga e desliga, em cartõezinhos — porque a pergunta
  que ela responde é "o que vai aparecer na página deste produto", e isso se
  responde batendo o olho, não lendo formulário.
*/

export function ArteDoServico({ icone, tamanho = 28 }: { icone: string; tamanho?: number }) {
  return (
    <Image
      src={`/icones/servicos/${icone}.svg`}
      alt=""
      width={tamanho}
      height={tamanho}
      className="shrink-0"
      style={{ width: tamanho, height: tamanho }}
    />
  );
}

const dinheiro = (valor: number) => valor.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });

export function ProductOptionalServices({
  grupos,
  servicos,
  custos,
  vinculos,
  onVinculos,
  onBiblioteca,
  carregando,
}: {
  grupos: GrupoDeServicos[];
  servicos: ServicoOpcional[];
  custos: Record<string, CustoDoServico>;
  vinculos: VinculoDeServico[];
  onVinculos: (vinculos: VinculoDeServico[]) => void;
  onBiblioteca: (dados: {
    grupos: GrupoDeServicos[];
    servicos: ServicoOpcional[];
    custos: Record<string, CustoDoServico>;
  }) => void;
  carregando: boolean;
}) {
  const [gerenciando, setGerenciando] = useState(false);

  /* O que está ligado neste produto: o vínculo manda; sem vínculo, vale o
     "oferecer em todos" do serviço. É a mesma regra que a loja usa. */
  const ligado = useMemo(() => {
    const mapa = new Map(vinculos.map((v) => [v.serviceId, v.ligado]));
    return (servico: ServicoOpcional) => {
      const decisao = mapa.get(servico.id);
      return decisao === undefined ? servico.valeParaTodos : decisao;
    };
  }, [vinculos]);

  const vitrine = useMemo(
    () => vitrineDeServicos(grupos, servicos.filter((s) => s.ativo)),
    [grupos, servicos]
  );

  const quantosLigados = useMemo(
    () => servicos.filter((s) => s.ativo && ligado(s)).length,
    [servicos, ligado]
  );

  function alternar(servico: ServicoOpcional) {
    const agora = !ligado(servico);
    const semEste = vinculos.filter((v) => v.serviceId !== servico.id);
    /* Quando a decisão volta a ser igual ao padrão da biblioteca, o vínculo
       some: assim o produto continua acompanhando o padrão se ele mudar. */
    if (agora === servico.valeParaTodos) {
      onVinculos(semEste);
      return;
    }
    onVinculos([...semEste, { serviceId: servico.id, ligado: agora }]);
  }

  return (
    <div className="rounded-[20px] border border-slate-200/60 bg-white shadow-[0_2px_14px_rgba(0,0,0,0.02)] overflow-hidden">
      <div className="flex items-center gap-3 border-b border-slate-100 px-6 py-5">
        <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-[12px] border border-slate-100 bg-slate-50 text-[var(--ks-color-primary-strong)]">
          <Sparkles size={16} />
        </span>
        <div className="min-w-0 flex-1">
          <p className="text-[15px] font-bold tracking-tight text-slate-800">Serviços opcionais</p>
          <p className="text-[13px] font-medium text-slate-500">
            {quantosLigados > 0
              ? `${quantosLigados} ${quantosLigados === 1 ? "serviço oferecido" : "serviços oferecidos"} na página deste produto.`
              : "Escolha o que este produto oferece além da peça."}
          </p>
        </div>
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={() => setGerenciando(true)}
          className="shrink-0 gap-1.5"
        >
          <Settings2 size={14} />
          Gerenciar
        </Button>
      </div>

      <div className="p-5">
        {carregando ? (
          <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
            {[0, 1, 2].map((i) => (
              <div key={i} className="h-[68px] animate-pulse rounded-xl bg-slate-100" />
            ))}
          </div>
        ) : servicos.filter((s) => s.ativo).length === 0 ? (
          <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50/60 px-5 py-8 text-center">
            <p className="text-sm font-semibold text-slate-700">A biblioteca está vazia</p>
            <p className="mx-auto mt-1 max-w-md text-[13px] text-slate-500">
              Cadastre uma vez o que a sua gráfica faz além da peça — criação de arte, revisão,
              montagem — e depois é só marcar em quais produtos aparece.
            </p>
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => setGerenciando(true)}
              className="mt-4 gap-1.5"
            >
              <Plus size={14} />
              Criar o primeiro serviço
            </Button>
          </div>
        ) : (
          <div className="space-y-5">
            {vitrine.map((caixa) => (
              <div key={caixa.grupo.id || "avulsos"} className="space-y-2">
                <div className="flex items-center gap-2">
                  <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-500">
                    {caixa.grupo.nome || GRUPO_PADRAO}
                  </span>
                  <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-500">
                    {caixa.grupo.modo === "uma" ? "escolher um" : "pode marcar vários"}
                  </span>
                  {caixa.grupo.obrigatorio ? (
                    <span className="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-medium text-amber-700">
                      obrigatório
                    </span>
                  ) : null}
                </div>

                <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                  {caixa.servicos.map((servico) => {
                    const marcado = ligado(servico);
                    return (
                      <button
                        key={servico.id}
                        type="button"
                        onClick={() => alternar(servico)}
                        aria-pressed={marcado}
                        className={`group relative flex items-center gap-2.5 rounded-xl border p-2.5 text-left transition-all ${
                          marcado
                            ? "border-[var(--ks-color-primary)] bg-[rgba(10,192,214,0.05)] shadow-sm"
                            : "border-slate-200 bg-slate-50/70 hover:border-slate-300 hover:bg-white"
                        }`}
                      >
                        <span
                          className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors ${
                            marcado ? "bg-white shadow-sm" : "bg-white"
                          }`}
                        >
                          <ArteDoServico icone={servico.icone} tamanho={24} />
                        </span>
                        <span className="min-w-0 flex-1">
                          <span className="block truncate text-[13px] font-semibold text-slate-800">
                            {servico.titulo}
                          </span>
                          <span className="block truncate text-[11.5px] text-slate-500">
                            {servico.preco > 0 ? dinheiro(servico.preco) : "sem custo para o cliente"}
                            <span className="text-slate-400">
                              {" · "}
                              {servico.porPeca ? "por unidade" : "uma vez"}
                            </span>
                          </span>
                        </span>
                        <span
                          className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors ${
                            marcado
                              ? "border-[var(--ks-color-primary)] bg-[var(--ks-color-primary)] text-white"
                              : "border-slate-300 bg-white text-transparent"
                          }`}
                        >
                          <Check size={13} strokeWidth={3} />
                        </span>
                        {servico.valeParaTodos ? (
                          <span className="absolute -top-2 left-9 rounded-full bg-slate-800 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-white">
                            padrão
                          </span>
                        ) : null}
                      </button>
                    );
                  })}
                </div>
              </div>
            ))}

            <p className="text-[12px] leading-relaxed text-slate-500">
              O que estiver marcado aparece na página do produto, logo acima do total. Serviço com o
              selo <strong>padrão</strong> vem ligado em todos os produtos, e desmarcar aqui desliga
              só neste.
            </p>
          </div>
        )}
      </div>

      {gerenciando ? (
        <BibliotecaDeServicos
          grupos={grupos}
          servicos={servicos}
          custos={custos}
          onFechar={() => setGerenciando(false)}
          onSalvo={onBiblioteca}
        />
      ) : null}
    </div>
  );
}