"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { Percent, Receipt, CreditCard, TriangleAlert, Check, Info, Calculator } from "lucide-react";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { usePermissoes } from "@/lib/permissoes-do-usuario";
import { InfoTooltip } from "@/components/ui/info-tooltip";
import { CampoDecimal, numeroDoTexto, textoDecimalValido, textoDoNumero } from "@/components/ui/campo-decimal";

/**
 * Os custos que saem de cada venda antes de sobrar margem.
 *
 * A tela existe porque esses números não existiam em lugar nenhum do sistema:
 * não havia campo de alíquota, de taxa de maquininha nem de refação. Quem
 * calculava preço só sobre o material estava entregando de 10% a 20% do
 * faturamento sem ver.
 *
 * O desenho segue uma regra: nenhum percentual aparece sem dizer de onde veio.
 * A alíquota do Simples é calculada do faturamento, então o faturamento fica na
 * mesma tela e editável — mostrar só o resultado faria o usuário desconfiar do
 * número e ignorá-lo, que é o mesmo que não ter.
 */

type Configuracao = {
  tax_regime: string;
  simples_annex: string | null;
  manual_tax_percent: number | null;
  mei_monthly_amount: number | null;
  fee_pix_percent: number;
  fee_debit_percent: number;
  fee_credit_percent: number;
  fee_boleto_percent: number;
  fee_transfer_percent: number;
  fee_cash_percent: number;
  loss_percent: number;
  other_variable_percent: number;
};

type MesDeFaturamento = { competencia: string; amount: number; source: string };

const VAZIA: Configuracao = {
  tax_regime: "simples_nacional",
  simples_annex: "III",
  manual_tax_percent: null,
  mei_monthly_amount: null,
  fee_pix_percent: 0,
  fee_debit_percent: 0,
  fee_credit_percent: 0,
  fee_boleto_percent: 0,
  fee_transfer_percent: 0,
  fee_cash_percent: 0,
  loss_percent: 0,
  other_variable_percent: 0,
};

const REGIMES = [
  { valor: "simples_nacional", rotulo: "Simples Nacional" },
  { valor: "lucro_presumido", rotulo: "Lucro Presumido" },
  { valor: "lucro_real", rotulo: "Lucro Real" },
  { valor: "mei", rotulo: "MEI" },
  { valor: "isento", rotulo: "Isento / não se aplica" },
];

const ANEXOS = [
  { valor: "I", rotulo: "I — Comércio (revenda de brindes, produtos prontos)" },
  { valor: "II", rotulo: "II — Indústria (você fabrica ou transforma)" },
  { valor: "III", rotulo: "III — Serviços (comunicação visual, personalização)" },
  { valor: "IV", rotulo: "IV — Serviços (construção, limpeza, vigilância)" },
  { valor: "V", rotulo: "V — Serviços (publicidade, engenharia, projetos)" },
];

const TAXAS: Array<{ campo: keyof Configuracao; rotulo: string }> = [
  { campo: "fee_pix_percent", rotulo: "Pix" },
  { campo: "fee_debit_percent", rotulo: "Cartão de débito" },
  { campo: "fee_credit_percent", rotulo: "Cartão de crédito" },
  { campo: "fee_boleto_percent", rotulo: "Boleto" },
  { campo: "fee_transfer_percent", rotulo: "Transferência" },
  { campo: "fee_cash_percent", rotulo: "Dinheiro" },
];

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

const mesLegivel = (competencia: string) => {
  const d = new Date(`${competencia}T12:00:00`);
  const s = d.toLocaleDateString("pt-BR", { month: "short", year: "numeric" });
  return s.charAt(0).toUpperCase() + s.slice(1);
};

export default function PricingSettingsPage() {
  const { pode } = usePermissoes();
  const podeEditar = pode("pricing.taxes.write");

  const [cfg, setCfg] = useState<Configuracao>(VAZIA);
  const [faturamento, setFaturamento] = useState<MesDeFaturamento[]>([]);
  const [aliquota, setAliquota] = useState(0);
  const [carregando, setCarregando] = useState(true);
  const [salvando, setSalvando] = useState(false);
  const [aviso, setAviso] = useState<{ tipo: "ok" | "erro"; texto: string } | null>(null);

  const carregar = useCallback(async () => {
    try {
      const r = await fetch("/api/pricing-settings", { cache: "no-store" });
      const j = (await r.json()) as {
        settings: Configuracao | null;
        revenue: MesDeFaturamento[];
        aliquota_atual: number;
        error?: string;
      };
      if (!r.ok) {
        setAviso({ tipo: "erro", texto: j.error || "Falha ao carregar." });
        return;
      }
      if (j.settings) setCfg({ ...VAZIA, ...j.settings });
      setFaturamento(j.revenue ?? []);
      setAliquota(Number(j.aliquota_atual ?? 0));
    } finally {
      setCarregando(false);
    }
  }, []);

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

  const salvar = async () => {
    setSalvando(true);
    setAviso(null);
    try {
      const r = await fetch("/api/pricing-settings", {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(cfg),
      });
      const j = (await r.json()) as { error?: string; aliquota_atual?: number };
      if (!r.ok) {
        setAviso({ tipo: "erro", texto: j.error || "Falha ao salvar." });
        return;
      }
      setAliquota(Number(j.aliquota_atual ?? 0));
      setAviso({ tipo: "ok", texto: "Configuração salva." });
      await carregar();
    } finally {
      setSalvando(false);
    }
  };

  const corrigirMes = async (competencia: string, valor: number) => {
    const r = await fetch("/api/pricing-settings", {
      method: "PATCH",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ competencia, amount: valor }),
    });
    const j = (await r.json()) as { error?: string; aliquota_atual?: number };
    if (!r.ok) {
      setAviso({ tipo: "erro", texto: j.error || "Falha ao corrigir o mês." });
      return;
    }
    setAliquota(Number(j.aliquota_atual ?? 0));
    await carregar();
  };

  /* O mês corrente fica de fora: a lei manda olhar os 12 meses fechados, e é
     assim que o banco calcula. Somar aqui incluindo o mês em curso mostraria na
     tela um total diferente do que gerou a alíquota logo ao lado — dois números
     brigando é o que faz a pessoa parar de confiar nos dois. */
  const rbt12 = useMemo(() => {
    const mesCorrente = new Date();
    const primeiroDoMes = `${mesCorrente.getFullYear()}-${String(mesCorrente.getMonth() + 1).padStart(2, "0")}-01`;
    return faturamento
      .filter((m) => m.competencia < primeiroDoMes)
      .slice(0, 12)
      .reduce((soma, m) => soma + Number(m.amount || 0), 0);
  }, [faturamento]);

  /* O que sai de cada venda. A forma mais cara é a que interessa mostrar: é a
     que decide se o preço cobre o pior caso. */
  const taxaMaisCara = useMemo(
    () => Math.max(...TAXAS.map((t) => Number(cfg[t.campo] || 0))),
    [cfg]
  );
  const totalVariavel = useMemo(
    () =>
      aliquota +
      taxaMaisCara +
      Number(cfg.loss_percent || 0) +
      Number(cfg.other_variable_percent || 0),
    [aliquota, taxaMaisCara, cfg]
  );

  const campoPercentual = (campo: keyof Configuracao, rotulo: string) => (
    <div key={campo} className="space-y-1">
      <label className="text-xs font-medium text-[var(--ks-color-text-soft)]">{rotulo}</label>
      <div className="relative">
        <CampoDecimal
          valor={Number(cfg[campo] ?? 0)}
          aoMudar={(n) => setCfg((v) => ({ ...v, [campo]: n }))}
          disabled={!podeEditar}
          className="ks-input w-full pr-7"
        />
        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-[var(--ks-color-text-soft)]">
          %
        </span>
      </div>
    </div>
  );

  if (carregando) {
    return (
      <div className="space-y-6">
        <PageHeader eyebrow="Financeiro" title="Precificação" subtitle="Carregando…" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Financeiro"
        title="Impostos e Taxas"
        subtitle="O que sai de cada real vendido antes de sobrar margem"
        actions={
          podeEditar ? (
            <Button onClick={() => void salvar()} disabled={salvando} icon={<Check size={16} />}>
              {salvando ? "Salvando…" : "Salvar"}
            </Button>
          ) : null
        }
      />

      {aviso && (
        <div
          className={`rounded-xl px-4 py-3 text-sm ${
            aviso.tipo === "ok"
              ? "bg-[var(--ks-color-status-success-soft)] text-[var(--ks-color-status-success)]"
              : "bg-[var(--ks-color-status-danger-soft)] text-[var(--ks-color-status-danger)]"
          }`}
        >
          {aviso.texto}
        </div>
      )}

      {/* O resultado primeiro: e o numero que a pessoa veio buscar. */}
      <section className="ks-surface rounded-2xl p-5 border border-[var(--ks-color-border-subtle)]">
        <div className="flex items-start gap-4 flex-wrap">
          <span className="ks-tile" style={{ background: "var(--ks-rose)" }}>
            <Calculator size={21} />
          </span>
          <div className="min-w-0 flex-1">
            <h2 className="ks-section-title inline-flex items-center">
              De cada R$ 100 vendidos
              <InfoTooltip text="Considerando a forma de recebimento mais cara. O que sobra é a margem de contribuição — dela ainda saem os custos fixos. A comissão do vendedor entra por venda, conforme o plano de cada um, e por isso não aparece nesta média." />
            </h2>
            <div className="mt-4 flex flex-wrap gap-x-6 gap-y-3">
              <Numero rotulo="Imposto" valor={aliquota} />
              <Numero rotulo="Recebimento" valor={taxaMaisCara} />
              <Numero rotulo="Perda" valor={Number(cfg.loss_percent || 0)} />
              <Numero rotulo="Outros" valor={Number(cfg.other_variable_percent || 0)} />
              <div className="pl-6 border-l border-[var(--ks-color-border-subtle)]">
                <div className="text-xs text-[var(--ks-color-text-soft)]">Sai da venda</div>
                <div className="text-2xl font-black text-[var(--ks-color-status-danger)]">
                  {totalVariavel.toFixed(2)}%
                </div>
                <div className="text-[11px] text-[var(--ks-color-text-soft)]">
                  {dinheiro(totalVariavel)} a cada R$ 100
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 items-start">
        <section className="ks-surface rounded-2xl p-5 border border-[var(--ks-color-border-subtle)] space-y-4">
          <div className="flex items-center gap-3">
            <span className="ks-tile ks-tile-sm" style={{ background: "var(--ks-sky)" }}>
              <Receipt size={18} />
            </span>
            <div>
              <h3 className="ks-section-title inline-flex items-center">
                Regime tributário
                <InfoTooltip text="Define o imposto que incide sobre a venda. No Simples, a alíquota efetiva é calculada pelo faturamento dos últimos 12 meses." />
              </h3>
            </div>
          </div>

          <div className="space-y-1">
            <label className="text-xs font-medium text-[var(--ks-color-text-soft)]">Regime</label>
            <select
              disabled={!podeEditar}
              value={cfg.tax_regime}
              onChange={(e) => setCfg((v) => ({ ...v, tax_regime: e.target.value }))}
              className="ks-input w-full"
            >
              {REGIMES.map((r) => (
                <option key={r.valor} value={r.valor}>
                  {r.rotulo}
                </option>
              ))}
            </select>
          </div>

          {cfg.tax_regime === "simples_nacional" && (
            <div className="space-y-1">
              <label className="text-xs font-medium text-[var(--ks-color-text-soft)]">
                Anexo
              </label>
              <select
                disabled={!podeEditar}
                value={cfg.simples_annex ?? "III"}
                onChange={(e) => setCfg((v) => ({ ...v, simples_annex: e.target.value }))}
                className="ks-input w-full"
              >
                {ANEXOS.map((a) => (
                  <option key={a.valor} value={a.valor}>
                    {a.rotulo}
                  </option>
                ))}
              </select>
            </div>
          )}

          {(cfg.tax_regime === "lucro_presumido" || cfg.tax_regime === "lucro_real") &&
            campoPercentual("manual_tax_percent", "Alíquota total sobre a venda")}

          {cfg.tax_regime === "mei" && (
            <div className="rounded-xl bg-[var(--ks-color-bg-inset)] px-4 py-3 text-sm text-[var(--ks-color-text-secondary)]">
              O MEI paga valor fixo por mês, e não percentual sobre a venda. Por isso o imposto
              entra como custo fixo, não como custo variável.
            </div>
          )}

          <div className="rounded-xl bg-[var(--ks-color-status-info-soft)] px-4 py-3">
            <div className="flex items-start gap-2">
              <Info size={15} className="text-[var(--ks-color-status-info)] mt-0.5 shrink-0" />
              <div className="text-xs text-[var(--ks-color-text-secondary)]">
                <strong>Alíquota efetiva hoje: {aliquota.toFixed(3)}%</strong>
                {cfg.tax_regime === "simples_nacional" && (
                  <>
                    <br />
                    Calculada sobre {dinheiro(rbt12)} faturados nos últimos 12 meses. Não é a
                    alíquota da tabela — essa é a nominal, e quem usa ela paga a mais.
                  </>
                )}
              </div>
            </div>
          </div>
        </section>

        <section className="ks-surface rounded-2xl p-5 border border-[var(--ks-color-border-subtle)] space-y-4">
          <div className="flex items-center gap-3">
            <span className="ks-tile ks-tile-sm" style={{ background: "var(--ks-emerald)" }}>
              <CreditCard size={18} />
            </span>
            <div>
              <h3 className="ks-section-title inline-flex items-center">
                Taxa de recebimento
                <InfoTooltip text="O que a maquininha ou o banco cobra em cada forma de pagamento. O simulador considera a mais cara, para o preço aguentar qualquer venda." />
              </h3>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-3">
            {TAXAS.map((t) => campoPercentual(t.campo, t.rotulo))}
          </div>
        </section>

        <section className="ks-surface rounded-2xl p-5 border border-[var(--ks-color-border-subtle)] space-y-4">
          <div className="flex items-center gap-3">
            <span className="ks-tile ks-tile-sm" style={{ background: "var(--ks-amber)" }}>
              <TriangleAlert size={18} />
            </span>
            <div>
              <h3 className="ks-section-title inline-flex items-center">
                Perda e outros
                <InfoTooltip text="Refação, material estragado, frete que você paga. Em personalizados a refação é recorrente — impressão errada, peça torta, material que rasgou na aplicação. Deixar em zero faz a margem parecer maior do que é." />
              </h3>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-3">
            {campoPercentual("loss_percent", "Perda e refação")}
            {campoPercentual("other_variable_percent", "Outros custos variáveis")}
          </div>
        </section>

        {cfg.tax_regime === "simples_nacional" && (
          <section className="ks-surface rounded-2xl p-5 border border-[var(--ks-color-border-subtle)] space-y-3">
            <div className="flex items-center gap-3">
              <span className="ks-tile ks-tile-sm" style={{ background: "var(--ks-brand-600)" }}>
                <Percent size={18} />
              </span>
              <div>
                <h3 className="ks-section-title inline-flex items-center">
                  Faturamento dos últimos meses
                  <InfoTooltip text="É o que define a faixa do Simples. Preenchido automaticamente pelas vendas do sistema — corrija os meses em que nem tudo foi lançado aqui." />
                </h3>
              </div>
            </div>

            {faturamento.length === 0 ? (
              <p className="text-sm text-[var(--ks-color-text-muted)] py-3">
                Salve a configuração para o sistema montar o histórico a partir das suas vendas.
              </p>
            ) : (
              <div className="space-y-1.5 max-h-[320px] overflow-y-auto">
                {faturamento.map((m) => (
                  <LinhaDeMes
                    key={m.competencia}
                    mes={m}
                    podeEditar={podeEditar}
                    aoCorrigir={(valor) => void corrigirMes(m.competencia, valor)}
                  />
                ))}
              </div>
            )}
          </section>
        )}
      </div>
    </div>
  );
}

function Numero({ rotulo, valor }: { rotulo: string; valor: number }) {
  return (
    <div>
      <div className="text-xs text-[var(--ks-color-text-soft)]">{rotulo}</div>
      <div className="text-lg font-bold text-[var(--ks-color-text-primary)]">
        {valor.toFixed(2)}%
      </div>
    </div>
  );
}

function LinhaDeMes({
  mes,
  podeEditar,
  aoCorrigir,
}: {
  mes: MesDeFaturamento;
  podeEditar: boolean;
  aoCorrigir: (valor: number) => void;
}) {
  const [editando, setEditando] = useState(false);
  const [valor, setValor] = useState(textoDoNumero(mes.amount ?? 0));

  return (
    <div className="flex items-center gap-3 rounded-lg bg-[var(--ks-color-bg-inset)] px-3 py-2">
      <span className="text-xs font-medium text-[var(--ks-color-text-primary)] w-20 shrink-0">
        {mesLegivel(mes.competencia)}
      </span>
      {editando ? (
        <>
          <input
            inputMode="decimal"
            autoFocus
            value={valor}
            onChange={(e) => { if (textoDecimalValido(e.target.value)) setValor(e.target.value); }}
            className="ks-input flex-1 h-8 text-sm"
          />
          <button
            type="button"
            onClick={() => {
              aoCorrigir(numeroDoTexto(valor));
              setEditando(false);
            }}
            className="text-xs font-semibold text-[var(--ks-color-primary-strong)] hover:underline shrink-0"
          >
            Salvar
          </button>
        </>
      ) : (
        <>
          <span className="flex-1 text-sm font-semibold text-[var(--ks-color-text-primary)]">
            {dinheiro(Number(mes.amount || 0))}
          </span>
          {/* Dizer de onde veio o numero e o que faz a pessoa confiar nele — ou
              perceber que precisa corrigir. */}
          <span
            className={`ks-chip shrink-0 ${
              mes.source === "informado" ? "ks-chip-info" : "ks-chip-neutral"
            }`}
          >
            {mes.source === "informado" ? "corrigido" : "do sistema"}
          </span>
          {podeEditar && (
            <button
              type="button"
              onClick={() => setEditando(true)}
              className="text-xs font-semibold text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-primary)] shrink-0"
            >
              Corrigir
            </button>
          )}
        </>
      )}
    </div>
  );
}