function BuilderScreen() {
  const [selected, setSelected] = useState("kpi-1");
  const widgets = [
    { kind: "KPI Tile", icon: "gauge" },
    { kind: "Line Chart", icon: "lineChart" },
    { kind: "Bar Chart", icon: "barChart" },
    { kind: "Pie / Donut", icon: "pie" },
    { kind: "Table", icon: "table" },
    { kind: "Pivot", icon: "layers" },
    { kind: "Map", icon: "map" },
    { kind: "Heatmap", icon: "activity" },
    { kind: "Gauge", icon: "gauge" },
    { kind: "Calendar", icon: "calendar" },
    { kind: "Image", icon: "image" },
    { kind: "Text / Markdown", icon: "text" },
  ];

  return (
    <div style={{ display: 'flex', height: 'calc(100vh - 56px)' }}>
      {/* Left palette */}
      <div style={{ width: 220, borderRight: '1px solid var(--border)', background: 'var(--panel)', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontWeight: 600, fontSize: 12.5, marginBottom: 2 }}>Widgets</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>Drag to canvas</div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: 8 }}>
          {widgets.map((w, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', border: '1px solid var(--border)', borderRadius: 8, marginBottom: 6, cursor: 'grab', background: 'var(--panel-2)', fontSize: 12.5 }}>
              <Icon name={w.icon} size={14} style={{ color: 'var(--primary)' }}/>
              <span style={{ flex: 1 }}>{w.kind}</span>
              <Icon name="grip" size={12} style={{ color: 'var(--ink-4)' }}/>
            </div>
          ))}
          <div style={{ padding: '10px 8px 6px', fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600 }}>Data</div>
          {["gem_transactions", "state_revenue_daily", "vendor_master"].map(d => (
            <div key={d} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', borderRadius: 6, fontSize: 11.5 }}>
              <Icon name="database" size={11} style={{ color: 'var(--primary)' }}/>
              <span className="mono" style={{ fontSize: 11 }}>{d}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Canvas */}
      <div style={{ flex: 1, background: 'var(--panel-2)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <div style={{ height: 44, borderBottom: '1px solid var(--border)', background: 'var(--panel)', display: 'flex', alignItems: 'center', gap: 8, padding: '0 16px' }}>
          <div style={{ fontSize: 12.5, fontWeight: 600 }}>GeM Quarterly Review</div>
          <span className="tag" style={{ fontSize: 10.5 }}>Draft</span>
          <span className="tag" style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>Saved 2 min ago</span>
          <span className="spacer"/>
          <button className="btn sm"><Icon name="eye" size={11}/>Preview</button>
          <button className="btn sm"><Icon name="sparkles" size={11}/>Suggest layout</button>
          <button className="btn sm"><Icon name="share" size={11}/>Share</button>
          <button className="btn primary sm">Publish</button>
        </div>

        {/* Grid canvas */}
        <div style={{ flex: 1, overflow: 'auto', padding: 20, position: 'relative', backgroundImage: 'radial-gradient(circle, var(--border-strong) 0.7px, transparent 0.7px)', backgroundSize: '18px 18px' }}>
          <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 12 }}>
            {/* Row 1: 4 KPIs */}
            {KPIS.map((k, i) => (
              <div key={k.id} onClick={() => setSelected(`kpi-${i}`)}
                className="card"
                style={{ gridColumn: 'span 3', position: 'relative', outline: selected === `kpi-${i}` ? '2px solid var(--primary)' : 'none', cursor: 'pointer' }}>
                <div style={{ padding: 12 }}>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>{k.label}</div>
                  <div className="mono" style={{ fontSize: 22, fontWeight: 600, marginTop: 6 }}>{k.value}<span style={{ fontSize: 12, color: 'var(--ink-3)', marginLeft: 4 }}>{k.unit}</span></div>
                  <div style={{ fontSize: 11, color: k.up ? 'var(--ok)' : 'var(--danger)', fontWeight: 600, marginTop: 2 }}>{fmtPct(k.delta)}</div>
                </div>
                {selected === `kpi-${i}` && <WidgetHandles/>}
              </div>
            ))}

            {/* Row 2: 2 large */}
            <div className="card" onClick={() => setSelected("chart-1")} style={{ gridColumn: 'span 8', outline: selected === "chart-1" ? '2px solid var(--primary)' : 'none', cursor: 'pointer', position: 'relative' }}>
              <div className="card-head" style={{ padding: '10px 12px' }}>
                <h3 style={{ fontSize: 12.5 }}>Revenue Trend</h3>
                <Icon name="grip" size={12} style={{ color: 'var(--ink-4)' }}/>
              </div>
              <div className="card-body">
                <LineChart series={[{ name: "Revenue", data: [180,192,205,198,215,224,232,240,252,268,275,288] }]} labels={["A","M","J","J","A","S","O","N","D","J","F","M"]} h={200}/>
              </div>
              {selected === "chart-1" && <WidgetHandles/>}
            </div>

            <div className="card" onClick={() => setSelected("chart-2")} style={{ gridColumn: 'span 4', outline: selected === "chart-2" ? '2px solid var(--primary)' : 'none', cursor: 'pointer', position: 'relative' }}>
              <div className="card-head" style={{ padding: '10px 12px' }}>
                <h3 style={{ fontSize: 12.5 }}>Category Split</h3>
                <Icon name="grip" size={12} style={{ color: 'var(--ink-4)' }}/>
              </div>
              <div className="card-body">
                <Donut data={[{ label: "IT", value: 42 }, { label: "Medical", value: 31 }, { label: "Infra", value: 27 }]} w={120}/>
              </div>
              {selected === "chart-2" && <WidgetHandles/>}
            </div>

            {/* Drop zone */}
            <div style={{ gridColumn: 'span 12', height: 100, border: '2px dashed var(--border-strong)', borderRadius: 12, display: 'grid', placeItems: 'center', color: 'var(--ink-3)', fontSize: 13 }}>
              <div style={{ textAlign: 'center' }}>
                <Icon name="plus" size={20}/>
                <div style={{ marginTop: 6 }}>Drop a widget here — or <span style={{ color: 'var(--primary)', fontWeight: 600 }}>ask AI to add one</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Right properties */}
      <div style={{ width: 260, borderLeft: '1px solid var(--border)', background: 'var(--panel)', overflowY: 'auto' }}>
        <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontWeight: 600, fontSize: 12.5, marginBottom: 2 }}>Properties</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{selected ? 'KPI Tile · GeM Procurement' : 'No widget selected'}</div>
        </div>
        {selected && (
          <div style={{ padding: 14, fontSize: 12 }}>
            <PropSection title="Data">
              <PropField label="Dataset" value="gem_transactions"/>
              <PropField label="Metric" value="SUM(order_value)"/>
              <PropField label="Filter" value="quarter = 'Q2-FY26'"/>
            </PropSection>
            <PropSection title="Display">
              <PropField label="Format" value="₹ Cr (2 decimals)"/>
              <PropField label="Comparison" value="vs last quarter"/>
              <PropField label="Trend arrow" value="Auto (green up)"/>
              <PropField label="Sparkline" value="12 months"/>
            </PropSection>
            <PropSection title="Layout">
              <PropField label="Size" value="3 × 1 grid"/>
              <PropField label="Padding" value="12px"/>
            </PropSection>
            <PropSection title="AI Enhancements">
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0' }}>
                <div style={{ width: 30, height: 16, background: 'var(--primary)', borderRadius: 999, position: 'relative' }}><div style={{ position: 'absolute', top: 1, right: 1, width: 14, height: 14, background: 'white', borderRadius: 50 }}/></div>
                <span>Auto-detect anomalies</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0' }}>
                <div style={{ width: 30, height: 16, background: 'var(--primary)', borderRadius: 999, position: 'relative' }}><div style={{ position: 'absolute', top: 1, right: 1, width: 14, height: 14, background: 'white', borderRadius: 50 }}/></div>
                <span>Show AI-generated caption</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0' }}>
                <div style={{ width: 30, height: 16, background: 'var(--border-strong)', borderRadius: 999, position: 'relative' }}><div style={{ position: 'absolute', top: 1, left: 1, width: 14, height: 14, background: 'white', borderRadius: 50 }}/></div>
                <span>Forecast next quarter</span>
              </div>
            </PropSection>
          </div>
        )}
      </div>
    </div>
  );
}

function WidgetHandles() {
  return <>
    <div style={{ position: 'absolute', top: -8, left: -8, width: 12, height: 12, background: 'var(--primary)', borderRadius: 3, border: '2px solid var(--panel)' }}/>
    <div style={{ position: 'absolute', top: -8, right: -8, width: 12, height: 12, background: 'var(--primary)', borderRadius: 3, border: '2px solid var(--panel)' }}/>
    <div style={{ position: 'absolute', bottom: -8, left: -8, width: 12, height: 12, background: 'var(--primary)', borderRadius: 3, border: '2px solid var(--panel)' }}/>
    <div style={{ position: 'absolute', bottom: -8, right: -8, width: 12, height: 12, background: 'var(--primary)', borderRadius: 3, border: '2px solid var(--panel)', cursor: 'nwse-resize' }}/>
  </>;
}

function PropSection({ title, children }) {
  return (
    <div style={{ marginBottom: 14, paddingBottom: 12, borderBottom: '1px solid var(--border)' }}>
      <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600, marginBottom: 6 }}>{title}</div>
      {children}
    </div>
  );
}
function PropField({ label, value }) {
  return (
    <div style={{ marginBottom: 8 }}>
      <div style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 3 }}>{label}</div>
      <div style={{ padding: '6px 8px', background: 'var(--panel-2)', border: '1px solid var(--border)', borderRadius: 6, fontSize: 11.5, fontFamily: value.includes('_') || value.includes('(') ? 'JetBrains Mono' : 'inherit', color: 'var(--ink)' }}>{value}</div>
    </div>
  );
}

window.BuilderScreen = BuilderScreen;