const { useState: useStateO } = React;

const Sparkline = ({ data, w = 84, h = 24 }) => {
  const max = Math.max(...data), min = Math.min(...data);
  const span = max - min || 1;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / span) * (h - 2) - 1;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');
  return (
    <svg className="kpi-spark" viewBox={`0 0 ${w} ${h}`}>
      <polyline points={pts} fill="none" stroke="var(--maroon)" strokeWidth="1.25" />
    </svg>
  );
};

const KpiRow = () => (
  <div className="kpi-row">
    {window.__data.kpis.map((k, i) => (
      <div className="kpi" key={i}>
        <div className="kpi-label">
          <span>{k.label}</span>
          <Sparkline data={k.spark} />
        </div>
        <div className="kpi-value">
          <em>{k.value}</em><span className="unit">{k.unit}</span>
        </div>
        <div className="kpi-foot">
          <span className={`kpi-delta ${k.deltaDir}`}>
            <Icon name={k.deltaDir === 'pos' ? 'arrowUp' : 'arrowDown'} size={10} />
            {k.delta}
          </span>
          <span>{k.context}</span>
        </div>
      </div>
    ))}
  </div>
);

const RevenueChart = () => {
  const { labels, actual, target } = window.__data.revenue;
  const w = 620, h = 260, pad = { l: 40, r: 16, t: 24, b: 32 };
  const max = Math.max(...actual, ...target) * 1.1;
  const xStep = (w - pad.l - pad.r) / (labels.length - 1);
  const yScale = v => h - pad.b - (v / max) * (h - pad.t - pad.b);
  const linePts = arr => arr.map((v, i) => `${pad.l + i * xStep},${yScale(v)}`).join(' ');
  const areaPath = (arr) => {
    const pts = arr.map((v, i) => `${pad.l + i * xStep},${yScale(v)}`);
    return `M ${pad.l},${yScale(0)} L ${pts.join(' L ')} L ${pad.l + (arr.length - 1) * xStep},${yScale(0)} Z`;
  };
  const yTicks = [0, max * 0.25, max * 0.5, max * 0.75, max].map(v => Math.round(v));

  return (
    <div className="card">
      <div className="card-head">
        <div>
          <div className="sub">{window.__t('ov.revenue.sub')}</div>
          <h3>QAR <em>508M</em> {window.__t('ov.revenue.tag')} · <em>+22.4%</em> {window.__t('ov.revenue.yoy')}</h3>
        </div>
        <div className="pill-tabs">
          <button>7D</button>
          <button>30D</button>
          <button className="active">12M</button>
          <button>YTD</button>
        </div>
      </div>
      <div style={{ padding: 22 }}>
        <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ maxWidth: '100%' }}>
          <defs>
            <linearGradient id="areaFill" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="var(--maroon)" stopOpacity="0.16" />
              <stop offset="100%" stopColor="var(--maroon)" stopOpacity="0" />
            </linearGradient>
          </defs>
          {yTicks.map((t, i) => (
            <g key={i}>
              <line x1={pad.l} x2={w - pad.r} y1={yScale(t)} y2={yScale(t)} stroke="var(--line)" strokeDasharray={i === 0 ? '' : '2 4'} />
              <text x={pad.l - 8} y={yScale(t) + 3} textAnchor="end" fill="var(--fg-3)" fontSize="9.5" fontFamily="var(--mono)">{t}M</text>
            </g>
          ))}
          {labels.map((l, i) => (
            <text key={l} x={pad.l + i * xStep} y={h - 12} textAnchor="middle" fill="var(--fg-3)" fontSize="9.5" fontFamily="var(--mono)" letterSpacing="0.1em">{l}</text>
          ))}
          <path d={areaPath(actual)} fill="url(#areaFill)" />
          <polyline points={linePts(target)} fill="none" stroke="var(--fg-3)" strokeWidth="1.25" strokeDasharray="3 3" />
          <polyline points={linePts(actual)} fill="none" stroke="var(--maroon)" strokeWidth="1.75" />
          {actual.map((v, i) => (
            <circle key={i} cx={pad.l + i * xStep} cy={yScale(v)} r="2.5" fill="var(--bg-elev)" stroke="var(--maroon)" strokeWidth="1.25" />
          ))}
        </svg>
        <div style={{ display: 'flex', gap: 20, marginTop: 14, fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
          <span><span style={{ display: 'inline-block', width: 12, height: 2, background: 'var(--maroon)', marginRight: 7, verticalAlign: 'middle' }} />{window.__t('ov.revenue.actual')}</span>
          <span><span style={{ display: 'inline-block', width: 12, height: 2, background: 'var(--fg-3)', marginRight: 7, verticalAlign: 'middle' }} />{window.__t('ov.revenue.target')}</span>
        </div>
      </div>
    </div>
  );
};

const MapCard = () => {
  const pins = window.__data.pins;
  const [active, setActive] = useStateO(pins[6]);
  return (
    <div className="card map-card">
      <div className="card-head">
        <div>
          <div className="sub">{window.__data.mapLabels.activePortfolio} · 186 {window.__data.mapLabels.listings} · {window.__data.mapLabels.doha}</div>
          <h3>{window.__t('ov.map.title')} <em>{window.__t('ov.map.titleEm')}</em> · {window.__data.mapLabels.state}</h3>
        </div>
        <div className="pill-tabs">
          <button className="active">{window.__data.mapLabels.all}</button>
          <button>{window.__data.mapLabels.active}</button>
          <button>{window.__data.mapLabels.pending}</button>
          <button>{window.__data.mapLabels.sold}</button>
        </div>
      </div>
      <div className="map-canvas">
        <LiveMap pins={pins} active={active} onSelectPin={setActive} />
        <div className="map-overlay">
          <div className="title">State of Qatar · Doha Metro</div>
          <div>25.345° N · 51.510° E</div>
          <div>Zoom 11 · 5 km</div>
        </div>
        <div className="map-legend-bar">
          <span className="item"><span className="sq gold" /> Luxury QAR 15M+</span>
          <span className="item"><span className="sq" /> Premium QAR 5–15M</span>
          <span className="item"><span className="sq out" /> Standard &lt; QAR 5M</span>
          <span style={{ marginLeft: 'auto' }}>{pins.length} visible of 186</span>
        </div>
      </div>
      {active && (
        <div className="prop-detail">
          <div className="img" aria-hidden="true" />
          <div>
            <div className="addr">{active.addr}</div>
            <div className="sub">{active.beds} BR · {active.baths} BA · {active.sqft.toLocaleString()} SQFT</div>
            <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
              <span className={`tag ${active.status === 'active' ? 'pos' : 'maroon'}`}>{active.status}</span>
              {active.luxury && <span className="tag gold">Luxury</span>}
              <span className="tag">MLS Q24-{active.id.toString().padStart(4, '0')}</span>
            </div>
          </div>
          <div>
            <div className="price">QAR {active.price}M</div>
            <div className="price-sub">list price</div>
          </div>
        </div>
      )}
    </div>
  );
};

const ActivityFeed = () => (
  <div className="card">
    <div className="card-head">
      <div>
        <div className="sub">{window.__data.activityLabels.last48}</div>
        <h3><em>{window.__data.activityLabels.activity}</em></h3>
      </div>
      <button className="btn ghost">{window.__data.activityLabels.viewAll}</button>
    </div>
    <div className="card-body flush">
      <div className="activity">
        {window.__data.activity.map((a, i) => (
          <div className="activity-item" key={i}>
            <div className="activity-time">{a.time}</div>
            <div className="activity-body">
              <span className="who">{a.who}</span>{' '}
              <span className="what">{a.what}</span>{' '}
              <span className="target">{a.target}</span>
            </div>
            <div className="activity-amt">{a.amt}</div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const PipelineBreakdown = () => {
  const stages = [
    { name: 'New Inquiries', count: 3, val: 59.5, pct: 8 },
    { name: 'Contacted', count: 3, val: 103.8, pct: 8 },
    { name: 'Qualified', count: 2, val: 136.0, pct: 8 },
    { name: 'Viewing', count: 2, val: 24.8, pct: 6 },
    { name: 'Offer / Contract', count: 2, val: 40.7, pct: 5 },
  ];
  const max = Math.max(...stages.map(s => s.val));
  return (
    <div className="card">
      <div className="card-head">
        <div>
          <div className="sub">Live · updated 2 min ago</div>
          <h3>Pipeline by <em>stage</em></h3>
        </div>
        <span className="tag maroon">12 active</span>
      </div>
      <div className="card-body flush">
        {stages.map((s, i) => (
          <div key={s.name} className="pipe-row">
            <div className="top">
              <div className="n">{s.name}</div>
              <div className="val">{s.count} deals · <b>QAR {s.val}M</b></div>
            </div>
            <div className="bar">
              <div className="fill" style={{ width: `${(s.val / max) * 100}%`, background: i === stages.length - 1 ? 'var(--maroon)' : 'var(--fg)' }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Overview = () => (
  <div className="content view">
    <KpiRow />
    <div className="grid cols-3" style={{ marginBottom: 22 }}>
      <MapCard />
      <ActivityFeed />
    </div>
    <div className="grid cols-2">
      <RevenueChart />
      <PipelineBreakdown />
    </div>
  </div>
);

window.Overview = Overview;