import React, { useState, useEffect } from 'react';
import { Shield, Lock, Eye, CheckCircle, AlertTriangle, RefreshCcw, Award, ChevronRight, Info } from 'lucide-react';

const App = () => {
  const [stage, setStage] = useState('intro'); // intro, training, quiz, result, certificate
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [answers, setAnswers] = useState([]);
  const [quizFinished, setQuizFinished] = useState(false);

  // Training content points
  const trainingPoints = [
    {
      title: "Protect Your Credentials",
      icon: <Lock className="w-6 h-6 text-red-500" />,
      content: "Never hard-code API keys in your scripts or upload them to version control (GitHub). Use environment variables and .gitignore files to keep secrets private."
    },
    {
      title: "Data Anonymization",
      icon: <Eye className="w-6 h-6 text-orange-500" />,
      content: "Before sending data to a cloud-based AI, remove all Personally Identifiable Information (PII) like names, emails, or IDs unless you are using an enterprise-grade, private instance."
    },
    {
      title: "The Hallucination Factor",
      icon: <AlertTriangle className="w-6 h-6 text-yellow-500" />,
      content: "AI can confidently generate incorrect code or false statistical conclusions. Always verify the logic of AI-generated snippets and cross-check data insights."
    },
    {
      title: "Library Hijacking",
      icon: <Shield className="w-6 h-6 text-blue-500" />,
      content: "AI might suggest non-existent or malicious Python/R packages. Always verify that a library is legitimate and widely used before installing it in your environment."
    },
    {
      title: "Bias Awareness",
      icon: <CheckCircle className="w-6 h-6 text-green-500" />,
      content: "AI models often mirror biases present in their training data. Critically evaluate if your analysis is reinforcing stereotypes or ignoring specific demographic nuances."
    }
  ];

  const questions = [
    {
      question: "Where is the safest place to store an AI API key for a Python project?",
      options: [
        "Inside a comment at the top of the main script",
        "In a .env file that is excluded via .gitignore",
        "In a public GitHub repository for easy access by the team",
        "Directly in the variable definition: apiKey = 'sk-123...'"
      ],
      correct: 1
    },
    {
      question: "You need to analyze a customer dataset using a public LLM. What should you do first?",
      options: [
        "Upload the CSV immediately to get fast results",
        "Ask the AI if it is safe to upload data",
        "Strip all PII (names, phone numbers, addresses) from the dataset",
        "Zip the file and password protect it before uploading"
      ],
      correct: 2
    },
    {
      question: "The AI suggests using a library called 'pandas-ultra-secure' for data cleaning. You've never heard of it. What is the best practice?",
      options: [
        "Install it immediately as AI knows the latest tools",
        "Check PyPI/NPM for the package's reputation and source code",
        "Trust the AI's recommendation but run it as an admin",
        "Only use it if the AI provides a code example"
      ],
      correct: 1
    },
    {
      question: "What does 'Human-in-the-Loop' mean in AI data analysis?",
      options: [
        "Hiring someone to type what the AI says",
        "A human must review and validate AI outputs before they are used for decision making",
        "The AI is part of a human network",
        "Training the AI on human skeletons"
      ],
      correct: 1
    },
    {
      question: "An AI provides a complex SQL query for your database. It runs without errors. Should you trust the results?",
      options: [
        "Yes, if it runs, the logic is definitely correct",
        "No, you must verify the logic ensures the query actually answers the intended question",
        "Yes, AI is better at SQL than humans",
        "Only if the execution time was fast"
      ],
      correct: 1
    },
    {
      question: "Which of these is a 'Hallucination' in data analysis?",
      options: [
        "The AI becoming self-aware",
        "The AI generating a visualization that looks like a ghost",
        "The AI inventing a statistical trend or fact that doesn't exist in the data",
        "The computer monitor flickering"
      ],
      correct: 2
    },
    {
      question: "When using AI for automated reporting, why is data bias a concern?",
      options: [
        "It makes the reports look unprofessional",
        "AI might ignore or misinterpret data from minority groups if the training data was skewed",
        "Bias causes the AI to use more electricity",
        "Bias only matters in social media, not data science"
      ],
      correct: 1
    },
    {
      question: "If you accidentally push an API key to a public repo, what is the correct response?",
      options: [
        "Delete the file and commit again",
        "Ignore it; nobody will find it among millions of repos",
        "Immediately revoke (delete) the key on the provider's dashboard and generate a new one",
        "Edit the commit history to hide the key"
      ],
      correct: 2
    },
    {
      question: "What is the primary risk of using 'Prompt Injection' on your own data analysis scripts?",
      options: [
        "It makes the AI run faster",
        "Unauthorized users could manipulate the AI to reveal sensitive system info or bypass filters",
        "It helps the AI understand the data better",
        "There is no risk to internal scripts"
      ],
      correct: 1
    },
    {
      question: "According to safety guidelines, AI is best used as a:",
      options: [
        "Replacement for junior data analysts",
        "Co-pilot or assistant that requires expert supervision",
        "Source of absolute truth for all business metrics",
        "Fully autonomous system for financial reporting"
      ],
      correct: 1
    }
  ];

  const handleAnswer = (index) => {
    const newAnswers = [...answers];
    newAnswers[currentQuestion] = index;
    setAnswers(newAnswers);
  };

  const nextQuestion = () => {
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      finishQuiz();
    }
  };

  const finishQuiz = () => {
    let finalScore = 0;
    answers.forEach((ans, idx) => {
      if (ans === questions[idx].correct) finalScore++;
    });
    setScore(finalScore);
    setStage('result');
  };

  const restart = () => {
    setStage('intro');
    setCurrentQuestion(0);
    setAnswers([]);
    setScore(0);
  };

  const proceedToQuiz = () => setStage('quiz');
  const startTraining = () => setStage('training');

  const renderIntro = () => (
    <div className="flex flex-col items-center text-center space-y-6 animate-in fade-in duration-700">
      <div className="p-4 bg-blue-100 rounded-full">
        <Shield className="w-16 h-16 text-blue-600" />
      </div>
      <h1 className="text-4xl font-extrabold text-slate-800">AI Data Analysis Safety</h1>
      <p className="text-lg text-slate-600 max-w-md">
        Welcome to the team safety certification. Learn the essentials of developing with AI and test your knowledge.
      </p>
      <button 
        onClick={startTraining}
        className="px-8 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-all shadow-lg hover:shadow-xl active:scale-95"
      >
        Start Training
      </button>
    </div>
  );

  const renderTraining = () => (
    <div className="space-y-8 animate-in slide-in-from-bottom-4 duration-500">
      <div className="border-b pb-4">
        <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
          <Info className="text-blue-500" /> Core Safety Principles
        </h2>
        <p className="text-slate-500 italic mt-1">Review these points carefully before the quiz.</p>
      </div>
      
      <div className="grid gap-4">
        {trainingPoints.map((point, i) => (
          <div key={i} className="flex gap-4 p-5 bg-white border border-slate-200 rounded-xl hover:border-blue-300 transition-colors shadow-sm">
            <div className="mt-1">{point.icon}</div>
            <div>
              <h3 className="font-bold text-slate-800">{point.title}</h3>
              <p className="text-slate-600 text-sm leading-relaxed">{point.content}</p>
            </div>
          </div>
        ))}
      </div>

      <button 
        onClick={proceedToQuiz}
        className="w-full py-4 bg-slate-800 text-white rounded-xl font-bold hover:bg-slate-900 transition-all flex items-center justify-center gap-2"
      >
        I'm Ready for the Quiz <ChevronRight className="w-5 h-5" />
      </button>
    </div>
  );

  const renderQuiz = () => {
    const q = questions[currentQuestion];
    const progress = ((currentQuestion + 1) / questions.length) * 100;

    return (
      <div className="space-y-6">
        <div className="flex justify-between items-end">
          <span className="text-sm font-bold text-blue-600 uppercase tracking-wider">Question {currentQuestion + 1} of {questions.length}</span>
          <span className="text-xs text-slate-400 font-medium">Score: {answers.filter((a, i) => a === questions[i].correct).length}</span>
        </div>
        
        <div className="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
          <div className="bg-blue-500 h-full transition-all duration-300" style={{ width: `${progress}%` }}></div>
        </div>

        <h2 className="text-xl font-bold text-slate-800 leading-tight min-h-[3rem]">
          {q.question}
        </h2>

        <div className="grid gap-3">
          {q.options.map((opt, i) => (
            <button
              key={i}
              onClick={() => handleAnswer(i)}
              className={`p-4 text-left rounded-xl border-2 transition-all ${
                answers[currentQuestion] === i 
                  ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-200' 
                  : 'border-slate-100 bg-slate-50 hover:border-slate-300'
              }`}
            >
              <div className="flex items-center gap-3">
                <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                  answers[currentQuestion] === i ? 'border-blue-500 bg-blue-500' : 'border-slate-300'
                }`}>
                  {answers[currentQuestion] === i && <div className="w-2 h-2 bg-white rounded-full"></div>}
                </div>
                <span className={`text-sm font-medium ${answers[currentQuestion] === i ? 'text-blue-900' : 'text-slate-700'}`}>
                  {opt}
                </span>
              </div>
            </button>
          ))}
        </div>

        <button
          disabled={answers[currentQuestion] === undefined}
          onClick={nextQuestion}
          className={`w-full py-4 rounded-xl font-bold transition-all flex items-center justify-center gap-2 ${
            answers[currentQuestion] === undefined 
              ? 'bg-slate-200 text-slate-400 cursor-not-allowed' 
              : 'bg-blue-600 text-white hover:bg-blue-700 shadow-lg'
          }`}
        >
          {currentQuestion === questions.length - 1 ? 'Finish Quiz' : 'Next Question'}
        </button>
      </div>
    );
  };

  const renderResult = () => {
    const passed = score >= 8; // Max 2 wrong = 8/10
    const perfect = score === 10;

    return (
      <div className="text-center space-y-8 animate-in zoom-in-95 duration-500">
        <div className="space-y-2">
          <h2 className="text-3xl font-black text-slate-800">Quiz Complete</h2>
          <div className="inline-block px-4 py-2 bg-slate-100 rounded-full text-slate-600 font-mono text-xl">
            Final Score: <span className={passed ? 'text-green-600' : 'text-red-600'}>{score}</span> / 10
          </div>
        </div>

        {perfect ? (
          <div className="p-8 bg-green-50 border-2 border-green-200 rounded-3xl space-y-4">
            <Award className="w-16 h-16 text-green-600 mx-auto" />
            <h3 className="text-2xl font-bold text-green-800">Perfect Score!</h3>
            <p className="text-green-700">You are officially a Safety Champion. You've demonstrated full mastery of AI data analysis security.</p>
            <div className="pt-4">
               <div className="border-4 border-dashed border-green-300 p-6 rounded-xl bg-white rotate-1">
                  <p className="text-xs text-slate-400 uppercase tracking-widest font-bold">Official Certification</p>
                  <p className="text-xl font-serif font-bold text-slate-800 mt-2">AI Safety Certified</p>
                  <p className="text-sm text-slate-500 mt-1">Verified Expert Level</p>
               </div>
            </div>
          </div>
        ) : passed ? (
          <div className="p-8 bg-blue-50 border border-blue-100 rounded-3xl space-y-4">
            <CheckCircle className="w-16 h-16 text-blue-500 mx-auto" />
            <h3 className="text-2xl font-bold text-blue-800">Well Done!</h3>
            <p className="text-blue-700">You passed the training. You missed {10 - score} question(s), but you have a strong grasp of safe AI practices.</p>
          </div>
        ) : (
          <div className="p-8 bg-red-50 border border-red-100 rounded-3xl space-y-4">
            <RefreshCcw className="w-16 h-16 text-red-500 mx-auto animate-spin-slow" />
            <h3 className="text-2xl font-bold text-red-800">Not Quite There</h3>
            <p className="text-red-700">You missed {10 - score} questions. For team security compliance, you must get at least 8/10 to pass. Please review and try again.</p>
            <button 
              onClick={restart}
              className="mt-4 px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
            >
              Back to Start
            </button>
          </div>
        )}

        <div className="space-y-4 text-left border-t pt-8">
          <h4 className="font-bold text-slate-700">Review Your Answers:</h4>
          <div className="grid gap-3 max-h-64 overflow-y-auto pr-2">
            {questions.map((q, i) => (
              <div key={i} className={`p-3 rounded-lg text-sm border ${answers[i] === q.correct ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'}`}>
                <p className="font-semibold">{i + 1}. {q.question}</p>
                <p className={answers[i] === q.correct ? 'text-green-700' : 'text-red-700'}>
                  Your answer: {q.options[answers[i]]}
                </p>
                {answers[i] !== q.correct && (
                  <p className="text-green-700 font-medium">Correct answer: {q.options[q.correct]}</p>
                )}
              </div>
            ))}
          </div>
        </div>

        {passed && (
          <button 
            onClick={restart}
            className="w-full py-4 bg-slate-800 text-white rounded-xl font-bold hover:bg-slate-900 transition-all"
          >
            Finished
          </button>
        )}
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 font-sans text-slate-900">
      <div className="w-full max-w-2xl bg-white rounded-[2rem] shadow-2xl overflow-hidden border border-slate-200">
        {/* Header Decor */}
        <div className="h-2 bg-gradient-to-r from-blue-400 via-indigo-500 to-purple-600"></div>
        
        <div className="p-8 md:p-12">
          {stage === 'intro' && renderIntro()}
          {stage === 'training' && renderTraining()}
          {stage === 'quiz' && renderQuiz()}
          {stage === 'result' && renderResult()}
        </div>
        
        {/* Footer info */}
        <div className="bg-slate-50 px-8 py-4 text-center border-t">
          <p className="text-xs text-slate-400 flex items-center justify-center gap-1">
             AI Safety Internal Training Module <Shield className="w-3 h-3" /> v1.0
          </p>
        </div>
      </div>
      
      <style dangerouslySetInnerHTML={{ __html: `
        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slide-in-from-bottom-4 { from { transform: translateY(1rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @keyframes zoom-in-95 { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .animate-in { animation-fill-mode: both; }
        .fade-in { animation-name: fade-in; }
        .slide-in-from-bottom-4 { animation-name: slide-in-from-bottom-4; }
        .zoom-in-95 { animation-name: zoom-in-95; }
        .duration-500 { animation-duration: 500ms; }
        .duration-700 { animation-duration: 700ms; }
        .animate-spin-slow { animation: spin 8s linear infinite; }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      `}} />
    </div>
  );
};

export default App;