import React, { useState, useEffect, useRef } from 'react';
import { motion } from 'framer-motion';
import _ from 'lodash';

const VisionOSCarousel = () => {
  // State for carousel and navigation
  const [activeChat, setActiveChat] = useState(0);
  const [showModelDropdown, setShowModelDropdown] = useState(false);
  const [showHistoryDropdown, setShowHistoryDropdown] = useState(false);
  const [activeModel, setActiveModel] = useState('Vision GPT-4');
  const carouselRef = useRef(null);
  const [isDragging, setIsDragging] = useState(false);
  const [startX, setStartX] = useState(0);
  
  // Sample chat data
  const chats = [
    { id: 1, title: "Project Atlas", preview: "Latest updates on the Atlas project integration..." },
    { id: 2, title: "Meeting Notes", preview: "AI summary of yesterday's team meeting..." },
    { id: 3, title: "Travel Planning", preview: "Vision's suggestions for your upcoming trip..." },
    { id: 4, title: "Code Review", preview: "Analysis of the new codebase structure..." }
  ];
  
  // AI models available in the system
  const aiModels = [
    { id: 1, name: 'Vision GPT-4', icon: '🧠' },
    { id: 2, name: 'Vision Assistant', icon: '👁️' },
    { id: 3, name: 'Vision Coder', icon: '💻' },
    { id: 4, name: 'Vision Creative', icon: '🎨' }
  ];
  
  // Chat history entries
  const chatHistory = [
    { id: 101, title: "Previous Projects", date: "Mar 15" },
    { id: 102, title: "System Setup", date: "Mar 10" },
    { id: 103, title: "Design Feedback", date: "Mar 5" },
    { id: 104, title: "Initial Consultation", date: "Feb 28" }
  ];

  // Handle swipe gesture for carousel
  const handleTouchStart = (e) => {
    setIsDragging(true);
    setStartX(e.touches[0].clientX);
  };

  const handleTouchMove = (e) => {
    if (!isDragging) return;
    const currentX = e.touches[0].clientX;
    const diff = startX - currentX;
    
    if (Math.abs(diff) > 50) {
      if (diff > 0 && activeChat < chats.length - 1) {
        setActiveChat(activeChat + 1);
        setIsDragging(false);
      } else if (diff < 0 && activeChat > 0) {
        setActiveChat(activeChat - 1);
        setIsDragging(false);
      }
    }
  };

  const handleTouchEnd = () => {
    setIsDragging(false);
  };

  // Handle mouse swipe for desktop
  const handleMouseDown = (e) => {
    setIsDragging(true);
    setStartX(e.clientX);
  };

  const handleMouseMove = (e) => {
    if (!isDragging) return;
    const currentX = e.clientX;
    const diff = startX - currentX;
    
    if (Math.abs(diff) > 50) {
      if (diff > 0 && activeChat < chats.length - 1) {
        setActiveChat(activeChat + 1);
        setIsDragging(false);
      } else if (diff < 0 && activeChat > 0) {
        setActiveChat(activeChat - 1);
        setIsDragging(false);
      }
    }
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  // Navigation functions
  const nextChat = () => {
    if (activeChat < chats.length - 1) {
      setActiveChat(activeChat + 1);
    }
  };

  const prevChat = () => {
    if (activeChat > 0) {
      setActiveChat(activeChat - 1);
    }
  };

  const selectModel = (model) => {
    setActiveModel(model.name);
    setShowModelDropdown(false);
  };

  const selectHistoryChat = (chat) => {
    // In a real app, this would load the historical chat
    setShowHistoryDropdown(false);
  };

  return (
    <div className="flex flex-col h-screen bg-gradient-to-b from-blue-900 to-black text-white">
      {/* Top Navigation Bar - iPhone Dynamic Island Inspired */}
      <div className="relative z-10">
        <motion.div 
          className="mx-auto mt-2 px-6 py-2 rounded-full bg-black/60 backdrop-blur-md border border-blue-500/30 flex items-center justify-between w-64"
          initial={{ y: -50 }}
          animate={{ y: 0 }}
          transition={{ type: "spring", stiffness: 300, damping: 25 }}
        >
          <button 
            onClick={() => {
              setShowModelDropdown(!showModelDropdown);
              setShowHistoryDropdown(false);
            }}
            className="flex items-center space-x-1 text-sm"
          >
            <span className="text-blue-400">{activeModel.split(' ')[0]}</span>
            <span className="text-xs opacity-70">▼</span>
          </button>
          
          <div className="h-4 w-px bg-blue-400/30"></div>
          
          <button 
            onClick={() => {
              setShowHistoryDropdown(!showHistoryDropdown);
              setShowModelDropdown(false);
            }}
            className="flex items-center space-x-1 text-sm"
          >
            <span>History</span>
            <span className="text-xs opacity-70">▼</span>
          </button>
        </motion.div>
        
        {/* Model Selection Dropdown */}
        {showModelDropdown && (
          <motion.div 
            className="absolute top-12 left-1/2 transform -translate-x-1/2 w-64 bg-black/80 backdrop-blur-xl rounded-xl border border-blue-500/20 p-2 shadow-lg shadow-blue-500/10"
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.2 }}
          >
            {aiModels.map(model => (
              <div 
                key={model.id}
                onClick={() => selectModel(model)}
                className="flex items-center space-x-2 p-2 hover:bg-blue-900/30 rounded-lg cursor-pointer transition-colors"
              >
                <span className="text-lg">{model.icon}</span>
                <span className={activeModel === model.name ? "text-blue-400" : ""}>{model.name}</span>
                {activeModel === model.name && <span className="ml-auto text-blue-400 text-xs">✓</span>}
              </div>
            ))}
          </motion.div>
        )}
        
        {/* History Dropdown */}
        {showHistoryDropdown && (
          <motion.div 
            className="absolute top-12 left-1/2 transform -translate-x-1/2 w-64 bg-black/80 backdrop-blur-xl rounded-xl border border-blue-500/20 p-2 shadow-lg shadow-blue-500/10"
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.2 }}
          >
            {chatHistory.map(chat => (
              <div 
                key={chat.id}
                onClick={() => selectHistoryChat(chat)}
                className="flex items-center justify-between p-2 hover:bg-blue-900/30 rounded-lg cursor-pointer transition-colors"
              >
                <span>{chat.title}</span>
                <span className="text-xs opacity-50">{chat.date}</span>
              </div>
            ))}
          </motion.div>
        )}
      </div>
      
      {/* 3D Carousel Area */}
      <div 
        className="flex-1 flex items-center justify-center overflow-hidden"
        ref={carouselRef}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseUp}
      >
        <div className="relative w-full max-w-4xl h-96">
          {chats.map((chat, index) => {
            // Calculate position and transform for 3D effect
            const offset = index - activeChat;
            const isActive = index === activeChat;
            const zIndex = chats.length - Math.abs(offset);
            
            return (
              <motion.div
                key={chat.id}
                className="absolute top-0 w-72 h-80 rounded-2xl bg-gradient-to-br from-blue-900/90 to-indigo-900/90 backdrop-blur-lg border border-blue-500/20 p-4 shadow-lg shadow-blue-500/10"
                style={{
                  left: `calc(50% - 144px)`,
                  zIndex
                }}
                animate={{
                  x: offset * 60,
                  rotateY: offset * -15,
                  scale: isActive ? 1 : 0.9 - Math.abs(offset) * 0.05,
                  opacity: 1 - Math.abs(offset) * 0.2
                }}
                transition={{ type: "spring", stiffness: 300, damping: 30 }}
              >
                <div className="h-full flex flex-col">
                  <div className="flex justify-between items-center mb-3">
                    <h3 className="font-semibold text-lg text-blue-100">{chat.title}</h3>
                    <div className="h-2 w-2 rounded-full bg-blue-400"></div>
                  </div>
                  
                  <p className="text-sm text-blue-200/70 mb-4">{chat.preview}</p>
                  
                  {/* Mock chat bubbles */}
                  <div className="flex-1 overflow-hidden">
                    <div className="bg-blue-900/50 rounded-lg p-2 mb-2 ml-auto max-w-48 text-xs">
                      How can Vision help with this project?
                    </div>
                    <div className="bg-blue-600/40 rounded-lg p-2 mb-2 max-w-48 text-xs">
                      I can analyze the data and provide recommendations based on previous outcomes.
                    </div>
                    {isActive && (
                      <motion.div
                        className="bg-blue-900/50 rounded-lg p-2 max-w-48 ml-auto text-xs"
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.1 }}
                      >
                        Great. Let's see what you can find.
                      </motion.div>
                    )}
                  </div>
                  
                  {isActive && (
                    <motion.div 
                      className="mt-2 bg-blue-500/10 rounded-lg p-2 flex items-center"
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      transition={{ delay: 0.2 }}
                    >
                      <input 
                        type="text" 
                        placeholder="Message Vision..." 
                        className="bg-transparent text-sm w-full outline-none placeholder-blue-300/40"
                      />
                      <button className="ml-2 text-blue-300">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M22 2L11 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                          <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                      </button>
                    </motion.div>
                  )}
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
      
      {/* Bottom Home Bar - iPhone Style */}
      <div className="relative z-10">
        <motion.div 
          className="mx-auto mb-6 px-6 py-4 rounded-2xl bg-black/60 backdrop-blur-md border border-blue-500/20 flex items-center justify-between w-72"
          initial={{ y: 50 }}
          animate={{ y: 0 }}
          transition={{ type: "spring", stiffness: 300, damping: 25 }}
        >
          <button 
            onClick={prevChat}
            className={`w-12 h-12 flex items-center justify-center rounded-full ${activeChat > 0 ? 'bg-blue-900/50 text-blue-300' : 'bg-blue-900/20 text-blue-300/30'}`}
            disabled={activeChat === 0}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 18L9 12L15 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          
          <div className="w-20 h-1 bg-blue-400/30 rounded-full"></div>
          
          <button 
            onClick={nextChat}
            className={`w-12 h-12 flex items-center justify-center rounded-full ${activeChat < chats.length - 1 ? 'bg-blue-900/50 text-blue-300' : 'bg-blue-900/20 text-blue-300/30'}`}
            disabled={activeChat === chats.length - 1}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 6L15 12L9 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </motion.div>
      </div>
    </div>
  );
};

export default VisionOSCarousel;