import React from 'react';
import { motion } from 'framer-motion';
import FileUploader from './FileUploader';
import { 
  DocumentTextIcon, 
  ChatBubbleBottomCenterTextIcon,
  LightBulbIcon,
  AcademicCapIcon 
} from '@heroicons/react/24/outline';

const WelcomeScreen = ({ onStartChat, onNewChat, darkMode }) => {
  const suggestions = [
    "What is depreciation in accounting?",
    "Explain the concept of working capital",
    "What are the different types of financial statements?",
    "How do you calculate return on investment?"
  ];

  const features = [
    {
      icon: DocumentTextIcon,
      title: "Upload Documents",
      description: "Upload PDFs, Word docs, and text files for instant analysis"
    },
    {
      icon: ChatBubbleBottomCenterTextIcon,
      title: "Ask Questions",
      description: "Get detailed answers based on your uploaded study materials"
    },
    {
      icon: LightBulbIcon,
      title: "Smart Insights",
      description: "AI-powered explanations tailored for CA exam preparation"
    }
  ];

  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-4">
      <div className="max-w-4xl w-full">
        {/* Hero Section */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12"
        >
          <div className="mb-6">
            <AcademicCapIcon className={`w-16 h-16 mx-auto mb-4 ${
              darkMode ? 'text-primary-400' : 'text-primary-600'
            }`} />
          </div>
          
          <h1 className="text-4xl md:text-6xl font-bold mb-6 gradient-text">
            CA Study Assistant
          </h1>
          
          <p className={`text-xl md:text-2xl mb-8 ${
            darkMode ? 'text-gray-300' : 'text-gray-600'
          }`}>
            Upload your study materials and get instant, intelligent answers
          </p>

          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={onNewChat}
            className="btn-primary px-8 py-4 rounded-xl text-lg font-semibold text-white shadow-lg"
          >
            Start New Conversation
          </motion.button>
        </motion.div>

        {/* Features */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
          className="grid md:grid-cols-3 gap-6 mb-12"
        >
          {features.map((feature, index) => (
            <motion.div
              key={index}
              whileHover={{ y: -5 }}
              className={`p-6 rounded-2xl ${
                darkMode 
                  ? 'bg-gray-800 border-gray-700' 
                  : 'bg-white border-gray-200'
              } border shadow-lg`}
            >
              <feature.icon className={`w-8 h-8 mb-4 ${
                darkMode ? 'text-primary-400' : 'text-primary-600'
              }`} />
              <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
              <p className={`${
                darkMode ? 'text-gray-400' : 'text-gray-600'
              }`}>
                {feature.description}
              </p>
            </motion.div>
          ))}
        </motion.div>

        {/* File Upload Section */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.4 }}
          className="mb-12"
        >
          <h2 className="text-2xl font-semibold text-center mb-6">
            Upload Your Study Materials
          </h2>
          <FileUploader darkMode={darkMode} />
        </motion.div>

        {/* Suggestion Pills */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.6 }}
          className="text-center"
        >
          <h3 className={`text-lg font-semibold mb-4 ${
            darkMode ? 'text-gray-300' : 'text-gray-700'
          }`}>
            Try asking:
          </h3>
          
          <div className="flex flex-wrap justify-center gap-3">
            {suggestions.map((suggestion, index) => (
              <motion.button
                key={index}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => onStartChat(suggestion)}
                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                  darkMode
                    ? 'bg-gray-800 hover:bg-gray-700 text-gray-300 border-gray-700'
                    : 'bg-gray-100 hover:bg-gray-200 text-gray-700 border-gray-300'
                } border`}
              >
                {suggestion}
              </motion.button>
            ))}
          </div>
        </motion.div>
      </div>
    </div>
  );
};

export default WelcomeScreen;