// Feature block snippets E-H.

// === Block E — Upcoming Orders agenda ============================
function SnippetUpcoming() {
  return (
    <div className="card1 overflow-hidden">
      <div className="flex items-center justify-between px-4 py-3 border-b border-border1">
        <div className="flex items-center gap-2">
          <span className="text-[11px] font-semibold uppercase tracking-wider text-subtlefg">Upcoming Orders</span>
          <Badge tone="info" className="!normal-case !tracking-normal !text-[10px]">3 days · 10 orders</Badge>
        </div>
        <div className="flex items-center gap-1.5">
          <button className="btn-secondary inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10.5px]">
            <IcoCalendar size={11} /> Today
          </button>
          <button className="btn-secondary inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10.5px]">
            History
          </button>
        </div>
      </div>
      <div className="divide-y divide-border2">
        {UPCOMING.map(day => (
          <div key={day.date}>
            <div className="px-4 py-2 bg-card2/40 flex items-center justify-between">
              <span className="font-mono text-[11px] font-semibold tracking-wider text-mutedfg">{day.date}</span>
              <span className="text-[10px] text-subtlefg">{day.orders.length} orders · pre-market</span>
            </div>
            {day.orders.map((o, i) => (
              <div key={i} className="px-4 py-2 flex items-center gap-3 hover:bg-card2/60">
                <span className="h-1.5 w-1.5 rounded-full" style={{ background: `hsl(${STRATEGIES.find(s => o.strategy.includes(s.name.split(" ")[0]))?.color || "262 83% 67%"})`}} />
                <div className="w-[140px] truncate text-[11.5px] text-mutedfg">{o.strategy}</div>
                <div className="font-mono text-[12px] font-semibold w-[60px]">{o.sym}</div>
                <SideBadge side={o.side} />
                <div className="font-mono text-[11.5px] tabular-nums text-mutedfg w-[60px] text-right">{o.qty}</div>
                <div className="flex-1" />
                <Badge tone={o.status === "Sent" ? "warn" : "ghost"}>{o.status}</Badge>
              </div>
            ))}
          </div>
        ))}
      </div>
      <div className="px-4 py-2 border-t border-border1 flex items-center justify-between text-[10.5px] text-subtlefg">
        <span className="inline-flex items-center gap-1.5"><span className="live-dot" />DashFolioSync · last 38s ago</span>
        <span>RealTest signals · loaded 2026-05-18 06:02</span>
      </div>
    </div>
  );
}

// === Block F — Dividends with strategy attribution ==============
function SnippetDividends() {
  const total = DIVIDENDS.reduce((a, d) => a + d.grossUsd, 0);
  return (
    <div className="card1 overflow-hidden">
      <div className="flex items-center justify-between px-4 py-3 border-b border-border1">
        <span className="text-[11px] font-semibold uppercase tracking-wider text-subtlefg">Dividends · Strategy Attribution</span>
        <Badge tone="primary" className="!normal-case !tracking-normal !text-[10px]">Last 30 days</Badge>
      </div>
      <table className="df w-full text-[12px]">
        <thead>
          <tr>
            <th>Ex-Date</th>
            <th>Symbol</th>
            <th className="text-right">Gross</th>
            <th>Allocated to</th>
            <th className="text-right">Currency</th>
          </tr>
        </thead>
        <tbody>
          {DIVIDENDS.map((d, i) => (
            <tr key={i}>
              <td className="font-mono text-mutedfg text-[11px] whitespace-nowrap">{d.exDate}</td>
              <td className="font-mono font-semibold">{d.sym}</td>
              <td className="text-right font-mono tabular-nums text-positive">+${d.grossUsd.toFixed(2)}</td>
              <td>
                <div className="flex items-center gap-1 flex-wrap">
                  {d.allocations.map((a, j) => (
                    <span key={j} className="inline-flex items-center gap-1 rounded border border-border1 bg-card2/60 px-1.5 py-0.5 text-[10px]">
                      <span className="h-1.5 w-1.5 rounded-full" style={{background: `hsl(${STRATEGIES.find(s => s.name === a.strat || s.name.startsWith(a.strat))?.color || "262 83% 67%"})`}} />
                      <span className="text-mutedfg">{a.strat}</span>
                      <span className="font-mono text-subtlefg">{a.pct}%</span>
                    </span>
                  ))}
                </div>
              </td>
              <td className="text-right font-mono text-[10.5px] text-subtlefg">{d.ccy || "USD"}</td>
            </tr>
          ))}
        </tbody>
        <tfoot>
          <tr className="bg-card2/60">
            <td colSpan="2" className="font-semibold uppercase tracking-wider text-subtlefg text-[10px]">Total allocated</td>
            <td className="text-right font-mono font-semibold text-positive">+${total.toFixed(2)}</td>
            <td colSpan="2" className="text-right text-subtlefg font-mono text-[10.5px]">USD base · FX-converted from CAD via IBKR cash report</td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
}

// === Block G — Open Positions table ============================
function SnippetOpenPositions() {
  const [hovered, setHovered] = React.useState(2);
  return (
    <div className="card1 overflow-hidden">
      <div className="flex items-center justify-between px-4 py-3 border-b border-border1">
        <div className="flex items-center gap-2">
          <span className="text-[11px] font-semibold uppercase tracking-wider text-subtlefg">Open Positions</span>
          <Badge tone="primary" className="!normal-case !tracking-normal !text-[10px]">{OPEN_POS.length} live</Badge>
        </div>
        <div className="flex items-center gap-1.5">
          <button className="btn-secondary inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10.5px]"><IcoFilter size={11} />Filter</button>
          <button className="btn-secondary inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10.5px]"><IcoDownload size={11} />Export</button>
        </div>
      </div>
      <table className="df w-full text-[12px]">
        <thead>
          <tr>
            <th>Symbol</th>
            <th>Strategy</th>
            <th className="text-right">Qty</th>
            <th className="text-right">Avg Cost</th>
            <th className="text-right">Market</th>
            <th className="text-right">Unrealized</th>
            <th className="text-right">%</th>
            <th className="text-right">Days</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {OPEN_POS.map((p, i) => {
            const pnl = (p.mkt - p.avg) * p.qty;
            const pct = ((p.mkt - p.avg) / p.avg) * 100;
            return (
              <tr key={p.sym} onMouseEnter={() => setHovered(i)}>
                <td>
                  <div className="font-mono font-semibold">{p.sym}</div>
                  <div className="text-[9.5px] text-subtlefg font-mono">{p.ccy}</div>
                </td>
                <td>
                  <div className="flex items-center gap-1.5 text-[11px] text-mutedfg">
                    <span className="h-1.5 w-1.5 rounded-full" style={{background: `hsl(${STRATEGIES.find(s => s.name === p.strat)?.color || "262 83% 67%"})`}} />
                    {p.strat}
                  </div>
                </td>
                <td className="text-right font-mono tabular-nums">{p.qty}</td>
                <td className="text-right font-mono tabular-nums text-mutedfg">${p.avg.toFixed(2)}</td>
                <td className="text-right font-mono tabular-nums">${p.mkt.toFixed(2)}</td>
                <td className="text-right"><Signed value={pnl} /></td>
                <td className={`text-right font-mono tabular-nums ${pct >= 0 ? "text-positive" : "text-negative"}`}>{pct >= 0 ? "+" : ""}{pct.toFixed(2)}%</td>
                <td className="text-right font-mono tabular-nums text-mutedfg text-[11px]">{p.days}d</td>
                <td className="w-[40px]">
                  {hovered === i && (
                    <button className="btn-secondary !text-[10px] rounded px-1.5 py-0.5">Edit</button>
                  )}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
      <div className="px-4 py-2 border-t border-border1 flex items-center justify-between text-[10.5px] text-subtlefg">
        <span className="inline-flex items-center gap-1.5">
          <span className="live-dot" />EODHD marks · last 5 min ago · fallback Yahoo
        </span>
        <span className="font-mono">Σ unrealized · <span className="text-positive">+$9,840.30</span></span>
      </div>
    </div>
  );
}

// === Block H — Manual + CSV import side by side ================
function SnippetManualCsv() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div className="card1 overflow-hidden">
        <div className="flex items-center justify-between px-4 py-3 border-b border-border1">
          <span className="text-[11px] font-semibold uppercase tracking-wider text-subtlefg">Manual Entries</span>
          <button className="btn-secondary inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10.5px]"><IcoPlus size={11} />New trade</button>
        </div>
        <div className="divide-y divide-border2">
          {MANUAL_ENTRIES.map((m, i) => (
            <div key={i} className="px-4 py-2 flex items-center gap-3">
              <div className="font-mono text-[10.5px] text-mutedfg w-[50px]">{m.date}</div>
              <div className="font-mono font-semibold w-[56px]">{m.sym}</div>
              <SideBadge side={m.side} />
              <div className="font-mono text-[11px] tabular-nums w-[80px] text-right text-mutedfg">{m.qty} @ ${m.price}</div>
              <div className="flex-1 truncate text-[11px] text-subtlefg">{m.strat}</div>
              {m.note && <span className="text-[10px] text-subtlefg italic">{m.note}</span>}
            </div>
          ))}
        </div>
        <div className="px-4 py-2 border-t border-border1 text-[10.5px] text-subtlefg flex items-center justify-between">
          <span>3 entries · FIFO-matched into 1 round-trip</span>
          <span className="font-mono text-positive">+$280.00 realized</span>
        </div>
      </div>

      <div className="card1 overflow-hidden">
        <div className="flex items-center justify-between px-4 py-3 border-b border-border1">
          <span className="text-[11px] font-semibold uppercase tracking-wider text-subtlefg">CSV Import · 2026-trades.csv</span>
          <Badge tone="warn">1 conflict</Badge>
        </div>
        <div className="p-4 space-y-3">
          <div className="rounded-md border border-dashed border-border1 bg-card2/40 px-4 py-5 flex flex-col items-center text-center">
            <IcoUpload size={20} className="text-subtlefg" />
            <div className="mt-2 text-[11px] font-medium">Drop CSV or XML</div>
            <div className="text-[10px] text-subtlefg">or click to browse · multi-file supported</div>
          </div>
          <div className="grid grid-cols-3 gap-2 text-center">
            <div className="card2 px-2 py-2"><div className="font-mono text-base font-semibold text-positive">412</div><div className="text-[9.5px] text-subtlefg uppercase tracking-wider">Imported</div></div>
            <div className="card2 px-2 py-2"><div className="font-mono text-base font-semibold text-mutedfg">38</div><div className="text-[9.5px] text-subtlefg uppercase tracking-wider">Dedup'd</div></div>
            <div className="card2 px-2 py-2"><div className="font-mono text-base font-semibold text-warn">1</div><div className="text-[9.5px] text-subtlefg uppercase tracking-wider">Rejected</div></div>
          </div>
          <div className="rounded-md border border-warn/35 bg-warn/10 p-3">
            <div className="flex items-start gap-2">
              <IcoAlert size={14} className="text-warn mt-0.5 shrink-0" />
              <div className="text-[11px]">
                <div className="font-semibold text-warn">Overlap detected · AAPL 2026-05-12</div>
                <div className="text-mutedfg mt-0.5">CSV row conflicts with OrderClerk fill of the same execution. OrderClerk wins. <a href="#" className="text-primary underline-offset-2 hover:underline">Review</a> · <a href="#" className="text-mutedfg hover:text-fg">Restore CSV</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SnippetUpcoming, SnippetDividends, SnippetOpenPositions, SnippetManualCsv });
