// V7 — Flowchart
// Node-graph dashboard. Projects are nodes, edges carry money and materials
// between them. Animated flowing dots on edges. Light, architectural.

const v7 = {
  bg: '#fbfbfa',
  panel: '#ffffff',
  ink: '#161414',
  ink2: '#545049',
  ink3: '#9b968d',
  line: '#eae6df',
  line2: '#f1ede6',
  accent: '#1f6feb',
  accentSoft: '#e8f0ff',
  purple: '#7c3aed',
  orange: '#ea7b1c',
  mint: '#0f9d58',
  red: '#d93025',
  sans: '"Inter Tight", -apple-system, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
  serif: '"Instrument Serif", Georgia, serif',
};

function V7Flowchart() {
  return (
    <div style={{
      width: '100%', height: '100%', background: v7.bg, color: v7.ink,
      fontFamily: v7.sans, fontSize: 13, overflow: 'hidden',
      display: 'grid', gridTemplateRows: '52px 1fr 36px',
    }}>
      <V7Nav />
      <V7Canvas />
      <V7Footer />
      <style>{`
        @keyframes v7Flow { from { stroke-dashoffset: 0 } to { stroke-dashoffset: -40 } }
        @keyframes v7Draw { from { stroke-dashoffset: var(--len) } to { stroke-dashoffset: 0 } }
        @keyframes v7Pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.08); opacity: 0.9 } }
        @keyframes v7Fade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }
        @keyframes v7FloatAlong { 0% { offset-distance: 0% } 100% { offset-distance: 100% } }
        @keyframes v7Glow { 0%,100% { filter: drop-shadow(0 0 4px rgba(31,111,235,0.4)) } 50% { filter: drop-shadow(0 0 10px rgba(31,111,235,0.7)) } }
      `}</style>
    </div>
  );
}

function V7Nav() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '0 20px', borderBottom: `1px solid ${v7.line}`, background: v7.panel }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 22, height: 22, background: v7.ink, color: v7.bg, borderRadius: 5, display: 'grid', placeItems: 'center', fontFamily: v7.mono, fontSize: 12, fontWeight: 700 }}>C</div>
        <div style={{ fontWeight: 600 }}>Contro</div>
        <span style={{ color: v7.ink3 }}>/</span>
        <span style={{ fontFamily: v7.serif, fontStyle: 'italic', fontSize: 16 }}>Ridgeline portfolio flow</span>
      </div>
      <div style={{ flex: 1 }} />
      {[['Flow', true],['Money', false],['Materials', false],['Crew', false]].map(([n, on]) => (
        <div key={n} style={{ padding: '4px 10px', fontSize: 12, borderRadius: 5, background: on ? v7.accentSoft : 'transparent', color: on ? v7.accent : v7.ink2, fontWeight: on ? 500 : 400 }}>{n}</div>
      ))}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', border: `1px solid ${v7.line}`, borderRadius: 6, fontSize: 11, color: v7.ink2 }}>
        <span>⌕</span> find node <span style={{ fontFamily: v7.mono, color: v7.ink3, marginLeft: 8 }}>⌘F</span>
      </div>
    </div>
  );
}

function V7Canvas() {
  // nodes: [id, x, y, label, type, color, metric]
  const nodes = [
    ['owner', 120, 220, 'Calloway Co (owner)',   'owner',  v7.mint, '$842k incoming'],
    ['bank',  120, 380, 'East Coast Bank',        'bank',   v7.mint, 'Draw #7 cleared'],

    ['hv',    430, 140, 'Harborview Blk B',       'project', v7.accent, '62%  ·  on pace'],
    ['pr',    430, 260, 'Pine Ridge L3',          'project', v7.accent, '48%  ·  watch'],
    ['eb',    430, 380, 'East Bay Lofts',         'project', v7.orange, '33%  ·  over'],
    ['mt',    430, 500, 'Meridian Tower',         'project', v7.accent, '81%  ·  on pace'],

    ['bran',  760, 110, 'Brannigan Concrete',     'sub',    v7.orange, '$184k  ·  +8.2%'],
    ['mon',   760, 210, 'Mondragon Framing',      'sub',    v7.purple, '14 crew'],
    ['cast',  760, 310, 'Castile MEP',            'sub',    v7.purple, 'rough-in wk'],
    ['low',   760, 410, 'Lowe Glazing',           'sub',    v7.orange, 'CO-017 pending'],
    ['wils',  760, 510, 'Wilson Rebar',           'sub',    v7.purple, 'on site'],

    ['mat',   1080, 200, 'Materials yard',        'hub',    v7.ink2,  '1,284 SKUs'],
    ['crew',  1080, 380, 'Crew pool · 44',        'hub',    v7.ink2,  '41 checked in'],
  ];
  const edges = [
    ['owner', 'hv',  'money', v7.mint, true],
    ['owner', 'pr',  'money', v7.mint, false],
    ['owner', 'mt',  'money', v7.mint, false],
    ['bank',  'eb',  'money', v7.mint, true],

    ['hv',    'bran','money', v7.orange, true],
    ['hv',    'mon', 'money', v7.accent, false],
    ['pr',    'cast','money', v7.accent, true],
    ['eb',    'low', 'money', v7.orange, true],
    ['mt',    'wils','money', v7.accent, false],

    ['mat',   'hv',  'mat',   v7.purple, true],
    ['mat',   'pr',  'mat',   v7.purple, false],
    ['mat',   'mt',  'mat',   v7.purple, true],
    ['crew',  'mon', 'crew',  v7.ink3,   false],
    ['crew',  'cast','crew',  v7.ink3,   true],
    ['crew',  'wils','crew',  v7.ink3,   false],
  ];
  const N = Object.fromEntries(nodes.map(n => [n[0], n]));

  return (
    <div style={{ position: 'relative', overflow: 'hidden', background: v7.bg }}>
      {/* dot grid */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <pattern id="v7dots" x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="0.8" fill={v7.line} />
          </pattern>
          <marker id="v7arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 0 1 L 8 5 L 0 9 z" fill={v7.ink3} />
          </marker>
        </defs>
        <rect width="100%" height="100%" fill="url(#v7dots)" />
      </svg>

      {/* edges */}
      <svg viewBox="0 0 1220 620" preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {edges.map(([a, b, , color, live], i) => {
          const A = N[a], B = N[b];
          const dx = B[1] - A[1];
          const mx1 = A[1] + dx * 0.5;
          const mx2 = A[1] + dx * 0.5;
          const d = `M ${A[1] + 88} ${A[2]} C ${mx1} ${A[2]}, ${mx2} ${B[2]}, ${B[1] - 88} ${B[2]}`;
          return (
            <g key={i}>
              <path d={d} fill="none" stroke={color} strokeOpacity={live ? 0.35 : 0.18} strokeWidth="1.4" />
              {live && (
                <path d={d} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round"
                  strokeDasharray="4 10" style={{ animation: `v7Flow ${2 + (i%3)*0.4}s linear infinite` }} />
              )}
              {/* traveling dot */}
              {live && (
                <circle r="3" fill={color} style={{
                  offsetPath: `path('${d}')`,
                  animation: `v7FloatAlong ${3 + (i%4)*0.5}s linear infinite`,
                  filter: `drop-shadow(0 0 4px ${color})`,
                }} />
              )}
            </g>
          );
        })}
      </svg>

      {/* nodes */}
      <div style={{ position: 'absolute', inset: 0 }}>
        <div style={{ position: 'relative', width: 1220, height: 620, transform: 'scale(0.78)', transformOrigin: 'top left' }}>
          {nodes.map((n, i) => (
            <V7Node key={n[0]} n={n} i={i} />
          ))}
        </div>
      </div>

      {/* floating panel */}
      <V7HoverPanel />

      {/* legend */}
      <div style={{ position: 'absolute', bottom: 14, left: 14, display: 'flex', gap: 12, background: v7.panel, border: `1px solid ${v7.line}`, borderRadius: 6, padding: '6px 10px', fontSize: 10, fontFamily: v7.mono, letterSpacing: '0.04em' }}>
        {[['Money', v7.mint],['Sub $', v7.orange],['Materials', v7.purple],['Crew', v7.ink3],['Owner flow', v7.accent]].map((l, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <div style={{ width: 10, height: 2, background: l[1] }} />
            <span style={{ color: v7.ink2 }}>{l[0]}</span>
          </div>
        ))}
      </div>

      {/* zoom controls */}
      <div style={{ position: 'absolute', bottom: 14, right: 14, display: 'flex', flexDirection: 'column', background: v7.panel, border: `1px solid ${v7.line}`, borderRadius: 6, overflow: 'hidden', fontFamily: v7.mono, fontSize: 12 }}>
        {['+','⊡','−'].map(g => (
          <div key={g} style={{ width: 28, height: 26, display: 'grid', placeItems: 'center', borderBottom: `1px solid ${v7.line}` }}>{g}</div>
        ))}
      </div>
    </div>
  );
}

function V7Node({ n, i }) {
  const [, x, y, label, type, color, metric] = n;
  const icon = { owner: '◉', bank: '▤', project: '▣', sub: '▥', hub: '◈' }[type];
  return (
    <div style={{
      position: 'absolute', left: x - 88, top: y - 26, width: 176,
      background: v7.panel, border: `1px solid ${v7.line}`, borderRadius: 8,
      padding: '10px 12px', fontSize: 11,
      boxShadow: '0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04)',
      animation: `v7Fade 500ms ${i * 40}ms both`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <div style={{ width: 18, height: 18, background: `${color}18`, color, display: 'grid', placeItems: 'center', fontSize: 11, borderRadius: 4 }}>{icon}</div>
        <span style={{ fontSize: 11, fontWeight: 500, color: v7.ink, flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</span>
      </div>
      <div style={{ fontSize: 10, color: v7.ink3, marginTop: 4, fontFamily: v7.mono, letterSpacing: '0.02em' }}>{metric}</div>
      {/* port dots */}
      <div style={{ position: 'absolute', left: -4, top: 23, width: 8, height: 8, borderRadius: '50%', background: v7.panel, border: `1.5px solid ${color}` }} />
      <div style={{ position: 'absolute', right: -4, top: 23, width: 8, height: 8, borderRadius: '50%', background: v7.panel, border: `1.5px solid ${color}` }} />
    </div>
  );
}

function V7HoverPanel() {
  return (
    <div style={{
      position: 'absolute', top: 20, right: 20, width: 280, background: v7.panel,
      border: `1px solid ${v7.line}`, borderRadius: 10, padding: 14, fontSize: 12,
      boxShadow: '0 12px 40px rgba(0,0,0,0.08)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
        <div style={{ width: 22, height: 22, background: `${v7.orange}18`, color: v7.orange, display: 'grid', placeItems: 'center', fontSize: 12, borderRadius: 5 }}>▥</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 500 }}>Brannigan Concrete</div>
          <div style={{ fontSize: 10, color: v7.ink3, fontFamily: v7.mono }}>sub  ·  selected</div>
        </div>
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: v7.orange, animation: 'v7Pulse 1.4s ease-in-out infinite' }} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, padding: '10px 0', borderTop: `1px solid ${v7.line}`, borderBottom: `1px solid ${v7.line}` }}>
        {[['Billed YTD','$1.24M'],['Budget left','$312k'],['Crew on site','7'],['Open RFIs','1']].map(([k, v]) => (
          <div key={k}>
            <div style={{ fontSize: 9, letterSpacing: '0.08em', color: v7.ink3, fontFamily: v7.mono }}>{k.toUpperCase()}</div>
            <div style={{ fontFamily: v7.serif, fontSize: 18, fontStyle: 'italic', marginTop: 1 }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ padding: '10px 0', fontSize: 11, color: v7.ink2, lineHeight: 1.55 }}>
        <span style={{ color: v7.orange }}>⚠</span> INV-1142 is 8.2% above PO-0338. Cause: rebar pricing.
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {['Open invoice','Draft CO','Chat with sub'].map((a, i) => (
          <span key={a} style={{
            padding: '5px 10px', fontSize: 10, borderRadius: 4, fontFamily: v7.mono,
            background: i === 0 ? v7.ink : v7.panel, color: i === 0 ? v7.bg : v7.ink2,
            border: i === 0 ? 'none' : `1px solid ${v7.line}`,
          }}>{a}</span>
        ))}
      </div>
    </div>
  );
}

function V7Footer() {
  return (
    <div style={{ borderTop: `1px solid ${v7.line}`, background: v7.panel, display: 'flex', alignItems: 'center', padding: '0 16px', gap: 18, fontSize: 11, fontFamily: v7.mono, color: v7.ink3 }}>
      <span>13 nodes  ·  15 edges</span>
      <span>4 money paths active</span>
      <span style={{ color: v7.mint }}>● live</span>
      <span style={{ flex: 1 }} />
      <span>drag to pan  ·  scroll to zoom  ·  click node to focus</span>
    </div>
  );
}

Object.assign(window, { V7Flowchart });