mport { useState, useEffect } from "react";
import { Plus, TrendingUp, AlertTriangle, DollarSign, Target, Zap, X, Check, Activity, Edit3 } from "lucide-react";

// ===== CONFIG INICIAL =====
const DEFAULT_CONFIG = {
  metaLiquida: 10000,
};

// ===== HELPERS =====
const fmt = (n) => `R$ ${Number(n).toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
const today = () => new Date().toISOString().slice(0, 10);
const parseBRDate = (d) => {
  if (!d) return "";
  return d.split("-").reverse().join("/");
};

export default function Dashboard() {
  const [loading, setLoading] = useState(true);
  const [config, setConfig] = useState(DEFAULT_CONFIG);
  const [dias, setDias] = useState([]); // { data, vendas, gasto, contasAtivas }
  const [tab, setTab] = useState("hoje");
  const [showConfig, setShowConfig] = useState(false);
  const [showEditDia, setShowEditDia] = useState(false);
  const [editDate, setEditDate] = useState(today());

  // Carregar do storage
  useEffect(() => {
    (async () => {
      try {
        const c = await window.storage.get("cerebro_v2:config");
        if (c) setConfig(JSON.parse(c.value));
      } catch {}
      try {
        const d = await window.storage.get("cerebro_v2:dias");
        if (d) setDias(JSON.parse(d.value));
      } catch {}
      setLoading(false);
    })();
  }, []);

  // Salvar
  const save = async (key, val) => {
    try { await window.storage.set(`cerebro_v2:${key}`, JSON.stringify(val)); } catch (e) { console.error(e); }
  };
  useEffect(() => { if (!loading) save("config", config); }, [config, loading]);
  useEffect(() => { if (!loading) save("dias", dias); }, [dias, loading]);

  // ===== CÁLCULOS =====
  const hoje = today();
  const inicioMes = hoje.slice(0, 7) + "-01";

  const getDia = (data) => dias.find((d) => d.data === data) || { data, vendas: 0, gasto: 0, contasAtivas: 0 };
  const hojeAtivo = getDia(hoje);

  const diasMes = dias.filter((d) => d.data >= inicioMes);
  const fatMes = diasMes.reduce((s, d) => s + d.vendas, 0);
  const gastoMes = diasMes.reduce((s, d) => s + d.gasto, 0);
  const lucroMes = fatMes - gastoMes;
  const lucroHoje = hojeAtivo.vendas - hojeAtivo.gasto;

  const progressoMeta = (lucroMes / config.metaLiquida) * 100;

  const diasNoMes = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
  const diaAtual = new Date().getDate();
  const diasRestantes = diasNoMes - diaAtual + 1;
  const lucroFaltando = config.metaLiquida - lucroMes;

  // Projeção
  const mediaLucroDia = diasMes.length > 0 ? (lucroMes / diasMes.length) : 0;
  const projecaoMes = lucroMes + (mediaLucroDia * diasRestantes);

  // ===== AÇÕES =====
  const saveDia = (dataInput) => {
    const novos = dias.filter((d) => d.data !== dataInput.data);
    novos.push(dataInput);
    novos.sort((a, b) => b.data.localeCompare(a.data)); // Ordena decrescente
    setDias(novos);
    setShowEditDia(false);
  };

  const openEdit = (data = hoje) => {
    setEditDate(data);
    setShowEditDia(true);
  };

  if (loading) {
    return (
      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "#0a0a0a", color: "#fff", fontFamily: "monospace" }}>
        carregando cérebro...
      </div>
    );
  }

  return (
    <div style={styles.app}>
      <style>{globalCSS}</style>

      {/* HEADER */}
      <header style={styles.header}>
        <div>
          <div style={styles.brand}>
            <span style={styles.brandPulse}></span>
            CÉREBRO<span style={{ color: "#84cc16" }}>.OPS</span>
          </div>
          <div style={styles.subbrand}>painel de comando · {new Date().toLocaleDateString("pt-BR", { weekday: "long", day: "numeric", month: "long" })}</div>
        </div>
        <button style={styles.configBtn} onClick={() => setShowConfig(true)}>config</button>
      </header>

      {/* TABS */}
      <nav style={styles.tabs}>
        {[
          { k: "hoje", l: "hoje", icon: Zap },
          { k: "meta", l: "meta", icon: Target },
          { k: "historico", l: "histórico", icon: Activity },
        ].map(({ k, l, icon: Icon }) => (
          <button key={k} onClick={() => setTab(k)} style={{ ...styles.tab, ...(tab === k ? styles.tabActive : {}) }}>
            <Icon size={14} /> {l}
          </button>
        ))}
      </nav>

      <main style={styles.main}>
        {/* ===== HOJE ===== */}
        {tab === "hoje" && (
          <>
            <div style={styles.heroCard}>
              <div style={styles.heroLabel}>lucro hoje</div>
              <div style={{...styles.heroNum, color: lucroHoje < 0 ? "#ef4444" : "#fff"}}>
                {fmt(lucroHoje)}
              </div>
              <div style={styles.heroDetail}>
                {fmt(hojeAtivo.vendas)} faturamento · {fmt(hojeAtivo.gasto)} custo
              </div>
              {hojeAtivo.vendas === 0 && hojeAtivo.gasto === 0 && (
                <div style={styles.heroBar}>
                  <div style={{ ...styles.heroBarFill, width: "0%", background: "#444" }} />
                </div>
              )}
            </div>

            <div style={styles.kpiGrid}>
              <KPI label="faturamento" value={fmt(hojeAtivo.vendas)} />
              <KPI label="gasto em tráfego" value={fmt(hojeAtivo.gasto)} negative />
              <KPI label="margem hoje" value={hojeAtivo.vendas ? ((lucroHoje/hojeAtivo.vendas)*100).toFixed(1) + "%" : "0%"} />
              <KPI label="contas ativas" value={hojeAtivo.contasAtivas} highlight />
            </div>

             <div style={styles.actionsGrid}>
              <button style={styles.bigAction} onClick={() => openEdit(hoje)}>
                <Edit3 size={20} />
                <div>
                  <div style={styles.bigActionTitle}>atualizar hoje</div>
                  <div style={styles.bigActionSub}>inserir vendas, gastos e contas</div>
                </div>
              </button>
            </div>
            
            <div style={styles.section}>
               <div style={styles.sectionTitle}>resumo rápido do mês</div>
               <div style={styles.list}>
                 <div style={styles.listItem}>
                    <div>
                      <div style={{ fontWeight: 600 }}>Lucro Acumulado</div>
                      <div style={styles.listItemSub}>{fmt(lucroMes)} ({(progressoMeta).toFixed(1)}% da meta)</div>
                    </div>
                 </div>
               </div>
            </div>
          </>
        )}

        {/* ===== META ===== */}
        {tab === "meta" && (
          <>
            <div style={styles.heroCard}>
              <div style={styles.heroLabel}>progresso da meta · {fmt(config.metaLiquida)} líquido</div>
              <div style={styles.heroNum}>
                {progressoMeta.toFixed(1)}<span style={styles.heroUnit}>%</span>
              </div>
              <div style={styles.heroDetail}>
                {fmt(lucroMes)} de lucro · faltam {fmt(Math.max(0, lucroFaltando))}
              </div>
              <div style={styles.heroBar}>
                <div style={{ ...styles.heroBarFill, width: `${Math.min(100, progressoMeta)}%` }} />
              </div>
            </div>

            <div style={styles.kpiGrid}>
              <KPI label="faturamento mês" value={fmt(fatMes)} />
              <KPI label="gasto mês" value={fmt(gastoMes)} negative />
              <KPI label="lucro líquido" value={fmt(lucroMes)} highlight />
              <KPI label="lucro médio/dia" value={fmt(mediaLucroDia)} />
              <KPI label="dias restantes" value={diasRestantes} />
              <KPI label="projeção fim do mês" value={fmt(projecaoMes)} highlight={projecaoMes >= config.metaLiquida} />
            </div>

            <div style={styles.section}>
              <div style={styles.sectionTitle}>caminho até 100k</div>
              <div style={styles.bigGoal}>
                <div style={styles.bigGoalNum}>{((lucroMes / 100000) * 100).toFixed(2)}%</div>
                <div style={styles.bigGoalLabel}>de 100k líquido</div>
                <div style={styles.bigGoalDetail}>
                  no ritmo atual: {mediaLucroDia > 0 ? `~${(100000 / (mediaLucroDia * 30)).toFixed(1)} meses` : '—'} · faltam {fmt(100000 - lucroMes)}
                </div>
              </div>
            </div>
          </>
        )}

        {/* ===== HISTORICO ===== */}
        {tab === "historico" && (
          <>
            <div style={styles.contasHeader}>
              <div>
                <div style={styles.bigNum}>{dias.length}</div>
                <div style={styles.subLabel}>dias registrados</div>
              </div>
              <button style={styles.primaryBtn} onClick={() => openEdit(hoje)}>
                <Plus size={14} /> novo registro
              </button>
            </div>

            <div style={styles.section}>
              <div style={styles.sectionTitle}>histórico de dias</div>
              {dias.length === 0 ? (
                <div style={styles.empty}>nenhum registro. edite os dados de hoje para começar.</div>
              ) : (
                <div style={styles.list}>
                  {dias.map((d) => {
                    const l = d.vendas - d.gasto;
                    return (
                      <div key={d.data} style={{ ...styles.listItem, borderLeft: `3px solid ${l >= 0 ? "#84cc16" : "#ef4444"}` }} onClick={() => openEdit(d.data)} role="button" tabIndex={0}>
                        <div style={{ flex: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                          <div>
                            <div style={{ fontWeight: 600 }}>{parseBRDate(d.data)} {d.data === hoje ? "(hoje)" : ""}</div>
                            <div style={styles.listItemSub}>
                              faturou {fmt(d.vendas)} · gastou {fmt(d.gasto)}
                            </div>
                          </div>
                          <div style={{ textAlign: "right" }}>
                             <div style={{ fontWeight: 700, color: l >= 0 ? "#84cc16" : "#ef4444" }}>{fmt(l)}</div>
                             <div style={styles.listItemSub}>{d.contasAtivas || 0} contas ativas</div>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </>
        )}
      </main>

      {/* MODAIS */}
      {showEditDia && (
        <Modal onClose={() => setShowEditDia(false)} title={`atualizar dia`}>
          <FormDia 
            dia={getDia(editDate)} 
            onSubmit={saveDia} 
            onCancel={() => setShowEditDia(false)} 
          />
        </Modal>
      )}
      {showConfig && (
        <Modal onClose={() => setShowConfig(false)} title="configuração">
          <FormConfig config={config} onSubmit={(c) => { setConfig(c); setShowConfig(false); }} onCancel={() => setShowConfig(false)} />
        </Modal>
      )}
    </div>
  );
}

// ===== COMPONENTES =====
function KPI({ label, value, highlight, negative }) {
  return (
    <div style={styles.kpi}>
      <div style={styles.kpiLabel}>{label}</div>
      <div style={{ ...styles.kpiVal, color: highlight ? "#84cc16" : negative ? "#ef4444" : "#fff" }}>{value}</div>
    </div>
  );
}

function Modal({ children, onClose, title }) {
  return (
    <div style={styles.modalBg} onClick={onClose}>
      <div style={styles.modal} onClick={(e) => e.stopPropagation()}>
        <div style={styles.modalHeader}>
          <div style={styles.modalTitle}>{title}</div>
          <button style={styles.iconBtn} onClick={onClose}><X size={16} /></button>
        </div>
        {children}
      </div>
    </div>
  );
}

function FormDia({ dia, onSubmit, onCancel }) {
  const [dataInput, setDataInput] = useState(dia);
  
  useEffect(() => {
    setDataInput(dia);
  }, [dia]);

  return (
    <div style={styles.form}>
      <label style={styles.label}>data</label>
      <input
        type="date"
        style={styles.input}
        value={dataInput.data}
        onChange={(e) => setDataInput({ ...dataInput, data: e.target.value })}
      />
      <label style={styles.label}>faturamento total (R$)</label>
      <input
        type="number"
        autoFocus
        style={styles.input}
        value={dataInput.vendas === 0 ? "" : dataInput.vendas}
        onChange={(e) => setDataInput({ ...dataInput, vendas: Number(e.target.value) })}
      />
      <label style={styles.label}>gasto com tráfego/contas (R$)</label>
      <input
        type="number"
        style={styles.input}
        value={dataInput.gasto === 0 ? "" : dataInput.gasto}
        onChange={(e) => setDataInput({ ...dataInput, gasto: Number(e.target.value) })}
      />
      <label style={styles.label}>contas ativas simultâneas (qtd)</label>
      <input
        type="number"
        style={styles.input}
        value={dataInput.contasAtivas === 0 ? "" : dataInput.contasAtivas}
        onChange={(e) => setDataInput({ ...dataInput, contasAtivas: Number(e.target.value) })}
      />
      <div style={styles.formActions}>
        <button style={styles.secondaryBtn} onClick={onCancel}>cancelar</button>
        <button style={styles.primaryBtn} onClick={() => onSubmit(dataInput)}>salvar</button>
      </div>
    </div>
  );
}

function FormConfig({ config, onSubmit, onCancel }) {
  const [c, setC] = useState(config);
  return (
    <div style={styles.form}>
      <label style={styles.label}>meta líquida mensal (R$)</label>
      <input type="number" style={styles.input} value={c.metaLiquida} onChange={(e) => setC({ ...c, metaLiquida: Number(e.target.value) })} />
      <div style={styles.formActions}>
        <button style={styles.secondaryBtn} onClick={onCancel}>cancelar</button>
        <button style={styles.primaryBtn} onClick={() => onSubmit(c)}>salvar</button>
      </div>
    </div>
  );
}

// ===== ESTILOS =====
const globalCSS = `
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: #0a0a0a; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  button { cursor: pointer; transition: all 0.15s ease; }
  button:hover:not(:disabled) { transform: translateY(-1px); }
  button:disabled { opacity: 0.4; cursor: not-allowed; }
  input, select { font-family: inherit; }
`;

const styles = {
  app: {
    minHeight: "100vh",
    background: "#0a0a0a",
    color: "#fff",
    fontFamily: "'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace",
    padding: 16,
    maxWidth: 1100,
    margin: "0 auto",
  },
  header: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "flex-start",
    marginBottom: 24,
    paddingBottom: 16,
    borderBottom: "1px solid #1a1a1a",
  },
  brand: {
    fontSize: 22,
    fontWeight: 800,
    letterSpacing: "-0.02em",
    display: "flex",
    alignItems: "center",
    gap: 8,
  },
  brandPulse: {
    width: 8,
    height: 8,
    background: "#84cc16",
    borderRadius: "50%",
    animation: "pulse 2s infinite",
  },
  subbrand: { fontSize: 11, color: "#666", marginTop: 4, textTransform: "lowercase" },
  configBtn: {
    background: "transparent",
    border: "1px solid #2a2a2a",
    color: "#888",
    padding: "6px 12px",
    fontSize: 11,
    fontFamily: "inherit",
    borderRadius: 4,
  },
  tabs: { display: "flex", gap: 4, marginBottom: 24, overflowX: "auto" },
  tab: {
    background: "transparent",
    border: "1px solid #1a1a1a",
    color: "#666",
    padding: "8px 14px",
    fontSize: 12,
    fontFamily: "inherit",
    borderRadius: 4,
    display: "flex",
    alignItems: "center",
    gap: 6,
  },
  tabActive: { background: "#84cc16", borderColor: "#84cc16", color: "#0a0a0a", fontWeight: 700 },
  main: { animation: "slideIn 0.3s ease" },
  heroCard: {
    background: "linear-gradient(135deg, #111 0%, #0f0f0f 100%)",
    border: "1px solid #1f1f1f",
    borderRadius: 12,
    padding: 24,
    marginBottom: 16,
    position: "relative",
    overflow: "hidden",
  },
  heroLabel: { fontSize: 11, color: "#666", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 12 },
  heroNum: { fontSize: 56, fontWeight: 800, letterSpacing: "-0.04em", lineHeight: 1, color: "#fff" },
  heroUnit: { fontSize: 18, color: "#666", marginLeft: 8, fontWeight: 400 },
  heroDetail: { fontSize: 13, color: "#888", marginTop: 8 },
  heroBar: { height: 4, background: "#1a1a1a", borderRadius: 2, marginTop: 16, overflow: "hidden" },
  heroBarFill: { height: "100%", background: "linear-gradient(90deg, #84cc16, #a3e635)", transition: "width 0.5s ease" },
  actionsGrid: { display: "grid", gridTemplateColumns: "1fr", gap: 8, marginBottom: 24 },
  bigAction: {
    background: "#84cc16",
    color: "#0a0a0a",
    border: "none",
    borderRadius: 8,
    padding: 16,
    fontFamily: "inherit",
    display: "flex",
    alignItems: "center",
    gap: 12,
    textAlign: "left",
  },
  bigActionTitle: { fontSize: 13, fontWeight: 700, textTransform: "lowercase" },
  bigActionSub: { fontSize: 11, opacity: 0.7, marginTop: 2 },
  section: {
    background: "#0f0f0f",
    border: "1px solid #1a1a1a",
    borderRadius: 8,
    padding: 16,
    marginBottom: 12,
  },
  sectionTitle: { fontSize: 11, color: "#666", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 12 },
  empty: { color: "#555", fontSize: 12, fontStyle: "italic", padding: "12px 0" },
  list: { display: "flex", flexDirection: "column", gap: 6 },
  listItem: {
    background: "#161616",
    padding: "10px 12px",
    borderRadius: 6,
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 12,
    cursor: "pointer",
    transition: "background 0.1s ease",
  },
  listItemSub: { fontSize: 11, color: "#666", marginTop: 2 },
  iconBtn: {
    background: "transparent",
    border: "none",
    color: "#666",
    padding: 4,
    borderRadius: 4,
    display: "flex",
  },
  kpiGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: 8, marginBottom: 16 },
  kpi: { background: "#0f0f0f", border: "1px solid #1a1a1a", borderRadius: 8, padding: 14 },
  kpiLabel: { fontSize: 10, color: "#666", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6 },
  kpiVal: { fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em" },
  contasHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 16,
    background: "#0f0f0f",
    border: "1px solid #1a1a1a",
    borderRadius: 8,
    padding: 16,
  },
  bigNum: { fontSize: 40, fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1 },
  subLabel: { fontSize: 11, color: "#666", marginTop: 4 },
  primaryBtn: {
    background: "#84cc16",
    color: "#0a0a0a",
    border: "none",
    padding: "8px 14px",
    borderRadius: 6,
    fontWeight: 700,
    fontSize: 12,
    fontFamily: "inherit",
    display: "flex",
    alignItems: "center",
    gap: 6,
  },
  secondaryBtn: {
    background: "transparent",
    border: "1px solid #2a2a2a",
    color: "#888",
    padding: "8px 14px",
    borderRadius: 6,
    fontSize: 12,
    fontFamily: "inherit",
  },
  modalBg: {
    position: "fixed",
    inset: 0,
    background: "rgba(0,0,0,0.7)",
    backdropFilter: "blur(4px)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    zIndex: 100,
    padding: 16,
  },
  modal: {
    background: "#0f0f0f",
    border: "1px solid #2a2a2a",
    borderRadius: 12,
    padding: 20,
    width: "100%",
    maxWidth: 380,
    animation: "slideIn 0.2s ease",
  },
  modalHeader: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 },
  modalTitle: { fontSize: 14, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em" },
  form: { display: "flex", flexDirection: "column", gap: 8 },
  label: { fontSize: 11, color: "#888", textTransform: "lowercase", marginTop: 6 },
  input: {
    background: "#161616",
    border: "1px solid #2a2a2a",
    color: "#fff",
    padding: "10px 12px",
    borderRadius: 6,
    fontSize: 13,
    outline: "none",
  },
  formActions: { display: "flex", gap: 8, marginTop: 12, justifyContent: "flex-end" },
  bigGoal: { textAlign: "center", padding: "20px 0" },
  bigGoalNum: { fontSize: 48, fontWeight: 800, color: "#84cc16", letterSpacing: "-0.03em", lineHeight: 1 },
  bigGoalLabel: { fontSize: 11, color: "#666", textTransform: "uppercase", marginTop: 6, letterSpacing: "0.1em" },
  bigGoalDetail: { fontSize: 12, color: "#888", marginTop: 12 },
};