/* ===== Dashboard view ===== */
const Dd = window.DATA;

function BrandHeader({ org }) {
  return (
    <div className="brand-header">
      <div className="brand-cover ph">
        <span className="ph-label">{Dd.businessTypes[org.type].img}</span>
      </div>
      <div className="brand-body">
        <div className="brand-logo-badge">
          <img src="assets/bull.png" alt="" className="brand-on-light" style={{ width: 50, height: 50, objectFit: "contain" }}/>
        </div>
        <div style={{ flex:1, paddingBottom:2 }}>
          <div style={{ display:"flex", alignItems:"center", gap:10 }}>
            <span style={{ fontSize:20, fontWeight:600, letterSpacing:"-0.02em" }}>{org.name}</span>
            <Badge kind="pos">{org.typeLabel}</Badge>
          </div>
          <div style={{ fontSize:13, color:"var(--text-3)", marginTop:3 }}>{org.location} · {org.currency} · Books up to date as of today</div>
        </div>
        <button className="btn" style={{ marginBottom:2 }}><Icon name="edit" size={15}/> Edit brand</button>
      </div>
    </div>
  );
}

function KpiCard({ k, color, idx }) {
  const [open, setOpen] = useState(false);
  const hi = Math.max(...k.spark), lo = Math.min(...k.spark);
  return (
    <Card className="lift card-resize expandable" style={{ outline: open?"1.5px solid var(--accent)":"none" }}
      onClick={() => setOpen(o => !o)}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start" }}>
        <div className="kpi-label">{k.label}</div>
        <Spark data={k.spark} color={color}/>
      </div>
      <div className="kpi-value num-pop" style={{ "--stagger": (idx*0.09)+"s" }}><AnimatedNumber value={k.value} format={Dd.eur}/></div>
      <Delta v={k.delta} suffix="vs last month"/>
      <div className={"expand-grid " + (open?"open":"")}>
        <div className="expand-inner">
          <div className="divider"></div>
          <div style={{ display:"flex", justifyContent:"space-between", fontSize:12.5, color:"var(--text-2)" }}>
            <span>12-mo range</span>
            <span className="mono">{Dd.eur0(lo*1000)} – {Dd.eur0(hi*1000)}</span>
          </div>
          <div style={{ display:"flex", alignItems:"center", gap:6, marginTop:8, fontSize:12.5, color:"var(--accent-ink)", fontWeight:600 }}>
            View related transactions <Icon name="arrowUpRight" size={13}/>
          </div>
        </div>
      </div>
    </Card>
  );
}

function Dashboard({ org, openAssistant, openReceipt, goTo }) {
  const recent = Dd.txns.slice(0, 5);
  const pending = Dd.receipts.filter(r => r.status === "review" || r.status === "extracted").slice(0, 3);
  const upcoming = Dd.payments.slice(0, 4);
  return (
    <div className="view content-inner">
      <BrandHeader org={org}/>

      {/* AI insight strip */}
      <div className="card" style={{ marginTop:"var(--gap)", display:"flex", alignItems:"center", gap:16,
        background:"linear-gradient(100deg, var(--navy), var(--navy-700))", border:"none", color:"#fff" }}>
        <div className="asst-orb" style={{ width:42, height:42 }}>
          <img className="brand-on-dark" src="assets/bull.png" alt="" style={{ width:28, height:28, objectFit:"contain" }}/>
        </div>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:11, letterSpacing:".06em", textTransform:"uppercase", color:"var(--on-navy-2)", fontWeight:600 }}>ContaBilè insight</div>
          <div style={{ fontSize:14.5, marginTop:3, lineHeight:1.5 }}>
            Food costs are <b>up 8% this month</b> — mostly fish & wine. You're still net positive <b>€14,730</b>, and 2 receipts need your review.
          </div>
        </div>
        <button className="btn" style={{ background:"rgba(255,255,255,.12)", color:"#fff", border:"1px solid rgba(255,255,255,.18)" }} onClick={openAssistant}>
          Review with assistant <Icon name="arrowUpRight" size={15}/>
        </button>
      </div>

      {/* KPIs */}
      <div className="grid" style={{ gridTemplateColumns:"repeat(4, 1fr)", marginTop:"var(--gap)" }}>
        <KpiCard k={Dd.kpis.cash} color="var(--chart-1)" idx={0}/>
        <KpiCard k={Dd.kpis.income} color="var(--chart-2)" idx={1}/>
        <KpiCard k={Dd.kpis.expense} color="var(--chart-3)" idx={2}/>
        <KpiCard k={Dd.kpis.net} color="var(--pos)" idx={3}/>
      </div>

      {/* Charts row */}
      <div className="grid" style={{ gridTemplateColumns:"1.6fr 1fr", marginTop:"var(--gap)" }}>
        <Card title="Cash flow" sub="Income vs. expenses · last 12 months"
          action={<div className="seg"><button className="on">12M</button><button>6M</button><button>30D</button></div>}>
          <div style={{ display:"flex", gap:18, marginBottom:10, fontSize:12.5 }}>
            <span style={{ display:"flex", alignItems:"center", gap:6, color:"var(--text-2)" }}>
              <span style={{ width:14, height:3, borderRadius:2, background:"var(--accent)" }}></span>Income</span>
            <span style={{ display:"flex", alignItems:"center", gap:6, color:"var(--text-2)" }}>
              <span style={{ width:14, height:3, borderRadius:2, background:"var(--text-3)", opacity:.7 }}></span>Expenses</span>
          </div>
          <CashFlowChart data={Dd.cashflow} eur0={Dd.eur0}/>
        </Card>
        <Card title="Where money went" sub="Expenses this month">
          <DonutChart data={Dd.expenseCats} eur0={Dd.eur0}/>
        </Card>
      </div>

      {/* Lists row */}
      <div className="grid" style={{ gridTemplateColumns:"1fr 1fr", marginTop:"var(--gap)" }}>
        <Card title="Recent transactions" action={<button className="btn" onClick={() => goTo("transactions")}>View all</button>}>
          {recent.map(t => (
            <div className="row" key={t.id}>
              <div className="rico"><Icon name={t.amount>0 ? "arrowDownRight" : "cart"} size={17}/></div>
              <div className="r-main">
                <div className="r-title">{t.vendor}</div>
                <div className="r-sub">{t.date} · {t.cat}</div>
              </div>
              <div className={"r-amt mono " + (t.amount>0?"pos":"")}>{t.amount>0?"+":""}{Dd.eur(t.amount)}</div>
            </div>
          ))}
        </Card>
        <div className="grid" style={{ gridTemplateRows:"auto auto", gap:"var(--gap)" }}>
          <Card title="Needs review" sub={pending.length + " receipts"}
            action={<button className="btn" onClick={() => goTo("receipts")}>Inbox</button>}>
            {pending.map(r => (
              <div className="row" key={r.id} style={{ cursor:"pointer" }} onClick={() => openReceipt(r.id)}>
                <div className="rico"><Icon name="receipt" size={17}/></div>
                <div className="r-main">
                  <div className="r-title">{r.vendor}</div>
                  <div className="r-sub">{r.source} · {r.date.replace(", 2026","")}</div>
                </div>
                <div style={{ textAlign:"right" }}>
                  <div className="r-amt mono">{Dd.eur(r.total)}</div>
                  <div style={{ marginTop:3 }}><StatusBadge status={r.status}/></div>
                </div>
              </div>
            ))}
          </Card>
          <Card title="Upcoming payments" action={<button className="btn" onClick={() => goTo("payments")}>All</button>}>
            {upcoming.map(p => (
              <div className="row" key={p.id}>
                <div className="rico"><Icon name={p.recurring ? "clock" : "payments"} size={16}/></div>
                <div className="r-main">
                  <div className="r-title">{p.payee}</div>
                  <div className="r-sub">Due {p.due} · {p.method}</div>
                </div>
                <div style={{ textAlign:"right" }}>
                  <div className="r-amt mono">{Dd.eur(p.amount)}</div>
                  {p.status==="needs-approval" && <div style={{ marginTop:3 }}><StatusBadge status={p.status}/></div>}
                </div>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;