import React, { useEffect, useMemo, useState } from "react";

type Item = {
  Quantidade: string;
  Material: string;
  Unitário: string;
  Total: string;
};

type Gerador = {
  gerador: string;
  itens: Item[];
};

type Props = {
  data: Gerador[];
  defaultOpen?: boolean;
};
function totalByQtdUnit(it: Item): number {
  return toInt(it.Quantidade) * toNumberBR(it.Unitário);
}
function normalizeMaterial(s: string): string {
  return (s || "")
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/\s+/g, " ")
    .trim();
}
function toNumberBR(s: string): number {
  if (!s) return 0;
  const cleaned = s.replace(/[^\d,.-]/g, "");
  const normalized = cleaned
    .replace(/\.(?=\d{3}(?:\D|$))/g, "")
    .replace(",", ".");
  const n = parseFloat(normalized);
  return isNaN(n) ? 0 : n;
}

function toInt(s: string): number {
  const n = parseInt((s || "").replace(/[^\d-]/g, ""), 10);
  return isNaN(n) ? 0 : n;
}

function toCentsBR(s: string): number {
  if (!s) return 0;
  const cleaned = s.replace(/[^\d,.-]/g, "");
  const normalized = cleaned
    .replace(/\.(?=\d{3}(?:\D|$))/g, "")
    .replace(",", ".");
  const n = Number(normalized);
  return Number.isFinite(n) ? Math.round(n * 100) : 0;
}

function brFromCents(cents: number): string {
  return (cents / 100).toLocaleString("pt-BR", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
}

function itemTotalCents(it: Item): number {
  const qtd = toInt(it.Quantidade);
  const unitCents = toCentsBR(it.Unitário);
  if (qtd > 0 && unitCents > 0) return qtd * unitCents;
  // fallback caso falte algum campo
  return toCentsBR(it.Total);
}

function getItemTotal(it: Item): number {
  const total = toNumberBR(it.Total);
  if (total > 0) return total;
  const qtd = toInt(it.Quantidade);
  const unit = toNumberBR(it.Unitário);
  return qtd * unit;
}

const isEstrutura = (m: string) => /estrutura/i.test(m);
const isEstruturaSolo = (m: string) => /estrutura/i.test(m) && /solo/i.test(m);

const br = (n: number) =>
  n.toLocaleString("pt-BR", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });

const TabelaWeg: React.FC<Props> = ({ data, defaultOpen = true }) => {
  const [openState, setOpenState] = useState<Record<number, boolean>>({});
  const [minKwp, setMinKwp] = useState<string>("");
  const [maxKwp, setMaxKwp] = useState<string>("");

  const [filterMode, setFilterMode] = useState<"all" | "dup" | "uniq">("all");

  const indexedData = useMemo(
    () => data.map((g, idx) => ({ ...g, _idx: idx })),
    [data],
  );

  useEffect(() => {
    const init: Record<number, boolean> = {};
    data.forEach((_, i) => {
      init[i] = defaultOpen;
    });
    setOpenState(init);
  }, [data, defaultOpen]);

  const sumsByGerador = useMemo(() => {
    return Object.fromEntries(
      indexedData.map((g) => {
        const semEstruturaCents = g.itens
          .filter((it) => !isEstrutura(it.Material))
          .reduce((acc, it) => acc + itemTotalCents(it), 0);

        const estruturaSoloCents = g.itens
          .filter((it) => isEstruturaSolo(it.Material))
          .reduce((acc, it) => acc + itemTotalCents(it), 0);

        return [
          g._idx,
          {
            semEstruturaCents,
            estruturaSoloCents,
            totalComSoloCents: semEstruturaCents + estruturaSoloCents,
          },
        ] as const;
      }),
    );
  }, [indexedData]);

  const parseKwpFromGerador = (gerador: string): number | null => {
    const m = gerador.match(/([\d.,]+)\s*kWp/i);
    if (!m) return null;
    let s = m[1].trim();
    s = s.replace(/\./g, "").replace(",", ".");
    const val = parseFloat(s);
    return isNaN(val) ? null : val;
  };

  const parseInputKwp = (s: string): number | null => {
    const t = s.trim();
    if (!t) return null;
    const normalized = t.replace(/\./g, "").replace(",", ".");
    const n = parseFloat(normalized);
    return isNaN(n) ? null : n;
  };

  const min = parseInputKwp(minKwp);
  const max = parseInputKwp(maxKwp);

  const filtered = useMemo(() => {
    return indexedData.filter((g) => {
      const k = parseKwpFromGerador(g.gerador);
      if (k == null) return true;
      if (min != null && k < min) return false;
      if (max != null && k > max) return false;
      return true;
    });
  }, [indexedData, min, max]);

  const sorted = useMemo(() => {
    return [...filtered].sort((a, b) => {
      const ka = parseKwpFromGerador(a.gerador) ?? Number.POSITIVE_INFINITY;
      const kb = parseKwpFromGerador(b.gerador) ?? Number.POSITIVE_INFINITY;
      return ka - kb;
    });
  }, [filtered]);

  

  const expandAll = () => {
    setOpenState(Object.fromEntries(data.map((_, i) => [i, true])));
  };

  const collapseAll = () => {
    setOpenState(Object.fromEntries(data.map((_, i) => [i, false])));
  };

  const handleToggle = (originalIdx: number, open: boolean) => {
    setOpenState((s) => ({ ...s, [originalIdx]: open }));
  };

  const duplicatesFiltered = useMemo(() => {
    const perIdx: Record<number, { signature: string }> = {};
    const signatureCounts: Record<string, number> = {};

    const keyFor = (it: Item) => {
      const mat = normalizeMaterial(it.Material);
      const qtd = toInt(it.Quantidade);
      return `${mat}__${qtd}`;
    };

    for (const g of filtered) {
      const signature = g.itens.map(keyFor).sort().join("|");
      perIdx[g._idx] = { signature };
      signatureCounts[signature] = (signatureCounts[signature] || 0) + 1;
    }

    return { perIdx, signatureCounts };
  }, [filtered]);

  // métricas para o cabeçalho
  const { dupGroupsCount, dupOccurCount, nonDupCount } = useMemo(() => {
    const entries = Object.entries(duplicatesFiltered.signatureCounts);
    const dupGroups = entries.filter(([, c]) => c > 1);
    const dupGroupsCount = dupGroups.length;
    const dupOccurCount = dupGroups.reduce((acc, [, c]) => acc + c, 0);
    const nonDupCount = entries.filter(([, c]) => c === 1).length;
    return { dupGroupsCount, dupOccurCount, nonDupCount };
  }, [duplicatesFiltered]);

  const listToRender = useMemo(() => {
    if (filterMode === "all") return sorted;

    if (filterMode === "dup") {
      // mostrar TODAS as ocorrências duplicadas
      return sorted.filter((g) => {
        const sig = duplicatesFiltered.perIdx[g._idx]?.signature;
        if (!sig) return false;
        return (duplicatesFiltered.signatureCounts[sig] || 0) > 1;
      });
    }

    // "uniq": somente não duplicados
    return sorted.filter((g) => {
      const sig = duplicatesFiltered.perIdx[g._idx]?.signature;
      if (!sig) return false;
      return (duplicatesFiltered.signatureCounts[sig] || 0) === 1;
    });
  }, [sorted, duplicatesFiltered, filterMode]);

  if (!data || data.length === 0) {
    return <div style={styles.emptyBox}>Nenhum gerador encontrado.</div>;
  }
  return (
    <div style={styles.container}>
      <div className="flex w-full items-end justify-between gap-2 mb-2">
        <div className="flex items-center gap-2">
          <div className="text-black font-semibold">
            {filterMode === "all" && (
              <>
                Total de kits: {filtered.length} / {data.length}
              </>
            )}
            {filterMode === "dup" && (
              <>
                Kits duplicados: {dupOccurCount} (grupos: {dupGroupsCount})
              </>
            )}
            {filterMode === "uniq" && <>Kits não duplicados: {nonDupCount}</>}
          </div>
        </div>

        <div className="flex items-center gap-3">
          <div className="flex items-center gap-2">
            <label className="text-sm text-slate-700">Potência min (kWp)</label>
            <input
              value={minKwp}
              onChange={(e) => setMinKwp(e.target.value)}
              placeholder="ex.: 3,07"
              className="border rounded px-2 py-1 w-28"
            />
          </div>

          <div className="flex items-center gap-2">
            <label className="text-sm text-slate-700">máx</label>
            <input
              value={maxKwp}
              onChange={(e) => setMaxKwp(e.target.value)}
              placeholder="ex.: 4,92"
              className="border rounded px-2 py-1 w-24"
            />
          </div>

          {/* novos botões de modo */}
          <button
            type="button"
            onClick={() => setFilterMode("dup")}
            className={`text-black cursor-pointer hover:bg-slate-300 p-1 px-3 rounded-full ${
              filterMode === "dup" ? "bg-slate-800 text-white" : "bg-slate-200"
            }`}
          >
            Somente duplicados
          </button>
          <button
            type="button"
            onClick={() => setFilterMode("uniq")}
            className={`text-black cursor-pointer hover:bg-slate-300 p-1 px-3 rounded-full ${
              filterMode === "uniq" ? "bg-slate-800 text-white" : "bg-slate-200"
            }`}
          >
            Somente não duplicados
          </button>
          <button
            type="button"
            onClick={() => setFilterMode("all")}
            className={`text-black cursor-pointer hover:bg-slate-300 p-1 px-3 rounded-full ${
              filterMode === "all" ? "bg-slate-800 text-white" : "bg-slate-200"
            }`}
          >
            Mostrar todos
          </button>

          <button
            type="button"
            onClick={(e) => {
              e.preventDefault();
              setMinKwp("");
              setMaxKwp("");
              // opcional: voltar para "all" ao limpar
              // setFilterMode("all");
            }}
            className="text-black cursor-pointer hover:bg-slate-300 bg-slate-200 p-1 px-3 rounded-full"
          >
            Limpar filtros
          </button>
          <button
            type="button"
            onClick={(e) => {
              e.preventDefault();
              expandAll();
            }}
            className="text-black cursor-pointer hover:bg-slate-300 bg-slate-200 p-1 px-3 rounded-full"
          >
            Expandir tudo
          </button>
          <button
            onClick={(e) => {
              e.preventDefault();
              collapseAll();
            }}
            className="text-black cursor-pointer hover:bg-slate-300 bg-slate-200 p-1 px-3 rounded-full"
          >
            Minimizar tudo
          </button>
        </div>
      </div>

      {listToRender.map((g) => {
        const sums = sumsByGerador[g._idx];
        const dupInfo = duplicatesFiltered.perIdx[g._idx];
        const dupCount = dupInfo
          ? duplicatesFiltered.signatureCounts[dupInfo.signature] || 0
          : 0;
        const isKitDup = dupCount > 1;
        return (
          <details
            key={`${g.gerador}-${g._idx}`}
            open={!!openState[g._idx]}
            onToggle={(e) =>
              handleToggle(g._idx, (e.target as HTMLDetailsElement).open)
            }
            style={styles.card}
          >
            <summary style={styles.summary}>
              <span style={styles.title}>{g.gerador}</span>
              <span>
                <span style={styles.badge}>{g.itens.length} itens</span>
                {isKitDup && (
                  <span style={styles.dupBadge}>Kit duplicado ×{dupCount}</span>
                )}
              </span>
            </summary>

            <div style={styles.tableWrap}>
              <table style={styles.table}>
                <thead>
                  <tr>
                    <th
                      style={{ ...styles.th, width: 110, textAlign: "right" }}
                    >
                      Quantidade
                    </th>
                    <th style={{ ...styles.th, textAlign: "left" }}>
                      Material
                    </th>
                    <th
                      style={{ ...styles.th, width: 150, textAlign: "right" }}
                    >
                      Unitário (R$)
                    </th>
                    <th
                      style={{ ...styles.th, width: 160, textAlign: "right" }}
                    >
                      Total (R$)
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {g.itens.map((it, ii) => (
                    <tr key={ii} style={ii % 2 ? styles.trAlt : undefined}>
                      <td
                        style={{
                          ...styles.td,
                          textAlign: "right",
                          whiteSpace: "nowrap",
                        }}
                      >
                        {it.Quantidade}
                      </td>
                      <td style={{ ...styles.td, textAlign: "left" }}>
                        {it.Material}
                      </td>
                      <td
                        style={{
                          ...styles.td,
                          textAlign: "right",
                          whiteSpace: "nowrap",
                        }}
                      >
                        {it.Unitário}
                      </td>
                      <td
                        style={{
                          ...styles.td,
                          textAlign: "right",
                          whiteSpace: "nowrap",
                          fontWeight: 600,
                        }}
                      >
                        {brFromCents(itemTotalCents(it))}
                      </td>
                    </tr>
                  ))}
                </tbody>
                <tfoot>
                  <tr>
                    <td
                      colSpan={2}
                      style={{
                        ...styles.td,
                        textAlign: "right",
                        fontWeight: 700,
                      }}
                    >
                      Sem estrutura: {brFromCents(sums?.semEstruturaCents || 0)}
                    </td>
                    <td
                      colSpan={2}
                      style={{
                        ...styles.td,
                        textAlign: "right",
                        fontWeight: 700,
                      }}
                    >
                      Total: R$ {brFromCents(sums?.totalComSoloCents || 0)}
                    </td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </details>
        );
      })}
    </div>
  );
};

export default TabelaWeg;

// estilos inline
const styles: Record<string, React.CSSProperties> = {
  container: {
    display: "grid",
    gap: 16,
  },
  card: {
    border: "1px solid #e5e7eb",
    borderRadius: 12,
    background: "#fff",
    overflow: "hidden",
    boxShadow: "0 1px 2px rgba(16,24,40,0.06)",
  },
  summary: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 12,
    padding: "12px 16px",
    cursor: "pointer",
    background: "linear-gradient(180deg,#fafafa,#f6f7f9)",
    borderBottom: "1px solid #eef0f2",
    listStyle: "none" as any,
    userSelect: "none" as any,
  },
  title: {
    fontSize: 16,
    fontWeight: 600,
    color: "#0f172a",
  },
  dupBadge: {
    fontSize: 12,
    fontWeight: 700,
    color: "#b91c1c",
    background: "#fee2e2",
    padding: "4px 8px",
    borderRadius: 999,
    border: "1px solid #fecaca",
    marginLeft: 8,
  },
  dupInline: {
    marginLeft: 8,
    color: "#b91c1c",
    fontWeight: 700,
    fontSize: 12,
  },
  badge: {
    fontSize: 12,
    fontWeight: 600,
    background: "#f1f5f9",
    color: "#334155",
    padding: "4px 8px",
    borderRadius: 999,
  },
  tableWrap: {
    width: "100%",
    overflowX: "auto",
  },
  table: {
    width: "100%",
    borderCollapse: "separate",
    borderSpacing: 0,
    fontSize: 14,
  },
  th: {
    position: "sticky" as any,
    top: 0,
    background: "#f8fafc",
    color: "#334155",
    textAlign: "left",
    fontWeight: 700,
    padding: "10px 12px",
    borderBottom: "1px solid #e5e7eb",
    zIndex: 1,
  },
  td: {
    padding: "10px 12px",
    color: "#0f172a",
    borderBottom: "1px solid #eef2f7",
    verticalAlign: "top",
  },
  trAlt: {
    background: "#fcfcfe",
  },
  emptyBox: {
    border: "1px dashed #cbd5e1",
    padding: 16,
    borderRadius: 12,
    color: "#64748b",
    textAlign: "center" as any,
    background: "#f8fafc",
  },
};