"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { Check, ArrowRight, TriangleAlert, Sparkles, FileText, HeartPulse } from "lucide-react";
import { PageHeader } from "@/components/ui/page-header";
import { InfoTooltip } from "@/components/ui/info-tooltip";

/**
 * A configuração da precificação: um caminho, não uma lista de deveres.
 *
 * O simulador que morava aqui morreu de irrelevância: preço de verdade nasce
 * na Nova precificação, venda de verdade no Orçamento — e a conta avulsa de
 * balcão o Orçamento também faz, com MC e IRG na cara. O que esta tela deve
 * a quem chega é outra coisa: dizer ONDE a pessoa está no setup do método,
 * o que falta, por que falta, e o que destrava quando fecha.
 *
 * Cinco passos, na ordem pedagógica. Pendente ganha destaque e botão de ir
 * resolver; pronto encolhe para um check discreto. O passo dos produtos só
 * acende com TODOS precificados — régua dura de propósito: um produto sem
 * custo é um preço no chute, e o número diz quantos chutes restam.
 */

type Preparo = {
  custosVariaveis: { configurado: boolean; regime: string | null; totalPct: number };
  horaDaEstrutura?: { configurada: boolean; horasMes: number; estruturaMensal: number; taxa: number };
  custosFixos: { total_mensal: number; sem_classificacao: number } | null;
  producao: { maquinas: number; maquinasComCusto: number; cargos: number; cargosComCusto: number };
  margens: { categorias: number; comRegraPropria: number };
  produtos: { total: number; comCusto: number };
};

type Alertas = {
  estoqueBaixo: { id: string; nome: string; unidade: string; saldo: number; minimo: number | null }[];
  custoDefasado: { id: string; nome: string; custoGravado: number; custoAtual: number; variacaoPct: number }[];
};

const dinheiro = (v: number) =>
  new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(v || 0);

export default function PrecificacaoPage() {
  const [preparo, setPreparo] = useState<Preparo | null>(null);
  const [alertas, setAlertas] = useState<Alertas | null>(null);
  const [carregando, setCarregando] = useState(true);

  const carregar = useCallback(async () => {
    const [r, ra] = await Promise.all([
      fetch("/api/precificacao/preparo", { cache: "no-store" }),
      fetch("/api/precificacao/saude?alertas=1", { cache: "no-store" }),
    ]);
    if (r.ok) setPreparo(await r.json());
    if (ra.ok) {
      const j = await ra.json().catch(() => null);
      if (j?.alertas) setAlertas(j.alertas as Alertas);
    }
    setCarregando(false);
  }, []);

  useEffect(() => {
    void carregar();
  }, [carregar]);

  const passos = useMemo(() => {
    if (!preparo) return [];
    const estrutura = preparo.horaDaEstrutura;
    return [
      {
        titulo: "Impostos e taxas da venda",
        porque: "O que sai de cada venda antes de sobrar qualquer coisa — imposto, taxa de recebimento e perda. Entram no divisor do preço.",
        pronto: preparo.custosVariaveis.configurado && preparo.custosVariaveis.totalPct > 0,
        detalhe: preparo.custosVariaveis.configurado
          ? `${preparo.custosVariaveis.totalPct.toFixed(2)}% saem de cada venda`
          : "Ainda não configurado",
        href: "/dashboard/precificacao/custos-da-venda",
      },
      {
        titulo: "Custos fixos e horas produtivas",
        porque: "O que a empresa paga mesmo vendendo zero — e as horas que ela produz por mês. É a dupla que forma a hora da estrutura: cada minuto de ficha carrega sua fatia de aluguel e pró-labore.",
        pronto: (preparo.custosFixos?.total_mensal ?? 0) > 0 && Boolean(estrutura?.configurada),
        detalhe:
          (preparo.custosFixos?.total_mensal ?? 0) > 0
            ? `${dinheiro(preparo.custosFixos!.total_mensal)}/mês` +
              (estrutura?.configurada
                ? ` · hora da estrutura ${dinheiro(estrutura.taxa)}/h`
                : " · falta informar as horas produtivas") +
              ((preparo.custosFixos?.sem_classificacao ?? 0) > 0
                ? ` · ${dinheiro(preparo.custosFixos!.sem_classificacao)} sem classificar`
                : "")
            : "Nenhum custo fixo identificado",
        href: "/dashboard/financial/payables?tab=custos-fixos",
      },
      {
        titulo: "Hora de máquina e de trabalho",
        porque: "O tempo é custo: depreciação, energia e manutenção na hora da máquina; salário, encargos e eficiência na hora da pessoa. É o que faz a ficha técnica dizer a verdade.",
        pronto:
          preparo.producao.maquinas > 0 &&
          preparo.producao.maquinasComCusto === preparo.producao.maquinas &&
          preparo.producao.cargosComCusto === preparo.producao.cargos,
        detalhe: `${preparo.producao.maquinasComCusto} de ${preparo.producao.maquinas} máquinas e ${preparo.producao.cargosComCusto} de ${preparo.producao.cargos} cargos com custo`,
        href: "/dashboard/production/operations",
      },
      {
        titulo: "Margem por categoria",
        porque: "Quanto você quer ganhar em cada tipo de produto — banner não tem a margem de brinde. É a regra que o assistente aplica sozinho.",
        pronto: preparo.margens.comRegraPropria > 0,
        detalhe: `${preparo.margens.comRegraPropria} de ${preparo.margens.categorias} categorias com regra própria`,
        href: "/dashboard/categories",
      },
      {
        titulo: "Todos os produtos precificados",
        porque: "Produto sem custo é preço no chute — e chute contamina a margem, o termômetro e o ranking. Este passo só acende com TODOS precificados; comece pelos que mais vendem.",
        pronto:
          preparo.produtos.total > 0 && preparo.produtos.comCusto === preparo.produtos.total,
        detalhe: `${preparo.produtos.comCusto} de ${preparo.produtos.total} produtos com custo`,
        href: "/dashboard/precificacao/nova",
        acao: "Precificar",
      },
    ];
  }, [preparo]);

  const prontos = passos.filter((p) => p.pronto).length;
  const completo = passos.length > 0 && prontos === passos.length;

  if (carregando) {
    return <PageHeader eyebrow="Precificação" title="Configuração" subtitle="Carregando…" />;
  }

  return (
    <div className="space-y-6 max-w-4xl">
      <PageHeader
        eyebrow="Precificação"
        title="Configuração da precificação"
        subtitle="O caminho para o preço sair certo — e continuar certo"
      />

      {/* O progresso, dito de cara. */}
      <section className="ks-surface rounded-2xl p-5 border"
               style={{ borderColor: completo ? "var(--ks-emerald)" : "var(--ks-color-border-subtle)" }}>
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <div>
            <div className="text-sm font-bold text-[var(--ks-color-text-primary)]">
              {completo
                ? "Tudo configurado — seus preços saem com o método completo."
                : `${prontos} de ${passos.length} passos prontos`}
            </div>
            <p className="text-xs text-[var(--ks-color-text-soft)] mt-0.5">
              {completo
                ? "Daqui em diante o trabalho é manutenção: os alertas abaixo avisam quando algo degradar."
                : "Cada passo pronto deixa o preço — e o Ponto de Equilíbrio — mais confiável."}
            </p>
          </div>
          <div className="text-2xl font-black"
               style={{ color: completo ? "var(--ks-emerald,#059669)" : "var(--ks-color-primary)" }}>
            {passos.length > 0 ? Math.round((prontos / passos.length) * 100) : 0}%
          </div>
        </div>
        <div className="mt-3 flex h-2.5 rounded-full overflow-hidden bg-[var(--ks-color-bg-hover)]">
          <div className="h-full rounded-full transition-all duration-700"
               style={{
                 width: `${passos.length > 0 ? (prontos / passos.length) * 100 : 0}%`,
                 background: completo ? "var(--ks-emerald)" : "var(--ks-color-primary)",
               }} />
        </div>
      </section>

      {/* A trilha: pendente grita, pronto sussurra. */}
      <section className="space-y-2.5">
        {passos.map((p, i) => (
          <div key={p.titulo}
               className="ks-surface rounded-2xl p-4 border transition"
               style={{ borderColor: p.pronto ? "var(--ks-color-border-subtle)" : "var(--ks-color-primary)" }}>
            <div className="flex items-start gap-3">
              <span className="h-8 w-8 rounded-full flex items-center justify-center shrink-0 text-sm font-black"
                    style={{
                      background: p.pronto ? "var(--ks-color-status-success)" : "var(--ks-color-primary)",
                      color: "#fff",
                    }}>
                {p.pronto ? <Check size={16} /> : i + 1}
              </span>
              <div className="min-w-0 flex-1">
                <div className="font-semibold text-[var(--ks-color-text-primary)] inline-flex items-center">
                  {p.titulo}
                  <InfoTooltip text={p.porque} />
                </div>
                <p className="text-xs mt-0.5"
                   style={{ color: p.pronto ? "var(--ks-color-text-soft)" : "var(--ks-color-text-secondary)" }}>
                  {p.detalhe}
                </p>
              </div>
              <Link href={p.href}
                    className={p.pronto
                      ? "shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold border border-[var(--ks-color-border-subtle)] text-[var(--ks-color-text-muted)] hover:border-[var(--ks-color-primary)] hover:text-[var(--ks-color-primary)] transition"
                      : "shrink-0 inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-bold text-white transition hover:opacity-90"}
                    style={p.pronto ? undefined : { background: "var(--ks-color-primary)" }}>
                {p.pronto ? "Revisar" : (p.acao ?? "Configurar")} <ArrowRight size={13} />
              </Link>
            </div>
          </div>
        ))}
      </section>

      {/* O prêmio no fim do caminho. */}
      <section className="space-y-2.5">
        <h2 className="ks-section-title inline-flex items-center">
          O que isso destrava
          <InfoTooltip text="O setup não é burocracia: é o que faz estas três telas dizerem a verdade. Com passos faltando, elas funcionam — mas com chute dentro." />
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          <Destrava
            icone={<Sparkles size={16} />}
            cor="var(--ks-color-primary)"
            titulo="Nova precificação"
            texto="O preço nasce da ficha, com fixos pelo tempo e o IRG na cara."
            href="/dashboard/precificacao/nova"
          />
          <Destrava
            icone={<FileText size={16} />}
            cor="var(--ks-amber)"
            titulo="Orçamentos"
            texto="Cada proposta mostra MC, IRG e a divisão matéria-prima × mão de obra."
            href="/dashboard/quotes/new"
          />
          <Destrava
            icone={<HeartPulse size={16} />}
            cor="var(--ks-emerald)"
            titulo="Ponto de Equilíbrio"
            texto="O termômetro do mês, o dia em que a casa está paga e o ranking ABC."
            href="/dashboard/precificacao/saude"
          />
        </div>
      </section>

      {/* O que pede ação agora: manutenção do setup. */}
      {alertas && (alertas.custoDefasado.length > 0 || alertas.estoqueBaixo.length > 0) && (
        <section className="space-y-3">
          <h2 className="ks-section-title">Pede atenção agora</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 items-start">
            {alertas.custoDefasado.length > 0 && (
              <div className="ks-surface rounded-2xl p-4 border border-[var(--ks-color-border-subtle)]">
                <div className="flex items-center gap-2 text-xs font-semibold text-[var(--ks-color-text-soft)] mb-2">
                  <TriangleAlert size={14} /> Preço feito com custo velho
                  <InfoTooltip text="A ficha recalculada com os custos de HOJE (insumos e horas de máquina/trabalho) diverge do que foi gravado na precificação. Reabra o produto e reprecifique." />
                </div>
                <div className="space-y-1.5">
                  {alertas.custoDefasado.slice(0, 6).map((p) => (
                    <Link key={p.id} href={`/dashboard/products/${p.id}`}
                          className="block text-xs hover:bg-[var(--ks-color-bg-hover)] rounded-lg px-2 py-1.5 -mx-2">
                      <div className="flex items-baseline justify-between gap-2">
                        <span className="truncate">{p.nome}</span>
                        <span className={`shrink-0 font-semibold ${p.variacaoPct > 0 ? "text-[var(--ks-color-status-danger)]" : "text-[var(--ks-color-status-success,#059669)]"}`}>
                          {p.variacaoPct > 0 ? "+" : ""}{p.variacaoPct.toFixed(0)}%
                        </span>
                      </div>
                      <div className="text-[10px] text-[var(--ks-color-text-soft)]">
                        custo era {dinheiro(p.custoGravado)}, hoje dá {dinheiro(p.custoAtual)}
                      </div>
                    </Link>
                  ))}
                </div>
              </div>
            )}
            {alertas.estoqueBaixo.length > 0 && (
              <div className="ks-surface rounded-2xl p-4 border border-[var(--ks-color-border-subtle)]">
                <div className="flex items-center gap-2 text-xs font-semibold text-[var(--ks-color-text-soft)] mb-2">
                  <TriangleAlert size={14} /> Insumos acabando
                </div>
                <div className="space-y-1.5">
                  {alertas.estoqueBaixo.slice(0, 6).map((m) => (
                    <div key={m.id} className="flex items-baseline justify-between gap-2 text-xs">
                      <span className="truncate">{m.nome}</span>
                      <span className="shrink-0 font-semibold text-[var(--ks-color-status-danger)]">
                        {m.saldo} {m.unidade}
                        {m.minimo != null && (
                          <span className="text-[10px] font-normal text-[var(--ks-color-text-soft)]"> / mín {m.minimo}</span>
                        )}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </section>
      )}
    </div>
  );
}

function Destrava({ icone, cor, titulo, texto, href }: {
  icone: React.ReactNode; cor: string; titulo: string; texto: string; href: string;
}) {
  return (
    <Link href={href}
          className="ks-surface rounded-2xl p-4 border border-[var(--ks-color-border-subtle)] hover:border-[var(--ks-color-primary)] transition group">
      <div className="flex items-center gap-2.5 mb-1.5">
        <span className="flex h-8 w-8 items-center justify-center rounded-xl text-white transition-transform group-hover:scale-110"
              style={{ background: cor }}>
          {icone}
        </span>
        <span className="font-semibold text-sm text-[var(--ks-color-text-primary)]">{titulo}</span>
      </div>
      <p className="text-xs text-[var(--ks-color-text-soft)] leading-snug">{texto}</p>
    </Link>
  );
}