import React, { useState } from 'react'

export default function App(){
  const [prompt, setPrompt] = useState('');
  const [out, setOut] = useState('');
  const [loading, setLoading] = useState(false);
  const callServer = async () => {
    setLoading(true); setOut('');
    try{
      const resp = await fetch('/api/ask', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ prompt, model: 'gpt-4o-mini' }) });
      const j = await resp.json();
      if(j.ok) setOut(j.answer);
      else setOut('Error: ' + (j.error||JSON.stringify(j)));
    }catch(e){ setOut('Network error: ' + e.message) }
    setLoading(false);
  }
  return (
    <div style={{padding:24,fontFamily:'Inter,Arial',color:'#0b1220'}}>
      <h1>Marketing Workflow — Demo Client</h1>
      <p>Type a question for the marketing expert (server-side AI).</p>
      <textarea value={prompt} onChange={e=>setPrompt(e.target.value)} style={{width:'100%',height:120}}/>
      <div style={{marginTop:8,display:'flex',gap:8}}>
        <button onClick={callServer} disabled={loading}>{loading ? 'Thinking...' : 'Ask AI'}</button>
        <button onClick={()=>{ setPrompt('Create 3 messaging pillars for a handcrafted apparel DTC brand targeting women 28-45 in Tier 1 cities. Provide offers and ad formats.') }}>Sample prompt</button>
      </div>
      <h3>Answer</h3>
      <pre style={{background:'#f2f4f7',padding:12,borderRadius:8}}>{out}</pre>
    </div>
  )
}