/* PlatformUI — ported from buildflow-precision/src/components/PlatformUI.tsx
   Adapted for vanilla React + Tailwind CDN (no framer-motion).
   CSS animations for chart draw + pulse handled via classes in index-light.html.
*/

function PlatformUI({ compact = false }) {
  return (
    <div
      className={`relative w-full mx-auto`}
      style={{ maxWidth: compact ? '680px' : '1100px' }}
    >
      {/* outer chrome */}
      <div
        className="relative overflow-hidden"
        style={{
          borderRadius: '6px',
          border: '1px solid var(--c-line2)',
          background: '#ffffff',
          boxShadow:
            '0 60px 120px -30px rgba(14,12,8,0.22), 0 30px 60px -20px rgba(14,12,8,0.14), 0 4px 16px rgba(14,12,8,0.06)',
        }}
      >
        {/* top bar */}
        <div
          className="flex items-center justify-between px-5 py-3"
          style={{ borderBottom: '1px solid var(--c-line)' }}
        >
          <div className="flex items-center gap-2">
            <div
              className="rounded-full bg-steel"
              style={{ height: '8px', width: '8px' }}
            />
            <span className="label-bp">Pentabeam / Project 042 — Marina Tower</span>
          </div>
          <div className="hidden md:flex items-center gap-6 label-bp">
            <span>BoQ</span>
            <span>Subcheck</span>
            <span>CTC</span>
            <span className="text-paper">Overview</span>
          </div>
        </div>

        {/* body grid */}
        <div
          className="grid"
          style={{
            gridTemplateColumns: 'repeat(12, 1fr)',
            gap: '1px',
            background: 'var(--c-line)',
          }}
        >
          {/* left: KPIs + chart */}
          <div
            className="p-6 md:p-8"
            style={{ gridColumn: 'span 8', background: '#ffffff' }}
          >
            <div className="flex items-end justify-between mb-8">
              <div>
                <div className="label-bp mb-3">Cost To Complete</div>
                <div
                  className="font-medium tracking-tight text-paper tabular"
                  style={{ fontSize: 'clamp(28px, 3.5vw, 48px)' }}
                >
                  $24,318,402
                </div>
                <div className="mt-2 text-fog" style={{ fontSize: '14px' }}>
                  Forecast variance{' '}
                  <span className="text-amber">−2.1%</span> vs baseline
                </div>
              </div>
              <div className="hidden sm:flex flex-col items-end gap-1">
                <div className="label-bp">Confidence</div>
                <div className="font-medium text-paper" style={{ fontSize: '24px' }}>
                  98.4<span className="text-fog" style={{ fontSize: '16px' }}>%</span>
                </div>
              </div>
            </div>

            {/* chart */}
            <PlatformChart />

            {/* metric strip */}
            <div
              className="grid mt-8"
              style={{ gridTemplateColumns: 'repeat(3,1fr)', gap: '1px', background: 'var(--c-line)' }}
            >
              {[
                { l: 'BoQ Items',          v: '4,812' },
                { l: 'Invoices Verified',  v: '1,209' },
                { l: 'Change Orders',      v: '37'    },
              ].map((m) => (
                <div key={m.l} className="p-4" style={{ background: '#ffffff' }}>
                  <div className="label-bp mb-2">{m.l}</div>
                  <div className="font-medium text-paper tabular" style={{ fontSize: '20px' }}>{m.v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* right: activity feed */}
          <div
            className="p-6 md:p-7"
            style={{ gridColumn: 'span 4', background: 'var(--c-ink2)' }}
          >
            <div className="label-bp mb-5">Activity</div>
            <div className="flex flex-col gap-5">
              {[
                { t: 'Subcheck flagged 3 invoice anomalies', s: '2m ago',    hi: true  },
                { t: 'BoQ regenerated — Block C, L4',        s: '14m ago'              },
                { t: 'Email change detected: spec revision', s: '1h ago',    hi: true  },
                { t: 'CTC forecast updated',                 s: '3h ago'               },
                { t: 'Approval routed to PM',                s: 'Yesterday'            },
              ].map((a, i) => (
                <div key={i} style={{ display: 'flex', gap: '12px' }}>
                  <div
                    className="rounded-full"
                    style={{
                      marginTop: '6px',
                      height: '6px',
                      width: '6px',
                      flexShrink: 0,
                      background: a.hi ? 'var(--c-steel)' : 'var(--c-line2)',
                    }}
                  />
                  <div style={{ minWidth: 0 }}>
                    <div
                      className="text-paper"
                      style={{
                        fontSize: '13px',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }}
                    >
                      {a.t}
                    </div>
                    <div className="label-bp mt-1">{a.s}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* bottom rail */}
        <div
          className="px-5 py-3 flex items-center justify-between"
          style={{ borderTop: '1px solid var(--c-line)' }}
        >
          <span className="label-bp">v2.4.1 — Live</span>
          <div className="flex items-center gap-2">
            <span
              className="rounded-full bg-steel platform-pulse"
              style={{ height: '6px', width: '6px', display: 'inline-block' }}
            />
            <span className="label-bp">Synced 00:02</span>
          </div>
        </div>
      </div>

      {/* steel underglow */}
      <div
        className="pointer-events-none absolute"
        style={{
          left: '-80px',
          right: '-80px',
          bottom: '-160px',
          height: '320px',
          background: 'rgba(52,93,138,0.07)',
          filter: 'blur(48px)',
          borderRadius: '9999px',
        }}
      />
    </div>
  );
}

function PlatformChart() {
  const pts = [12, 18, 16, 24, 22, 30, 28, 38, 34, 46, 52, 48, 60, 58, 68, 72];
  const W = 100, H = 40;
  const max = Math.max(...pts);
  const step = W / (pts.length - 1);
  const linePath = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${+(i * step).toFixed(3)} ${+(H - (p / max) * H).toFixed(3)}`).join(' ');
  const areaPath = `${linePath} L ${W} ${H} L 0 ${H} Z`;

  return (
    <div style={{ position: 'relative', height: '192px', width: '100%' }}>
      <svg
        viewBox={`0 0 ${W} ${H}`}
        preserveAspectRatio="none"
        style={{ position: 'absolute', inset: 0, height: '100%', width: '100%' }}
      >
        <defs>
          <linearGradient id="platformFade" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%"   stopColor="#345d8a" stopOpacity="0.20" />
            <stop offset="100%" stopColor="#345d8a" stopOpacity="0"    />
          </linearGradient>
        </defs>
        {[0, 0.25, 0.5, 0.75, 1].map((t, i) => (
          <line key={i} x1="0" x2={W} y1={H * t} y2={H * t} stroke="#dcd8cd" strokeWidth="0.15" />
        ))}
        <path d={areaPath} fill="url(#platformFade)" />
        <path d={linePath} fill="none" stroke="#345d8a" strokeWidth="0.4" className="platform-chart-draw" />
      </svg>
    </div>
  );
}