function NLQScreen() {
  const [query, setQuery] = useState("Show revenue by state for the last quarter");
  const [ran, setRan] = useState(true);
  const [thinking, setThinking] = useState(false);

  const run = () => {
    setThinking(true);
    setRan(false);
    setTimeout(() => { setThinking(false); setRan(true); }, 700);
  };

  const stateVals = Object.fromEntries(STATES.slice(0, 10).map(s => [s.code, s.value]));

  return (
    <div className="screen">
      <div style={{ textAlign: 'center', paddingTop: 24, paddingBottom: 20 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 12px', borderRadius: 999, background: 'var(--primary-tint)', color: 'var(--primary)', fontSize: 11.5, fontWeight: 600, marginBottom: 14 }}>
          <Icon name="sparkles" size={12}/> Natural Language Query · Powered by vyapar-agent-v3
        </div>
        <h1 style={{ fontSize: 34, fontWeight: 700, letterSpacing: '-.02em', color: 'var(--ink)', margin: 0, lineHeight: 1.1 }}>Ask your data anything.</h1>
        <p style={{ fontSize: 14, color: 'var(--ink-3)', marginTop: 8, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>
          Type a question in plain English or हिन्दी. VyaparBI generates the query, runs it across your data sources, and returns a dashboard with citations.
        </p>
      </div>

      {/* Big search */}
      <div style={{ maxWidth: 820, margin: "0 auto 20px", position: 'relative' }}>
        <div style={{ background: 'var(--panel)', border: '1px solid var(--border-strong)', borderRadius: 14, boxShadow: 'var(--shadow-md)', padding: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 38, height: 38, borderRadius: 10, background: 'linear-gradient(140deg, var(--primary), var(--accent))', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
            <Icon name="sparkles" size={18} style={{ color: 'white' }}/>
          </div>
          <input value={query} onChange={e => { setQuery(e.target.value); setRan(false); }} onKeyDown={e => e.key === 'Enter' && run()}
            placeholder="Show revenue by state for the last quarter"
            style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 17, color: 'var(--ink)', fontFamily: 'inherit', padding: '0 4px' }}
          />
          <button className="icon-btn" title="Voice"><Icon name="mic" size={18}/></button>
          <button className="btn primary" onClick={run} style={{ height: 38, padding: '0 16px' }}><Icon name="send" size={14}/>Ask</button>
        </div>
        <div style={{ marginTop: 10, display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'center' }}>
          {NLQ_EXAMPLES.map((ex, i) => (
            <button key={i} className="btn sm" style={{ fontSize: 11.5, color: 'var(--ink-2)' }} onClick={() => { setQuery(ex); setTimeout(run, 100); }}>
              <Icon name="zap" size={11} style={{ color: 'var(--accent-2)' }}/>{ex}
            </button>
          ))}
        </div>
      </div>

      {thinking && (
        <div style={{ maxWidth: 820, margin: '0 auto', background: 'var(--panel)', border: '1px solid var(--border)', borderRadius: 12, padding: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span className="live-dot"/>
            <span style={{ fontWeight: 600 }}>Understanding your question…</span>
          </div>
          <div className="mono" style={{ fontSize: 11.5, color: 'var(--ink-3)', lineHeight: 1.7 }}>
            <div>→ Detected intent: <b style={{ color: 'var(--primary)' }}>aggregate</b> · dimension: <b style={{ color: 'var(--primary)' }}>state</b> · metric: <b style={{ color: 'var(--primary)' }}>revenue</b></div>
            <div>→ Time filter: <b style={{ color: 'var(--primary)' }}>last quarter (Q2 FY26)</b></div>
            <div>→ Selecting semantic layer: <b style={{ color: 'var(--primary)' }}>Finance.RevenueDaily</b></div>
            <div>→ Executing query on ClickHouse…</div>
          </div>
        </div>
      )}

      {ran && !thinking && (
        <div style={{ maxWidth: 1200, margin: '0 auto' }} className="fade-in">
          {/* Interpretation */}
          <div className="card" style={{ marginBottom: 14 }}>
            <div style={{ padding: 14, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--primary-tint)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <Icon name="check" size={14} style={{ color: 'var(--primary)' }}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 4 }}>I understood this as:</div>
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>
                  Sum of <span style={{ color: 'var(--primary)', fontWeight: 600 }}>revenue collection</span> grouped by <span style={{ color: 'var(--primary)', fontWeight: 600 }}>state</span>, filtered to <span style={{ color: 'var(--primary)', fontWeight: 600 }}>Q2 FY 2025–26</span>
                </div>
                <div style={{ marginTop: 8, display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
                  <span className="tag primary" style={{ fontSize: 10.5 }}><Icon name="database" size={10}/>state_revenue_daily</span>
                  <span className="tag" style={{ fontSize: 10.5 }}>218ms · 12,442 rows scanned</span>
                  <span className="spacer"/>
                  <button className="btn sm">View SQL</button>
                  <button className="btn sm">Refine</button>
                  <button className="btn sm primary"><Icon name="plus" size={11}/>Save as dashboard</button>
                </div>
              </div>
            </div>
          </div>

          {/* Generated dashboard */}
          <div style={{ marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="dashboard" size={14} style={{ color: 'var(--ink-3)' }}/>
            <span style={{ fontWeight: 600, color: 'var(--ink)', fontSize: 13 }}>Auto-generated dashboard</span>
            <span className="tag ok" style={{ fontSize: 10.5 }}><Icon name="sparkles" size={10}/>Generated in 1.2s</span>
            <span className="spacer"/>
            <button className="btn sm"><Icon name="download" size={11}/>Export</button>
            <button className="btn sm"><Icon name="share" size={11}/>Share</button>
          </div>

          <div className="grid g-3" style={{ marginBottom: 14 }}>
            <div className="card kpi">
              <div className="label">Total Revenue — Q2</div>
              <div className="value">₹2,568<span className="unit">Cr</span></div>
              <div className="delta up"><Icon name="trending" size={13}/>+9.4% <span className="vs">vs Q1</span></div>
            </div>
            <div className="card kpi">
              <div className="label">Top state — Maharashtra</div>
              <div className="value">₹342<span className="unit">Cr</span></div>
              <div className="delta up"><Icon name="trending" size={13}/>+14.2% <span className="vs">·  13.3% of total</span></div>
            </div>
            <div className="card kpi">
              <div className="label">Fastest growth — Delhi NCR</div>
              <div className="value">+22.1<span className="unit">%</span></div>
              <div className="delta up"><Icon name="trending" size={13}/>vs Q1 FY26</div>
            </div>
          </div>

          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', marginBottom: 14 }}>
            <div className="card">
              <div className="card-head">
                <h3>Revenue by State — Q2 FY26</h3>
                <button className="icon-btn"><Icon name="moreH"/></button>
              </div>
              <div className="card-body">
                <BarChart data={STATES.slice(0, 10).map(s => s.value)} labels={STATES.slice(0, 10).map(s => s.code)} h={280} format={v => `₹${v}`} showValue color="var(--primary)"/>
              </div>
            </div>
            <div className="card">
              <div className="card-head">
                <h3>Geographic View</h3>
                <button className="icon-btn"><Icon name="moreH"/></button>
              </div>
              <div className="card-body">
                <IndiaMap values={stateVals} h={280}/>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <h3>Detailed breakdown</h3>
              <div className="hstack">
                <button className="btn sm"><Icon name="filter" size={11}/>Filter</button>
                <button className="btn sm"><Icon name="download" size={11}/>CSV</button>
              </div>
            </div>
            <div className="card-body" style={{ padding: 0 }}>
              <table className="data">
                <thead><tr>
                  <th>Rank</th>
                  <th>State</th>
                  <th className="num">Revenue (Cr)</th>
                  <th className="num">Active Tenders</th>
                  <th className="num">YoY Change</th>
                  <th>Trend</th>
                </tr></thead>
                <tbody>
                  {STATES.slice(0, 8).map((s, i) => (
                    <tr key={s.code}>
                      <td className="mono" style={{ color: 'var(--ink-3)' }}>{i + 1}</td>
                      <td style={{ fontWeight: 500 }}>{s.name} <span style={{ color: 'var(--ink-3)', fontSize: 11 }}>· {s.code}</span></td>
                      <td className="num" style={{ fontWeight: 600 }}>{s.value.toFixed(1)}</td>
                      <td className="num">{s.tenders}</td>
                      <td className="num" style={{ color: s.delta >= 0 ? 'var(--ok)' : 'var(--danger)', fontWeight: 600 }}>{fmtPct(s.delta)}</td>
                      <td><Sparkline data={[42,48,45,52,58,55,62,68,72,68,70,74].map(v => v + i * 2)} w={80} h={22} stroke={s.delta >= 0 ? 'var(--ok)' : 'var(--danger)'}/></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Ask follow-up */}
          <div style={{ marginTop: 14, padding: 14, background: 'var(--primary-tint)', border: '1px dashed color-mix(in oklch, var(--primary), transparent 60%)', borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
            <Icon name="sparkles" size={16} style={{ color: 'var(--primary)' }}/>
            <span style={{ fontSize: 13, color: 'var(--ink-2)' }}>Follow up:</span>
            {["Show me quarter-over-quarter", "Filter to only IT category", "Compare vs last year", "Which vendors drove this?"].map((f, i) => (
              <button key={i} className="btn sm" style={{ background: 'var(--panel)' }}>{f}</button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.NLQScreen = NLQScreen;