import React, { useState } from 'react';
import Results from './components/Results';
import { validateStartup } from './utils/api';

const loadingMessages = [
  "Analyzing your idea...",
  "Estimating TAM/SAM/SOM...",
  "Researching competitors...",
  "Running SWOT analysis...",
  "Modeling revenue projections...",
  "Evaluating go-to-market strategy...",
  "Assessing funding readiness...",
  "Building risk matrix...",
  "Crafting 90-day plan...",
  "Generating pitch deck outline...",
  "Finalizing your report...",
];

export default function App() {
  const [idea, setIdea] = useState('');
  const [audience, setAudience] = useState('');
  const [monetization, setMonetization] = useState('');
  const [loading, setLoading] = useState(false);
  const [loadingMsg, setLoadingMsg] = useState(0);
  const [results, setResults] = useState(null);
  const [error, setError] = useState('');

  const handleValidate = async () => {
    setLoading(true);
    setError('');
    setLoadingMsg(0);
    const interval = setInterval(() => {
      setLoadingMsg(i => (i + 1) % loadingMessages.length);
    }, 2200);

    try {
      const data = await validateStartup(idea, audience, monetization);
      setResults(data);
    } catch (err) {
      setError(err.message);
    }
    clearInterval(interval);
    setLoading(false);
  };

  const handleReset = () => {
    setResults(null);
    setError('');
  };

  if (results) {
    return (
      <div className="app">
        <header className="header">
          <h1>Startup Idea Validator</h1>
          <p>AI-powered comprehensive startup viability analysis</p>
        </header>
        <Results data={results} onReset={handleReset} />
      </div>
    );
  }

  return (
    <div className="app">
      <header className="header">
        <h1>Startup Idea Validator</h1>
        <p>Get a VC-grade analysis: market sizing, SWOT, competitor analysis, revenue models, go-to-market strategy, and more.</p>
      </header>

      {error && (
        <div style={{ background: 'rgba(239,68,68,0.1)', padding: '1rem', borderRadius: '10px', marginBottom: '1rem', textAlign: 'center', color: 'var(--danger)', border: '1px solid rgba(239,68,68,0.2)' }}>
          {error}
        </div>
      )}

      <div className="form-card">
        <div className="form-group">
          <label>Your Startup Idea *</label>
          <textarea
            placeholder={"Describe your startup idea in detail. What problem does it solve? How does it work?\n\nExample: An AI-powered app that analyzes your food photos and tells you the exact calories, macros, and nutritional info. Users can track their daily intake just by snapping photos of meals."}
            value={idea}
            onChange={(e) => setIdea(e.target.value)}
          />
        </div>

        <div className="form-group">
          <label>Target Audience (optional)</label>
          <input
            type="text"
            placeholder="e.g., Health-conscious millennials, small business owners, college students..."
            value={audience}
            onChange={(e) => setAudience(e.target.value)}
          />
        </div>

        <div className="form-group">
          <label>Monetization Model (optional)</label>
          <select value={monetization} onChange={(e) => setMonetization(e.target.value)}>
            <option value="">Let AI suggest</option>
            <option value="subscription">Subscription (SaaS)</option>
            <option value="freemium">Freemium</option>
            <option value="marketplace">Marketplace / Commission</option>
            <option value="ads">Advertising</option>
            <option value="one-time">One-time Purchase</option>
            <option value="usage-based">Usage-based / Pay-per-use</option>
          </select>
        </div>

        {loading ? (
          <div className="loading">
            <div className="spinner" />
            <p style={{ color: 'var(--text-dim)', fontSize: '0.95rem' }}>{loadingMessages[loadingMsg]}</p>
            <p style={{ color: 'var(--border-light)', fontSize: '0.8rem', marginTop: '0.5rem' }}>Generating comprehensive analysis (may take 15-30 seconds)...</p>
          </div>
        ) : (
          <button className="btn" disabled={idea.trim().length < 20} onClick={handleValidate}>
            Validate My Idea
          </button>
        )}
      </div>
    </div>
  );
}