App.tsx

import React, { useState } from 'react';
import { analyzeFeedback } from './services/geminiService';
import { AnalysisResult } from './types';
import { ResultCard } from './components/ResultCard';

const App: React.FC = () => {
  const [inputText, setInputText] = useState('');
  const [result, setResult] = useState<AnalysisResult | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleAnalyze = async () => {
    if (!inputText.trim()) {
      setError("Please enter some text to analyze.");
      return;
    }

    setIsLoading(true);
    setError(null);
    setResult(null);

    try {
      const data = await analyzeFeedback(inputText);
      setResult(data);
    } catch (err: any) {
      setError(err.message || "Something went wrong.");
    } finally {
      setIsLoading(false);
    }
  };

  const handleClear = () => {
    setInputText('');
    setResult(null);
    setError(null);
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-indigo-100 selection:text-indigo-800">
      <div className="max-w-4xl mx-auto px-4 py-12 md:py-20">
        
        {/* Header */}
        <div className="text-center mb-10">
          <div className="inline-flex items-center justify-center p-3 mb-4 bg-white rounded-xl shadow-sm border border-slate-200">
             <svg className="w-8 h-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-3 tracking-tight">
            Sentiment Analyzer
          </h1>
          <p className="text-lg text-slate-500 max-w-xl mx-auto">
            Paste your customer feedback below to instantly uncover sentiments, pain points, and positive highlights.
          </p>
        </div>

        {/* Main Content Area */}
        <div className="flex flex-col items-center space-y-8">
          
          {/* Input Section */}
          <div className="w-full max-w-2xl bg-white p-2 rounded-2xl shadow-sm border border-slate-200 focus-within:ring-4 focus-within:ring-indigo-500/10 focus-within:border-indigo-400 transition-all duration-300">
            <textarea
              className="w-full h-40 p-4 bg-transparent border-none rounded-xl text-slate-700 placeholder:text-slate-400 focus:ring-0 text-lg resize-y min-h-[160px]"
              placeholder="Paste customer feedback here..."
              value={inputText}
              onChange={(e) => setInputText(e.target.value)}
              spellCheck={false}
            />
            <div className="flex justify-between items-center px-4 pb-2 pt-2 border-t border-slate-100">
               <span className="text-xs text-slate-400 font-medium">
                {inputText.length} characters
               </span>
               <div className="flex items-center space-x-2">
                 <button
                    onClick={handleClear}
                    disabled={isLoading || (!inputText && !result && !error)}
                    className={`
                      px-4 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200
                      ${isLoading || (!inputText && !result && !error) 
                        ? 'text-slate-300 cursor-not-allowed' 
                        : 'text-slate-500 hover:text-slate-800 hover:bg-slate-100'}
                    `}
                  >
                    Clear
                  </button>
                 <button
                  onClick={handleAnalyze}
                  disabled={isLoading || !inputText.trim()}
                  className={`
                    flex items-center space-x-2 px-6 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200
                    ${isLoading || !inputText.trim() 
                      ? 'bg-slate-100 text-slate-400 cursor-not-allowed' 
                      : 'bg-indigo-600 hover:bg-indigo-700 text-white shadow-lg shadow-indigo-200 hover:shadow-indigo-300 transform hover:-translate-y-0.5 active:translate-y-0'}
                  `}
                >
                  {isLoading ? (
                    <>
                      <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                      <span>Analyzing...</span>
                    </>
                  ) : (
                    <>
                      <span>Analyze Feedback</span>
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
                      </svg>
                    </>
                  )}
                </button>
               </div>
            </div>
          </div>

          {/* Error Message */}
          {error && (
            <div className="w-full max-w-2xl bg-red-50 text-red-600 px-4 py-3 rounded-xl border border-red-100 flex items-center animate-pulse">
               <svg className="w-5 h-5 mr-2 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <span>{error}</span>
            </div>
          )}

          {/* Results Area */}
          {result && (
            <ResultCard result={result} />
          )}
          
          {/* Empty State / Prompt (Optional decoration when no result) */}
          {!result && !isLoading && !error && (
             <div className="pt-8 text-center opacity-40 select-none pointer-events-none">
                <div className="grid grid-cols-3 gap-4 max-w-lg mx-auto mb-4">
                  <div className="h-24 bg-slate-200 rounded-lg"></div>
                  <div className="h-24 bg-slate-200 rounded-lg"></div>
                  <div className="h-24 bg-slate-200 rounded-lg"></div>
                </div>
                <p className="text-sm text-slate-400">Powered by Gemini 2.5 Flash</p>
             </div>
          )}

        </div>
      </div>
    </div>
  );
};

export default App;