import React, { useState } from 'react';
import { AudioRecorderDemo } from '../../components/demo/AudioRecorderDemo';
import { ArrowRight, Sparkles } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

export function DemoPage() {
  const navigate = useNavigate();
  const [demoResult, setDemoResult] = useState<{
    fluency?: number;
    accuracy?: number;
    confidence?: number;
    feedback?: string;
  } | null>(null);

  const handleDemoComplete = (result: typeof demoResult) => {
    setDemoResult(result);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-purple-50 to-white py-12">
      <div className="max-w-4xl mx-auto px-4">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">
            Experimente Agora!
          </h1>
          <p className="text-xl text-gray-600">
            Grave um trecho de leitura e veja como nossa IA avalia seu desempenho
          </p>
        </div>

        <div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
          <div className="prose max-w-none mb-8">
            <h2>Texto Sugerido para Leitura:</h2>
            <blockquote className="text-lg text-gray-700 border-l-4 border-purple-300 pl-4">
              "O pequeno príncipe sentou-se numa pedra e levantou os olhos para o céu:
              — Pergunto-me se as estrelas são iluminadas para que cada um possa um dia encontrar a sua."
            </blockquote>
          </div>

          <AudioRecorderDemo onAnalysisComplete={handleDemoComplete} />
        </div>

        {demoResult && (
          <div className="bg-white rounded-2xl shadow-xl p-8 mb-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
              <Sparkles className="text-purple-600" />
              Resultado da Análise
            </h2>

            <div className="grid md:grid-cols-3 gap-6 mb-8">
              <div className="bg-purple-50 rounded-xl p-6">
                <div className="text-3xl font-bold text-purple-600 mb-2">
                  {demoResult.fluency}%
                </div>
                <div className="text-gray-600">Fluência</div>
              </div>
              
              <div className="bg-purple-50 rounded-xl p-6">
                <div className="text-3xl font-bold text-purple-600 mb-2">
                  {demoResult.accuracy}%
                </div>
                <div className="text-gray-600">Precisão</div>
              </div>
              
              <div className="bg-purple-50 rounded-xl p-6">
                <div className="text-3xl font-bold text-purple-600 mb-2">
                  {demoResult.confidence}%
                </div>
                <div className="text-gray-600">Confiança</div>
              </div>
            </div>

            <div className="bg-green-50 rounded-xl p-6 mb-8">
              <h3 className="text-lg font-semibold text-green-800 mb-2">
                Feedback da IA
              </h3>
              <p className="text-green-700">
                {demoResult.feedback}
              </p>
            </div>

            <div className="text-center">
              <button
                onClick={() => navigate('/register/school')}
                className="inline-flex items-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-xl hover:bg-purple-700 transition"
              >
                Começar a Usar na Minha Escola
                <ArrowRight className="w-5 h-5" />
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}