import { useState } from 'react';
import { ArrowRight, BarChart2, RefreshCw, Send } from 'lucide-react';

export default function YCSimulator() {
  const [response, setResponse] = useState('');
  const [feedback, setFeedback] = useState(null);
  const [strength, setStrength] = useState(0);
  
  const analyzeResponse = () => {
    // Simulate analysis of response
    const keywords = ['market', 'growth', 'revenue', 'users', 'problem', 'solution', 'traction'];
    const foundKeywords = keywords.filter(word => 
      response.toLowerCase().includes(word)
    );
    
    const newStrength = Math.min(100, foundKeywords.length * 15);
    setStrength(newStrength);
    
    const recommendations = [];
    if (!response.includes('market')) recommendations.push('Consider addressing market size and potential');
    if (!response.includes('growth')) recommendations.push('Include growth metrics or projections');
    if (!response.includes('revenue')) recommendations.push('Mention revenue model or current revenue');
    
    setFeedback({
      score: newStrength,
      recommendations: recommendations.length ? recommendations : ['Strong response! Keep it concise and data-driven.']
    });
  };

  return (
    <div className="max-w-3xl mx-auto p-6 bg-white rounded-xl shadow-lg">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-gray-800 mb-2">Y Combinator Response Simulator</h1>
        <p className="text-gray-600">Test and improve your startup pitch responses</p>
      </div>

      <div className="space-y-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Your Response
          </label>
          <textarea
            value={response}
            onChange={(e) => setResponse(e.target.value)}
            className="w-full h-32 p-4 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            placeholder="Enter your response to a YC interview question..."
          />
        </div>

        <button
          onClick={analyzeResponse}
          className="flex items-center justify-center w-full py-3 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          Analyze Response <Send className="ml-2 h-4 w-4" />
        </button>

        {feedback && (
          <div className="mt-8 space-y-6">
            <div className="bg-gray-50 p-6 rounded-lg">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-semibold text-gray-800">Response Strength</h2>
                <div className="flex items-center">
                  <BarChart2 className="h-5 w-5 text-blue-600 mr-2" />
                  <span className="text-xl font-bold text-blue-600">{strength}%</span>
                </div>
              </div>
              
              <div className="w-full bg-gray-200 rounded-full h-2.5">
                <div 
                  className="bg-blue-600 h-2.5 rounded-full transition-all duration-500"
                  style={{ width: `${strength}%` }}
                ></div>
              </div>
            </div>

            <div className="bg-gray-50 p-6 rounded-lg">
              <h2 className="text-lg font-semibold text-gray-800 mb-4">Recommendations</h2>
              <ul className="space-y-3">
                {feedback.recommendations.map((rec, index) => (
                  <li key={index} className="flex items-start">
                    <ArrowRight className="h-5 w-5 text-blue-600 mr-2 flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700">{rec}</span>
                  </li>
                ))}
              </ul>
            </div>

            <button
              onClick={() => {
                setResponse('');
                setFeedback(null);
                setStrength(0);
              }}
              className="flex items-center justify-center w-full py-3 px-4 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
            >
              Try Another Response <RefreshCw className="ml-2 h-4 w-4" />
            </button>
          </div>
        )}
      </div>
    </div>
  );
}