"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Mic, Cog, Play, BarChart3, HelpCircle, PieChart, BrainCircuit } from "lucide-react"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Card } from "@/components/ui/card"
import { ReasoningBasic } from "@/components/prompt-reasoning"
import Image from "next/image"
import { HeroVideoDialogComponent } from "@/components/HeroVideo"

type ContentMode = "default" | "video" | "graph" | "quiz" | "visualize"

export default function CluelyChatInterface() {
  const [activeMode, setActiveMode] = useState<ContentMode>("default")

  const handleModeChange = (mode: ContentMode) => {
    setActiveMode(mode)
  }

  const renderContent = () => {
    switch (activeMode) {
      case "video":
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, ease: "easeOut" }}
            className="space-y-4"
          >
            <div className="bg-black rounded-lg aspect-video flex items-center justify-center relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-br from-blue-900 to-purple-900"></div>
              <div className="relative z-10 text-center text-white">
                <HeroVideoDialogComponent />
              </div>
            </div>
            <div className="text-sm text-gray-700">
              <p className="font-medium mb-2">Video Overview:</p>
              <p>
                This video covers the fundamental concepts of probability theory, including sample spaces, events, and
                basic probability calculations. Perfect for beginners looking to understand the mathematical
                foundations.
              </p>
            </div>
          </motion.div>
        )

      case "graph":
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, ease: "easeOut" }}
            className="space-y-4"
          >
            <h3 className="text-base font-semibold text-gray-800">Probability Distribution</h3>
            <div className="bg-gray-50 rounded-lg p-4">
              <div className="flex items-end justify-center space-x-2 h-32">
                {[0.1, 0.3, 0.8, 1.0, 0.7, 0.4, 0.2].map((height, index) => (
                  <div key={index} className="flex flex-col items-center">
                    <motion.div
                      initial={{ height: 0 }}
                      animate={{ height: `${height * 80}px` }}
                      transition={{ duration: 0.8, delay: index * 0.1, ease: "easeOut" }}
                      className="bg-blue-500 w-8 rounded-t"
                    ></motion.div>
                    <span className="text-xs text-gray-600 mt-1">{index + 1}</span>
                  </div>
                ))}
              </div>
              <div className="text-center mt-4">
                <p className="text-sm text-gray-600">Normal Distribution Example</p>
              </div>
            </div>
            <p className="text-sm text-gray-700">
              This graph shows a typical bell curve distribution, demonstrating how probability values are distributed
              across different outcomes.
            </p>
          </motion.div>
        )

      case "quiz":
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, ease: "easeOut" }}
            className="space-y-4"
          >
            <h3 className="text-base font-semibold text-gray-800">Probability Quiz</h3>
            <div className="space-y-4">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.1, ease: "easeOut" }}
              >
                <Card className="p-4">
                  <p className="font-medium text-sm mb-3">
                    1. What is the probability of getting heads when flipping a fair coin?
                  </p>
                  <div className="space-y-2">
                    <Button variant="outline" size="sm" className="w-full justify-start text-xs bg-transparent">
                      A) 0.25
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full justify-start text-xs bg-green-50 border-green-200"
                    >
                      B) 0.5 ✓
                    </Button>
                    <Button variant="outline" size="sm" className="w-full justify-start text-xs bg-transparent">
                      C) 0.75
                    </Button>
                    <Button variant="outline" size="sm" className="w-full justify-start text-xs bg-transparent">
                      D) 1.0
                    </Button>
                  </div>
                </Card>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
              >
                <Card className="p-4">
                  <p className="font-medium text-sm mb-3">
                    2. If you roll a six-sided die, what&apos;s the probability of getting a number greater than 4?
                  </p>
                  <div className="space-y-2">
                    <Button variant="outline" size="sm" className="w-full justify-start text-xs bg-transparent">
                      A) 1/6
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      className="w-full justify-start text-xs bg-green-50 border-green-200"
                    >
                      B) 2/6 or 1/3 ✓
                    </Button>
                    <Button variant="outline" size="sm" className="w-full justify-start text-xs bg-transparent">
                      C) 3/6 or 1/2
                    </Button>
                    <Button variant="outline" size="sm" className="w-full justify-start text-xs bg-transparent">
                      D) 4/6 or 2/3
                    </Button>
                  </div>
                </Card>
              </motion.div>
            </div>
          </motion.div>
        )

      case "visualize":
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, ease: "easeOut" }}
            className="space-y-4"
          >
            <h3 className="text-base font-semibold text-gray-800">Probability Visualization</h3>
            <div className="bg-gray-50 rounded-lg p-4">
              <div className="flex justify-center">
                <div className="relative w-32 h-32">
                  <svg className="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="40" fill="none" stroke="#e5e7eb" strokeWidth="8" />
                    <motion.circle
                      cx="50"
                      cy="50"
                      r="40"
                      fill="none"
                      stroke="#3b82f6"
                      strokeWidth="8"
                      strokeDasharray={`${2 * Math.PI * 40 * 0.3} ${2 * Math.PI * 40}`}
                      strokeLinecap="round"
                      initial={{ strokeDashoffset: 2 * Math.PI * 40 }}
                      animate={{ strokeDashoffset: 0 }}
                      transition={{ duration: 1.5, ease: "easeOut" }}
                    />
                    <motion.circle
                      cx="50"
                      cy="50"
                      r="40"
                      fill="none"
                      stroke="#ef4444"
                      strokeWidth="8"
                      strokeDasharray={`${2 * Math.PI * 40 * 0.7} ${2 * Math.PI * 40}`}
                      strokeDashoffset={`-${2 * Math.PI * 40 * 0.3}`}
                      strokeLinecap="round"
                      initial={{ strokeDashoffset: 2 * Math.PI * 40 }}
                      animate={{ strokeDashoffset: `-${2 * Math.PI * 40 * 0.3}` }}
                      transition={{ duration: 2, delay: 0.5, ease: "easeOut" }}
                    />
                  </svg>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="text-center">
                      <div className="text-lg font-bold text-gray-800">70%</div>
                      <div className="text-xs text-gray-600">Success</div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="flex justify-center space-x-4 mt-4">
                <div className="flex items-center">
                  <div className="w-3 h-3 bg-blue-500 rounded mr-2"></div>
                  <span className="text-sm text-gray-600">Success (30%)</span>
                </div>
                <div className="flex items-center">
                  <div className="w-3 h-3 bg-red-500 rounded mr-2"></div>
                  <span className="text-sm text-gray-600">Failure (70%)</span>
                </div>
              </div>
            </div>
            <p className="text-sm text-gray-700">
              This pie chart visualizes the probability distribution of a binary outcome, showing the relative
              likelihood of success vs failure.
            </p>
          </motion.div>
        )

      default:
        return (
          <div className="space-y-3 text-gray-700 font-medium leading-relaxed text-xs sm:text-xs">
            <div className="mb-2">
              <ReasoningBasic />
            </div>
            <Image
              src="https://uvlyuejsnssradbmyiza.supabase.co/storage/v1/object/public/prejee//plot-01T06_01_11.240040-10ef9dde-5bd5-436f-9452-47c4fbe60e96--A20showing20probability20of20heads20320tosses20with.png"
              alt="Probability Graph"
              width={250}
              height={200}
              className="rounded-lg shadow-md"
            />
            <p>
              Hey Roy! I see you&apos;re taking a break from your side project 😉. Then let&apos;s dive into the world of probability together. Probability measures the likelihood of an event and ranges from 0 to 1. We&apos;ll cover key concepts like sample space, events, and probability rules.
            </p>

            <h3 className="text-base font-semibold text-gray-800 mt-4 mb-2">Key Concepts in Probability</h3>

            <p>
              Probability means the chances of occurence of an event. It quantifies how likely an event is to happen, expressed as a number between 0 (impossible) and 1 (certain). For example, the probability of flipping heads on a fair coin is 0.5. The cornerstone of probability theory is the probability space, which consists of three fundamental components: the sample space (Ω), the event space (F), and the probability measure (P).
            </p>

            <div className="mt-4">
              <h4 className="text-base font-semibold text-gray-800 mb-2">Features:</h4>
              <div className="space-y-1.5">
                <div className="flex gap-1.5">
                  <span className="text-gray-700 font-medium">1.</span>
                  <div>
                    <span className="font-semibold text-gray-800">Sample Space and Events:</span>
                    <span className="text-gray-700">
                      {" "}
                      Sample Space (Ω) represents all possible outcomes while Event (E) is a subset of the sample space.
                    </span>
                  </div>
                </div>
                <div className="flex gap-1.5">
                  <span className="text-gray-700 font-medium">2.</span>
                  <div>
                    <span className="font-semibold text-gray-800">Probability Rules:</span>
                    <span className="text-gray-700"> For mutually exclusive events, P(A ∪ B) = P(A) + P(B). For non-mutually exclusive events, P(A ∪ B) = P(A) + P(B) - P(A ∩ B). There are also Multiplication and Complement rules.</span>
                  </div>
                </div>
                <div className="flex gap-1.5">
                  <span className="text-gray-700 font-medium">3.</span>
                  <div>
                    <span className="font-semibold text-gray-800">Conditional Probability and Bayes&apos; Theorem:</span>
                    <span className="text-gray-700">
                      {" "}
                      Conditional Probability is the probability of an event given another has occurred and Bayes&apos; Theorem updates the probability of a hypothesis based on new evidence.
                    </span>
                  </div>
                </div>
                <h4 className="text-base font-semibold text-gray-800 mb-2">Example: Drawing a Card</h4>
                <div className="space-y-1.5">
                  What&apos;s the probability of drawing a king from a standard deck, given the first card is a heart?
                  <div className="flex gap-1.5 mt-2">
                    <span className="text-gray-700 font-medium">1.</span>
                    <div>
                      <span className="font-semibold text-gray-800">Identify the sample space:</span>
                      <span className="text-gray-700">
                        {" "}
                        52 cards.
                      </span>
                    </div>
                  </div>
                  <div className="flex gap-1.5 mt-2">
                    <span className="text-gray-700 font-medium">2.</span>
                    <div>
                      <span className="font-semibold text-gray-800">Identify the event:</span>
                      <span className="text-gray-700">
                        {" "}
                        Drawing a king.
                      </span>
                    </div>
                  </div>
                  <div className="flex gap-1.5 mt-2">
                    <span className="text-gray-700 font-medium">3.</span>
                    <div>
                      <span className="font-semibold text-gray-800">Apply conditional probability:</span>
                      <span className="text-gray-700">
                        {" "}
                        Since there are 13 hearts and one is a king, we need to determine if being a heart affects being a king.
                      </span>
                    </div>
                  </div>
                </div>
                <div className="space-y-1.5">
                  Let&apos;s break it down:
                  <div className="flex gap-1.5 mt-2">
                    <span className="text-gray-700 font-medium">●</span>
                    <div>
                      <span className="text-gray-700">
                        {" "}
                        Probability of drawing a king: 4/52 (since there are 4 kings).
                      </span>
                    </div>
                  </div>
                  <div className="flex gap-1.5 mt-2">
                    <span className="text-gray-700 font-medium">●</span>
                    <div>
                      <span className="text-gray-700">
                        {" "}
                        Probability of drawing a king given it&apos;s a heart: 1/13 (since there&apos;s 1 king of hearts among 13 hearts).
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )
    }
  }

  return (
    <div className="w-full max-w-2xl mx-auto bg-transparent rounded-2xl p-2 sm:p-4 font-sans">
      {/* Header */}
      <div className="bg-white rounded-md p-3 mb-4 sm:mb-6">
        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
            <div className="bg-blue-600 rounded-full px-2.5 py-1 flex items-center gap-2">
              <Mic className="w-3 h-3 text-white" />
            </div>
            <span className="text-gray-800 font-medium text-sm truncate">teach me about probability...</span>
          </div>
          <div className="flex items-center gap-1 flex-shrink-0">
            <Button
              variant={activeMode === "video" ? "default" : "outline"}
              size="sm"
              onClick={() => handleModeChange("video")}
              className={`flex items-center gap-1.5 text-xs transition-all duration-300 ease-in-out overflow-hidden cursor-pointer ${activeMode === "video" ? "w-auto px-3" : "w-8 h-8 p-0"
                }`}
            >
              <Play className="w-3.5 h-3.5 flex-shrink-0" />
              <motion.span
                initial={false}
                animate={{
                  opacity: activeMode === "video" ? 1 : 0,
                  width: activeMode === "video" ? "auto" : 0,
                }}
                transition={{ duration: 0.3, ease: "easeInOut" }}
                className="whitespace-nowrap overflow-hidden"
              >
                Video
              </motion.span>
            </Button>
            <Button
              variant={activeMode === "graph" ? "default" : "outline"}
              size="sm"
              onClick={() => handleModeChange("graph")}
              className={`flex items-center gap-1.5 text-xs transition-all duration-300 ease-in-out overflow-hidden cursor-pointer ${activeMode === "graph" ? "w-auto px-3" : "w-8 h-8 p-0"
                }`}
            >
              <BarChart3 className="w-3.5 h-3.5 flex-shrink-0" />
              <motion.span
                initial={false}
                animate={{
                  opacity: activeMode === "graph" ? 1 : 0,
                  width: activeMode === "graph" ? "auto" : 0,
                }}
                transition={{ duration: 0.3, ease: "easeInOut" }}
                className="whitespace-nowrap overflow-hidden"
              >
                Graph
              </motion.span>
            </Button>
            <Button
              variant={activeMode === "quiz" ? "default" : "outline"}
              size="sm"
              onClick={() => handleModeChange("quiz")}
              className={`flex items-center gap-1.5 text-xs transition-all duration-300 ease-in-out overflow-hidden cursor-pointer ${activeMode === "quiz" ? "w-auto px-3" : "w-8 h-8 p-0"
                }`}
            >
              <HelpCircle className="w-3.5 h-3.5 flex-shrink-0" />
              <motion.span
                initial={false}
                animate={{
                  opacity: activeMode === "quiz" ? 1 : 0,
                  width: activeMode === "quiz" ? "auto" : 0,
                }}
                transition={{ duration: 0.3, ease: "easeInOut" }}
                className="whitespace-nowrap overflow-hidden"
              >
                Quiz
              </motion.span>
            </Button>
            <Button
              variant={activeMode === "visualize" ? "default" : "outline"}
              size="sm"
              onClick={() => handleModeChange("visualize")}
              className={`flex items-center gap-1.5 text-xs transition-all duration-300 ease-in-out overflow-hidden cursor-pointer ${activeMode === "visualize" ? "w-auto px-3" : "w-8 h-8 p-0"
                }`}
            >
              <PieChart className="w-3.5 h-3.5 flex-shrink-0" />
              <motion.span
                initial={false}
                animate={{
                  opacity: activeMode === "visualize" ? 1 : 0,
                  width: activeMode === "visualize" ? "auto" : 0,
                }}
                transition={{ duration: 0.3, ease: "easeInOut" }}
                className="whitespace-nowrap overflow-hidden"
              >
                Visualize
              </motion.span>
            </Button>
            <div className="w-px h-5 bg-gray-300 mx-1"></div>
            <button className="inline-flex items-center justify-center rounded-md bg-gray-100 p-1.5 hover:bg-gray-200 transition-colors cursor-pointer group">
              <Cog className="w-4 h-4 text-gray-600 transition-transform duration-300 group-hover:rotate-180" />
            </button>
          </div>
        </div>
      </div>

      {/* AI Response Section */}
      <div className="bg-white rounded-md p-4 sm:p-6 mt-4 sm:mt-6 relative">
        <div className="flex items-center gap-2 mb-2 sm:mb-3">
          <div className="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center">
            <BrainCircuit className="w-3.5 h-3.5 text-gray-700" />
          </div>
          <h2 className="font-medium text-gray-700">Quantik-2</h2>
        </div>

        <Separator className="my-2 sm:my-3 opacity-50" />

        <div className="relative">
          <ScrollArea className="h-72 sm:h-96 pr-3">
            <AnimatePresence mode="wait">
              <motion.div key={activeMode}>{renderContent()}</motion.div>
            </AnimatePresence>
          </ScrollArea>

          {/* Translucent overlay at bottom */}
          <div className="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-white via-white/80 to-transparent pointer-events-none"></div>
        </div>
      </div>
    </div>
  )
}