/* global React */
/* ProTradeJournal — Features screen graphics (part 1)
   Self-contained mini product screens rendered on dark cards. */

const G = {
  green: '#3fce81', greenDim: 'rgba(63,206,129,.16)',
  red: '#f0656b', redDim: 'rgba(240,101,107,.16)',
  blue: '#4d8dff', amber: '#e8b339',
  line: '#283341', lineSoft: '#1b232e',
  ink: '#eef3f9', ink2: '#9aa6b6', ink3: '#66717f',
  panel: '#11161d', elev: '#161c25',
};

// ---- frame ----
function Screen({ label, live, className = '', children }) {
  return (
    <div className={`screen ${className}`}>
      <div className="screen-bar">
        <div className="tl"><i style={{ background: '#ff5f57' }} /><i style={{ background: '#febc2e' }} /><i style={{ background: '#28c840' }} /></div>
        <span className="lbl">{label}</span>
        {live && <span className="live"><span className="pulse" /> {live}</span>}
      </div>
      {children}
    </div>);
}

// ---- smooth area line chart ----
function AreaLine({ pts, w = 320, h = 120, color = G.green, id = 'a' }) {
  const stepX = w / (pts.length - 1);
  const min = Math.min(...pts), max = Math.max(...pts);
  const toY = (v) => h - 8 - ((v - min) / (max - min || 1)) * (h - 20);
  const co = pts.map((v, i) => [i * stepX, toY(v)]);
  const line = co.reduce((a, [x, y], i, arr) => {
    if (!i) return `M ${x} ${y}`;
    const [px, py] = arr[i - 1]; const cx = px + stepX / 2;
    return `${a} C ${cx} ${py}, ${cx} ${y}, ${x} ${y}`;
  }, '');
  const area = `${line} L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: '100%', height: h, display: 'block', overflow: 'visible' }}>
      <defs><linearGradient id={`g${id}`} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor={color} stopOpacity="0.32" /><stop offset="1" stopColor={color} stopOpacity="0" />
      </linearGradient></defs>
      {[0.33, 0.66].map((g) => <line key={g} x1="0" y1={h * g} x2={w} y2={h * g} stroke={G.line} strokeWidth="1" strokeDasharray="3 5" />)}
      <path d={area} fill={`url(#g${id})`} />
      <path d={line} fill="none" stroke={color} strokeWidth="2.4" strokeLinecap="round" />
      <circle cx={co[co.length - 1][0]} cy={co[co.length - 1][1]} r="3.6" fill={color} />
    </svg>);
}

// ---- vertical bars ----
function Bars({ data, w = 320, h = 120, gap = 0.34, labels }) {
  const max = Math.max(...data.map((d) => Math.abs(d.v))) || 1;
  const n = data.length; const bw = w / n; const innerW = bw * (1 - gap);
  return (
    <div>
      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: h, display: 'block' }}>
        {data.map((d, i) => {
          const bh = (Math.abs(d.v) / max) * (h - 8);
          const x = i * bw + (bw - innerW) / 2;
          return <rect key={i} x={x} y={h - bh} width={innerW} height={bh} rx="3" fill={d.c || (d.v >= 0 ? G.green : G.red)} opacity={d.dim ? 0.4 : 1} />;
        })}
      </svg>
      {labels && <div className="g-row" style={{ justifyContent: 'space-between', marginTop: 6 }}>
        {labels.map((l, i) => <span key={i} className="g-num" style={{ fontSize: 9.5, color: G.ink3 }}>{l}</span>)}
      </div>}
    </div>);
}

// ===== 2.1 Dashboard =====
function GfxDashboard() {
  return (
    <Screen label="Dashboard" live="Live · NSE" className="lg">
      <div className="screen-pad">
        <div className="mk-grid">
          <div className="mk"><div className="k">Net P&amp;L</div><div className="v g-pos">₹2.48L</div></div>
          <div className="mk"><div className="k">Win rate</div><div className="v" style={{ color: G.ink }}>68%</div></div>
          <div className="mk"><div className="k">Profit factor</div><div className="v" style={{ color: G.ink }}>2.41</div></div>
        </div>
        <div style={{ marginTop: 13, background: G.elev, border: `1px solid ${G.line}`, borderRadius: 12, padding: '13px 14px' }}>
          <div className="g-row" style={{ justifyContent: 'space-between', marginBottom: 6 }}>
            <span className="g-cap">Equity curve · 6M</span>
            <span className="g-num g-pos" style={{ fontSize: 12, fontWeight: 700 }}>▲ +18.4%</span>
          </div>
          <AreaLine pts={[8, 6, 11, 9, 14, 12, 17, 15, 21, 24]} h={104} id="dash" />
        </div>
      </div>
    </Screen>);
}

// ===== 2.2a Trade log =====
function GfxTradeLog() {
  const rows = [
    ['RELIANCE', 'long', '₹2,948', '+₹14,200', true],
    ['TATAMOTORS', 'long', '₹982', '+₹8,640', true],
    ['HDFCBANK', 'short', '₹1,664', '−₹3,180', false],
    ['INFY', 'long', '₹1,512', '+₹11,050', true],
  ];
  return (
    <Screen label="Trade log">
      <div className="screen-pad tight">
        <table className="mt">
          <thead><tr><th>Symbol</th><th>Side</th><th className="r">Entry</th><th className="r">P&amp;L</th></tr></thead>
          <tbody>{rows.map((r, i) => (
            <tr key={i}>
              <td><span className="g-row" style={{ gap: 8 }}><span className="badge">{r[0].slice(0, 2)}</span><span className="sym">{r[0]}</span></span></td>
              <td><span className={`tag ${r[1]}`}>{r[1]}</span></td>
              <td className="r g-num">{r[2]}</td>
              <td className={`r g-num ${r[4] ? 'g-pos' : 'g-neg'}`} style={{ fontWeight: 700 }}>{r[3]}</td>
            </tr>))}
          </tbody>
        </table>
      </div>
    </Screen>);
}

// ===== 2.2b Open trades =====
function GfxOpenTrades() {
  const rows = [
    ['BAJFINANCE', 'long', '+1.8%', '+₹6,400', true],
    ['SBIN', 'long', '+0.6%', '+₹1,920', true],
    ['ITC', 'short', '−0.9%', '−₹2,100', false],
  ];
  return (
    <Screen label="Open positions" live="Live">
      <div className="screen-pad tight">
        <table className="mt">
          <thead><tr><th>Symbol</th><th className="r">Move</th><th className="r">Unrealised</th></tr></thead>
          <tbody>{rows.map((r, i) => (
            <tr key={i}>
              <td><span className="g-row" style={{ gap: 8 }}><span className="badge">{r[0].slice(0, 2)}</span><span><span className="sym">{r[0]}</span> <span className={`tag ${r[1]}`} style={{ marginLeft: 4 }}>{r[1]}</span></span></span></td>
              <td className={`r g-num ${r[4] ? 'g-pos' : 'g-neg'}`}>{r[2]}</td>
              <td className={`r g-num ${r[4] ? 'g-pos' : 'g-neg'}`} style={{ fontWeight: 700 }}>{r[3]}</td>
            </tr>))}
          </tbody>
        </table>
      </div>
    </Screen>);
}

// ===== 2.2c Missed trades =====
function GfxMissedTrades() {
  const rows = [
    ['DIXON', 'Breakout', '+₹18,200'],
    ['CDSL', 'Pullback', '+₹9,400'],
    ['POLYCAB', 'Flag', '+₹12,600'],
  ];
  return (
    <Screen label="Missed trades">
      <div className="screen-pad tight">
        <table className="mt">
          <thead><tr><th>Symbol</th><th>Setup</th><th className="r">Would-be</th></tr></thead>
          <tbody>{rows.map((r, i) => (
            <tr key={i}>
              <td><span className="g-row" style={{ gap: 8 }}><span className="badge" style={{ color: G.amber }}>{r[0].slice(0, 2)}</span><span className="sym">{r[0]}</span></span></td>
              <td><span className="tag miss">{r[1]}</span></td>
              <td className="r g-num" style={{ color: G.amber, fontWeight: 700 }}>{r[2]}</td>
            </tr>))}
          </tbody>
        </table>
      </div>
    </Screen>);
}

// ===== 2.2d Calendar view =====
function GfxCalendar() {
  const data = [
    1, 1, -1, 2, 1,
    2, -1, 1, 1, 2,
    1, 2, 2, -1, 1,
    -1, 1, 2, 2, 1,
    1, 2, 1, -1, 2,
  ];
  const color = (v) => v === 2 ? G.green : v === 1 ? G.greenDim : v === -1 ? G.redDim : G.elev;
  return (
    <Screen label="P&L calendar">
      <div className="screen-pad">
        <div className="g-row" style={{ justifyContent: 'space-between', marginBottom: 9 }}>
          <span className="g-cap">May 2026</span>
          <span className="g-num g-pos" style={{ fontSize: 12, fontWeight: 700 }}>+₹1,84,300</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 6 }}>
          {['M', 'T', 'W', 'T', 'F'].map((d, i) => <div key={i} style={{ textAlign: 'center', fontSize: 9.5, fontWeight: 700, color: G.ink3 }}>{d}</div>)}
          {data.map((v, i) => (
            <div key={i} style={{ aspectRatio: '1', borderRadius: 7, background: color(v), border: `1px solid ${G.line}`, display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, color: v === 2 ? '#04120a' : v === -1 ? G.red : G.ink3, fontFamily: 'var(--mono)' }}>{i + 1}</div>
          ))}
        </div>
      </div>
    </Screen>);
}

// ===== 2.2e Equity curve =====
function GfxEquityCurve() {
  return (
    <Screen label="Equity curve">
      <div className="screen-pad">
        <div className="g-row" style={{ justifyContent: 'space-between', marginBottom: 8 }}>
          <div><div className="g-cap">Cumulative P&amp;L</div><div className="g-num" style={{ fontSize: 19, fontWeight: 700, color: G.ink, marginTop: 4 }}>₹8,24,650</div></div>
          <span className="g-num g-pos" style={{ fontSize: 12, fontWeight: 700 }}>Peak ↑</span>
        </div>
        <AreaLine pts={[5, 4, 7, 6, 9, 8, 7, 11, 10, 14, 13, 17, 16, 20]} h={108} id="eq" />
      </div>
    </Screen>);
}

// ===== 2.2f Import / API =====
function GfxImport() {
  return (
    <Screen label="Import trades">
      <div className="screen-pad">
        <div style={{ border: `1.5px dashed ${G.line}`, borderRadius: 12, padding: '18px 14px', textAlign: 'center', background: G.elev }}>
          <div style={{ width: 34, height: 34, margin: '0 auto', borderRadius: 9, background: G.greenDim, color: G.green, display: 'grid', placeItems: 'center' }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3.5v10m0 0 3.5-3.5M12 13.5 8.5 10" /><path d="M5 16v2.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V16" /></svg>
          </div>
          <div style={{ fontSize: 12.5, fontWeight: 700, marginTop: 8, color: G.ink }}>Drop tradebook CSV / XLSX</div>
          <div style={{ fontSize: 11, color: G.ink3, marginTop: 3 }}>or connect your broker API</div>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 12 }}>
          {[['Zerodha', true], ['Upstox', true], ['Dhan', false], ['Fyers', false]].map((b, i) => (
            <span key={i} style={{ fontSize: 11, fontWeight: 700, padding: '5px 10px', borderRadius: 999, border: `1px solid ${b[1] ? G.green : G.line}`, color: b[1] ? G.green : G.ink2, background: b[1] ? G.greenDim : 'transparent', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
              {b[1] && <span style={{ width: 6, height: 6, borderRadius: 9, background: G.green }} />}{b[0]}
            </span>))}
        </div>
      </div>
    </Screen>);
}

Object.assign(window, { Screen, AreaLine, Bars, GFX_PAL: G,
  GfxDashboard, GfxTradeLog, GfxOpenTrades, GfxMissedTrades, GfxCalendar, GfxEquityCurve, GfxImport });