// V1 — Blueprint Grid
// Swiss typography, strict 12-col grid, blueprint blue #1e3a8a accent,
// JetBrains Mono for numbers/codes, Inter Tight for UI copy.
// AI = ⌘K command palette. No sidebar — top nav only.

const v1 = {
  bg: '#fafaf7',        // warm paper white
  ink: '#0a0a0a',
  ink2: '#52524e',
  ink3: '#8a8a85',
  line: '#e5e4df',
  line2: '#efeeea',
  panel: '#ffffff',
  blue: '#1e3a8a',      // blueprint indigo
  blueSoft: '#eaecf4',
  amber: '#b45309',     // warning / over-budget
  green: '#15803d',
  mono: '"JetBrains Mono", ui-monospace, monospace',
  sans: '"Inter Tight", -apple-system, sans-serif',
};

function V1Blueprint({ commandOpen }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: v1.bg,
      fontFamily: v1.sans, color: v1.ink,
      fontSize: 13, letterSpacing: '-0.005em',
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      <V1TopBar />
      <V1SubBar />
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderTop: `1px solid ${v1.line}` }}>
        <V1ProgressCell />
        <V1BudgetCell />
        <V1ScheduleCell />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', borderTop: `1px solid ${v1.line}` }}>
        <V1Activity />
        <V1Crew />
      </div>
      <V1StatusBar />
      {commandOpen && <V1CommandPalette />}
    </div>
  );
}

function V1TopBar() {
  const nav = ['Overview', 'Projects', 'Schedule', 'Accounting', 'Documents', 'Crew', 'Materials', 'Reports'];
  return (
    <div style={{
      height: 48, display: 'flex', alignItems: 'center',
      padding: '0 20px', borderBottom: `1px solid ${v1.line}`,
      background: v1.panel,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginRight: 32 }}>
        <div style={{
          width: 20, height: 20, background: v1.blue, borderRadius: 2,
          display: 'grid', placeItems: 'center', color: '#fff',
          fontFamily: v1.mono, fontSize: 11, fontWeight: 600,
        }}>C</div>
        <div style={{ fontWeight: 600, fontSize: 14, letterSpacing: '-0.01em' }}>Contro</div>
        <div style={{ color: v1.ink3, fontSize: 13 }}>/</div>
        <div style={{ fontSize: 13, color: v1.ink2 }}>Ridgeline Development</div>
      </div>
      <div style={{ display: 'flex', gap: 0 }}>
        {nav.map((n, i) => (
          <div key={n} style={{
            padding: '0 14px', height: 48, lineHeight: '48px',
            fontSize: 13, color: i === 0 ? v1.ink : v1.ink2,
            borderBottom: i === 0 ? `2px solid ${v1.blue}` : '2px solid transparent',
            fontWeight: i === 0 ? 500 : 400,
          }}>{n}</div>
        ))}
      </div>
      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '6px 10px', border: `1px solid ${v1.line}`,
          borderRadius: 4, fontSize: 12, color: v1.ink3,
          background: v1.bg, width: 260,
        }}>
          <span>Search or ask Contro…</span>
          <span style={{
            marginLeft: 'auto', fontFamily: v1.mono, fontSize: 11,
            background: v1.panel, border: `1px solid ${v1.line}`,
            padding: '1px 5px', borderRadius: 2,
          }}>⌘K</span>
        </div>
        <div style={{
          width: 26, height: 26, borderRadius: '50%',
          background: '#cbb79a', color: v1.ink, fontSize: 11,
          display: 'grid', placeItems: 'center', fontWeight: 600,
        }}>MR</div>
      </div>
    </div>
  );
}

function V1SubBar() {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-end',
      padding: '28px 32px 20px', gap: 40,
      background: v1.panel,
    }}>
      <div style={{ flex: 1 }}>
        <div style={{
          fontFamily: v1.mono, fontSize: 11, color: v1.ink3,
          textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10,
        }}>
          <span style={{ color: v1.blue }}>●</span> &nbsp;Active project &nbsp;·&nbsp; PRJ-0418 &nbsp;·&nbsp; Q2 / 2026
        </div>
        <div style={{
          fontSize: 36, fontWeight: 500, letterSpacing: '-0.02em',
          lineHeight: 1.05, marginBottom: 6,
        }}>
          Harborview Mixed-Use, Block&nbsp;B
        </div>
        <div style={{ color: v1.ink2, fontSize: 13 }}>
          84&thinsp;Harbor Rd, Portland ME &nbsp;·&nbsp; 41 crew on site &nbsp;·&nbsp; Foundation → Framing
        </div>
      </div>
      <V1StatPill label="Day" value="084" sub="of 312" />
      <V1StatPill label="Spend" value="42.1%" sub="of $12.4M" />
      <V1StatPill label="Schedule" value="+3d" sub="behind plan" tone="amber" />
      <V1StatPill label="Safety" value="0" sub="incidents · 30d" tone="green" />
    </div>
  );
}

function V1StatPill({ label, value, sub, tone }) {
  const col = tone === 'amber' ? v1.amber : tone === 'green' ? v1.green : v1.ink;
  return (
    <div style={{ minWidth: 110 }}>
      <div style={{
        fontFamily: v1.mono, fontSize: 10, color: v1.ink3,
        textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8,
      }}>{label}</div>
      <div style={{
        fontFamily: v1.mono, fontSize: 28, fontWeight: 500,
        color: col, letterSpacing: '-0.01em', lineHeight: 1,
      }}>{value}</div>
      <div style={{ fontSize: 12, color: v1.ink3, marginTop: 4, fontFamily: v1.mono }}>{sub}</div>
    </div>
  );
}

function V1CellHeader({ code, title, right }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '14px 20px', borderBottom: `1px solid ${v1.line2}`,
      background: v1.panel,
    }}>
      <span style={{ fontFamily: v1.mono, fontSize: 10, color: v1.ink3, letterSpacing: '0.08em' }}>{code}</span>
      <span style={{ fontSize: 13, fontWeight: 500 }}>{title}</span>
      {right && <span style={{ marginLeft: 'auto', fontSize: 11, color: v1.ink3, fontFamily: v1.mono }}>{right}</span>}
    </div>
  );
}

function V1ProgressCell() {
  const phases = [
    { name: 'Site prep',  pct: 100, days: 'Jan 14 → Feb 08' },
    { name: 'Excavation', pct: 100, days: 'Feb 09 → Feb 28' },
    { name: 'Foundation', pct: 100, days: 'Mar 02 → Mar 30' },
    { name: 'Framing',    pct: 62,  days: 'Apr 01 → May 22', active: true },
    { name: 'MEP rough',  pct: 0,   days: 'May 18 → Jun 30' },
    { name: 'Envelope',   pct: 0,   days: 'Jun 10 → Aug 04' },
    { name: 'Interior',   pct: 0,   days: 'Jul 15 → Oct 28' },
    { name: 'Finishes',   pct: 0,   days: 'Oct 01 → Dec 12' },
  ];
  return (
    <div style={{ borderRight: `1px solid ${v1.line}`, background: v1.panel }}>
      <V1CellHeader code="01" title="Phase progress" right="8 phases" />
      <div style={{ padding: '16px 20px 20px' }}>
        {phases.map((p, i) => (
          <div key={p.name} style={{ marginBottom: 14 }}>
            <div style={{
              display: 'flex', fontSize: 12, marginBottom: 5,
              color: p.active ? v1.ink : p.pct === 100 ? v1.ink2 : v1.ink3,
            }}>
              <span style={{ fontFamily: v1.mono, width: 22, color: v1.ink3 }}>{String(i+1).padStart(2,'0')}</span>
              <span style={{ flex: 1, fontWeight: p.active ? 500 : 400 }}>{p.name}</span>
              <span style={{ fontFamily: v1.mono, color: v1.ink3 }}>{p.days}</span>
              <span style={{ fontFamily: v1.mono, width: 44, textAlign: 'right', color: p.active ? v1.blue : v1.ink2 }}>
                {p.pct}%
              </span>
            </div>
            <div style={{ height: 3, background: v1.line2, position: 'relative' }}>
              <div style={{
                position: 'absolute', inset: 0, width: `${p.pct}%`,
                background: p.active ? v1.blue : p.pct === 100 ? v1.ink : v1.line,
              }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function V1BudgetCell() {
  const rows = [
    { k: 'Labor',       planned: 4200000, actual: 1940000, pct: 46 },
    { k: 'Materials',   planned: 5100000, actual: 2380000, pct: 47 },
    { k: 'Equipment',   planned:  980000, actual:  510000, pct: 52 },
    { k: 'Subcontract', planned: 1820000, actual:  260000, pct: 14 },
    { k: 'Permits/fees',planned:  200000, actual:  164000, pct: 82, warn: true },
    { k: 'Contingency', planned:  100000, actual:   12000, pct: 12 },
  ];
  const fmt = (n) => '$' + (n/1_000_000).toFixed(2) + 'M';
  return (
    <div style={{ borderRight: `1px solid ${v1.line}`, background: v1.panel }}>
      <V1CellHeader code="02" title="Budget · actual vs plan" right="$12.4M" />
      <div style={{ padding: '16px 20px 20px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 80px 80px 44px',
          fontFamily: v1.mono, fontSize: 10, color: v1.ink3,
          letterSpacing: '0.06em', textTransform: 'uppercase',
          paddingBottom: 8, borderBottom: `1px solid ${v1.line2}`,
        }}>
          <span>Category</span><span style={{ textAlign: 'right' }}>Plan</span>
          <span style={{ textAlign: 'right' }}>Actual</span><span style={{ textAlign: 'right' }}>%</span>
        </div>
        {rows.map((r) => (
          <div key={r.k} style={{ paddingTop: 10, paddingBottom: 10, borderBottom: `1px solid ${v1.line2}` }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 80px 80px 44px',
              fontSize: 12, alignItems: 'center',
            }}>
              <span>{r.k}</span>
              <span style={{ textAlign: 'right', fontFamily: v1.mono, color: v1.ink2 }}>{fmt(r.planned)}</span>
              <span style={{ textAlign: 'right', fontFamily: v1.mono }}>{fmt(r.actual)}</span>
              <span style={{ textAlign: 'right', fontFamily: v1.mono, color: r.warn ? v1.amber : v1.ink }}>
                {r.pct}%
              </span>
            </div>
            <div style={{ height: 2, background: v1.line2, marginTop: 6, position: 'relative' }}>
              <div style={{
                position: 'absolute', inset: 0, width: `${r.pct}%`,
                background: r.warn ? v1.amber : v1.blue,
              }} />
            </div>
          </div>
        ))}
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          marginTop: 14, fontFamily: v1.mono, fontSize: 12,
        }}>
          <span style={{ color: v1.ink3 }}>Total drawn</span>
          <span>$5.27M &nbsp;/&nbsp; $12.40M</span>
        </div>
      </div>
    </div>
  );
}

function V1ScheduleCell() {
  return (
    <div style={{ background: v1.panel }}>
      <V1CellHeader code="03" title="Next 14 days" right="22 milestones" />
      <div style={{ padding: '4px 0' }}>
        {[
          { d: 'APR 22', t: 'Concrete pour · Level 2 deck',        meta: 'Weather watch · 40% rain' },
          { d: 'APR 23', t: 'City inspection · framing rough',     meta: 'Insp. K. Oduya · 09:00' },
          { d: 'APR 24', t: 'Steel delivery · beams W12×22',       meta: '14 tons · Marley Freight' },
          { d: 'APR 25', t: 'Crane rental return',                  meta: 'Accruing $1,200/day' },
          { d: 'APR 28', t: 'MEP coordination meeting',             meta: '7 trades · blueprint rev D' },
          { d: 'MAY 02', t: 'Owner walk-through',                   meta: 'R. Calloway + team' },
          { d: 'MAY 05', t: 'Insurance renewal — GL policy',        meta: 'Due by 17:00 · $48.2K' },
        ].map((x, i) => (
          <div key={i} style={{
            display: 'flex', gap: 14, padding: '11px 20px',
            borderBottom: `1px solid ${v1.line2}`,
            alignItems: 'baseline',
          }}>
            <span style={{
              fontFamily: v1.mono, fontSize: 11, color: v1.ink3,
              width: 56, flexShrink: 0, letterSpacing: '0.03em',
            }}>{x.d}</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, marginBottom: 2 }}>{x.t}</div>
              <div style={{ fontSize: 11, color: v1.ink3 }}>{x.meta}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function V1Activity() {
  const items = [
    { t: '09:42', kind: 'RFI',      text: 'RFI-228 answered — steel column connection at grid D-4',  by: 'Arch · Studio North' },
    { t: '09:18', kind: 'INVOICE',  text: 'INV-1142 from Brannigan Concrete · $184,220',              by: 'Accounting · needs approval' },
    { t: '08:55', kind: 'AI',       text: 'Flagged: material receipt missing for PO-0338 (3 days)',    by: 'Contro · auto-review' },
    { t: '08:30', kind: 'CHANGE',   text: 'CO-017 · Owner requested upgrade to Low-E glazing',        by: 'R. Calloway (owner)' },
    { t: '07:50', kind: 'LABOR',    text: '41 of 44 crew clocked in · 2 called out, 1 late',          by: 'Field app · auto' },
    { t: '07:12', kind: 'DOC',      text: 'Drawing rev D uploaded · A-201 through A-214',             by: 'J. Ibarra · arch' },
  ];
  const kindColor = { AI: v1.blue, INVOICE: v1.amber, CHANGE: v1.amber, LABOR: v1.ink, RFI: v1.ink, DOC: v1.ink3 };
  return (
    <div style={{ background: v1.panel, borderRight: `1px solid ${v1.line}` }}>
      <V1CellHeader code="04" title="Activity · today" right="Apr 21, 2026 · 09:52" />
      <div>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '54px 84px 1fr auto',
            gap: 16, padding: '12px 20px',
            borderBottom: `1px solid ${v1.line2}`,
            fontSize: 13, alignItems: 'center',
          }}>
            <span style={{ fontFamily: v1.mono, fontSize: 11, color: v1.ink3 }}>{it.t}</span>
            <span style={{
              fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.06em',
              color: kindColor[it.kind] || v1.ink3, textTransform: 'uppercase',
            }}>{it.kind}</span>
            <span>{it.text}</span>
            <span style={{ fontSize: 11, color: v1.ink3 }}>{it.by}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function V1Crew() {
  return (
    <div style={{ background: v1.panel }}>
      <V1CellHeader code="05" title="Crew · on site" right="41 / 44" />
      <div style={{ padding: '16px 20px' }}>
        {[
          { trade: 'Framers',     on: 14, of: 14 },
          { trade: 'Electricians', on:  6, of:  8 },
          { trade: 'Plumbers',     on:  4, of:  4 },
          { trade: 'Concrete',     on:  9, of: 10 },
          { trade: 'Laborers',     on:  8, of:  8 },
        ].map((c) => (
          <div key={c.trade} style={{
            display: 'grid', gridTemplateColumns: '1fr auto auto',
            fontSize: 12, padding: '8px 0',
            borderBottom: `1px solid ${v1.line2}`, alignItems: 'center', gap: 12,
          }}>
            <span>{c.trade}</span>
            <span style={{ display: 'flex', gap: 2 }}>
              {Array.from({ length: c.of }).map((_, i) => (
                <span key={i} style={{
                  width: 6, height: 10,
                  background: i < c.on ? v1.blue : v1.line,
                }} />
              ))}
            </span>
            <span style={{ fontFamily: v1.mono, color: v1.ink2, width: 36, textAlign: 'right' }}>
              {c.on}/{c.of}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function V1StatusBar() {
  return (
    <div style={{
      borderTop: `1px solid ${v1.line}`, background: v1.panel,
      padding: '8px 20px', display: 'flex', gap: 24,
      fontFamily: v1.mono, fontSize: 11, color: v1.ink3,
    }}>
      <span>PRJ-0418 · v2.11</span>
      <span>Synced 09:52 EDT</span>
      <span style={{ color: v1.green }}>● All systems nominal</span>
      <span style={{ marginLeft: 'auto' }}>Press <b style={{ color: v1.ink }}>⌘K</b> to ask Contro anything</span>
    </div>
  );
}

function V1CommandPalette() {
  return (
    <div style={{
      position: 'absolute', inset: 0, background: 'rgba(10,10,10,0.25)',
      display: 'flex', justifyContent: 'center', paddingTop: 120, zIndex: 20,
    }}>
      <div style={{
        width: 680, maxHeight: 520, background: v1.panel,
        border: `1px solid ${v1.line}`, borderRadius: 6,
        boxShadow: '0 24px 60px rgba(10,10,10,0.25), 0 6px 16px rgba(10,10,10,0.12)',
        overflow: 'hidden', display: 'flex', flexDirection: 'column',
      }}>
        {/* input */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '18px 20px', borderBottom: `1px solid ${v1.line2}`,
        }}>
          <div style={{
            width: 16, height: 16, background: v1.blue, borderRadius: 2,
            display: 'grid', placeItems: 'center', color: '#fff',
            fontFamily: v1.mono, fontSize: 9, fontWeight: 600,
          }}>C</div>
          <div style={{ fontSize: 15, fontFamily: v1.sans, flex: 1 }}>
            Why are we 3 days behind on framing?
            <span style={{
              display: 'inline-block', width: 2, height: 16,
              background: v1.blue, marginLeft: 2, verticalAlign: 'text-bottom',
              animation: 'blink 1s steps(2) infinite',
            }} />
          </div>
          <span style={{ fontFamily: v1.mono, fontSize: 11, color: v1.ink3 }}>esc</span>
        </div>

        {/* answer */}
        <div style={{ padding: '18px 20px', borderBottom: `1px solid ${v1.line2}` }}>
          <div style={{
            fontFamily: v1.mono, fontSize: 10, color: v1.ink3,
            textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10,
          }}>Contro · 3 factors identified</div>
          <div style={{ fontSize: 13, lineHeight: 1.6, color: v1.ink }}>
            Framing is trending <b style={{ color: v1.amber }}>+3d</b> against plan. Main contributors:
          </div>
          <div style={{ marginTop: 12 }}>
            {[
              { n: '01', t: 'Steel beam delivery slipped Apr 15 → Apr 18', src: 'Marley Freight · 3-day delay' },
              { n: '02', t: 'Two framers out sick Apr 17–19', src: 'Field app · absence log' },
              { n: '03', t: 'Rain caused deck pour postponement Apr 20', src: 'Weather · 1.1" rainfall' },
            ].map((x) => (
              <div key={x.n} style={{
                display: 'grid', gridTemplateColumns: '24px 1fr auto',
                padding: '10px 0', borderTop: `1px solid ${v1.line2}`,
                fontSize: 13, gap: 10,
              }}>
                <span style={{ fontFamily: v1.mono, color: v1.ink3, fontSize: 11 }}>{x.n}</span>
                <span>{x.t}</span>
                <span style={{ fontSize: 11, color: v1.ink3 }}>{x.src}</span>
              </div>
            ))}
          </div>
          <div style={{
            marginTop: 14, padding: 12, background: v1.blueSoft,
            fontSize: 12, color: v1.ink, lineHeight: 1.5,
          }}>
            <b>Recovery plan</b> — Add 2 framers from the Portland pool for 5 days (~$4,800),
            compress MEP rough start by 2 days. Net schedule impact: <b>−3d → 0d</b>.
            <span style={{ marginLeft: 8, color: v1.blue, fontFamily: v1.mono, fontSize: 11 }}>[ Apply ]</span>
          </div>
        </div>

        {/* suggestions */}
        <div style={{ padding: '12px 20px' }}>
          <div style={{
            fontFamily: v1.mono, fontSize: 10, color: v1.ink3,
            textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8,
          }}>Suggested next</div>
          {[
            'Draft the recovery plan as a change request',
            'Email R. Calloway with schedule update',
            'Show me weather risk for next 14 days',
          ].map((s, i) => (
            <div key={i} style={{
              display: 'flex', padding: '8px 0', fontSize: 13,
              borderTop: i ? `1px solid ${v1.line2}` : 'none',
              color: v1.ink2,
            }}>
              <span style={{ color: v1.blue, marginRight: 10, fontFamily: v1.mono }}>→</span>
              <span>{s}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { V1Blueprint });