'use client'

import React, { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { X, Minus, Square, Info, UserCircle, Target } from '@phosphor-icons/react'

interface HelpModalProps {
  isOpen: boolean
  onClose: () => void
}

export function HelpModal({ isOpen, onClose }: HelpModalProps) {
  const [windowPos, setWindowPos] = useState({ x: 100, y: 100 })
  const [isDragging, setIsDragging] = useState(false)
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })

  const handleMouseDown = (e: React.MouseEvent) => {
    if ((e.target as HTMLElement).closest('.window-controls')) return
    setIsDragging(true)
    setDragStart({ x: e.clientX - windowPos.x, y: e.clientY - windowPos.y })
  }

  const handleMouseMove = (e: MouseEvent) => {
    if (isDragging) {
      setWindowPos({
        x: e.clientX - dragStart.x,
        y: e.clientY - dragStart.y,
      })
    }
  }

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

  React.useEffect(() => {
    if (isDragging) {
      window.addEventListener('mousemove', handleMouseMove)
      window.addEventListener('mouseup', handleMouseUp)
      return () => {
        window.removeEventListener('mousemove', handleMouseMove)
        window.removeEventListener('mouseup', handleMouseUp)
      }
    }
  }, [isDragging, dragStart, windowPos])

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/30 backdrop-blur-sm z-50"
          />

          {/* Modal */}
          <motion.div
            style={{ left: windowPos.x, top: windowPos.y }}
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            transition={{ type: "spring", damping: 20, stiffness: 300 }}
            className="fixed w-[95vw] max-w-[600px] bg-white rounded-lg shadow-2xl z-50 select-none max-h-[90vh] overflow-hidden flex flex-col"
          >
            {/* Ubuntu-style Window Header */}
            <div
              onMouseDown={handleMouseDown}
              className="h-10 sm:h-11 bg-gradient-to-b from-[#f6f5f4] to-[#edebe9] border-b border-[#d0d0d0] flex items-center justify-between px-2 sm:px-3 cursor-move rounded-t-lg flex-shrink-0"
            >
              <div className="flex items-center gap-1.5 sm:gap-2 flex-1 min-w-0">
                <div className="flex items-center gap-1 window-controls flex-shrink-0">
                  <button
                    onClick={onClose}
                    className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-[#E95420] hover:bg-[#d14818] flex items-center justify-center group"
                  >
                    <X size={10} weight="bold" className="text-white opacity-0 group-hover:opacity-100 sm:w-3 sm:h-3" />
                  </button>
                  <button className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group">
                    <Minus size={10} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100 sm:w-3 sm:h-3" />
                  </button>
                  <button className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group">
                    <Square size={8} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100 sm:w-2.5 sm:h-2.5" />
                  </button>
                </div>
                <div className="flex items-center gap-1.5 sm:gap-2 ml-1 sm:ml-2 min-w-0">
                  <Info size={16} weight="fill" className="text-[#E95420] sm:w-[18px] sm:h-[18px] flex-shrink-0" />
                  <span className="text-xs sm:text-sm font-medium text-[#2c2c2c] truncate">About This Application</span>
                </div>
              </div>
            </div>

            {/* Content */}
            <div className="p-3 sm:p-6 space-y-3 sm:space-y-5 bg-white rounded-b-lg overflow-y-auto flex-1">
              {/* Creator Info */}
              <div className="flex items-start gap-2 sm:gap-4 p-3 sm:p-4 bg-gradient-to-r from-[#E95420]/10 to-orange-100 rounded-lg border border-[#E95420]/20">
                <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-[#E95420] to-[#d14818] flex items-center justify-center flex-shrink-0">
                  <UserCircle size={20} weight="fill" className="text-white sm:w-6 sm:h-6" />
                </div>
                <div className="min-w-0">
                  <h3 className="text-sm sm:text-base font-semibold text-[#2c2c2c] mb-0.5 sm:mb-1">Created By</h3>
                  <p className="text-[#555] font-medium text-xs sm:text-sm truncate">Reuben Chagas Fernandes</p>
                </div>
              </div>

              {/* Purpose */}
              <div className="flex items-start gap-2 sm:gap-4 p-3 sm:p-4 bg-blue-50 rounded-lg border border-blue-200">
                <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center flex-shrink-0">
                  <Target size={20} weight="fill" className="text-white sm:w-6 sm:h-6" />
                </div>
                <div className="min-w-0">
                  <h3 className="text-sm sm:text-base font-semibold text-[#2c2c2c] mb-1 sm:mb-2">Purpose</h3>
                  <p className="text-[#555] leading-relaxed text-xs sm:text-sm">
                    This application was created for sharing study material and making it easily
                    accessible through Claude. Our goal is to provide a seamless platform for
                    students to collaborate, share resources, and enhance their learning experience.
                  </p>
                </div>
              </div>

              {/* Features */}
              <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg p-3 sm:p-4 border border-purple-200">
                <h4 className="text-xs sm:text-sm font-semibold text-[#2c2c2c] uppercase tracking-wider mb-2 sm:mb-3 flex items-center gap-2">
                  <span className="w-1 h-3 sm:h-4 bg-[#E95420] rounded-full"></span>
                  Key Features
                </h4>
                <ul className="space-y-1.5 sm:space-y-2.5 text-[#555]">
                  <li className="flex items-center gap-2 sm:gap-3">
                    <span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-blue-500 rounded-full flex-shrink-0" />
                    <span className="text-xs sm:text-sm">Easy file upload and sharing</span>
                  </li>
                  <li className="flex items-center gap-2 sm:gap-3">
                    <span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-purple-500 rounded-full flex-shrink-0" />
                    <span className="text-xs sm:text-sm">Integration with Claude AI</span>
                  </li>
                  <li className="flex items-center gap-2 sm:gap-3">
                    <span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-green-500 rounded-full flex-shrink-0" />
                    <span className="text-xs sm:text-sm">Public folder for community sharing</span>
                  </li>
                  <li className="flex items-center gap-2 sm:gap-3">
                    <span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-[#E95420] rounded-full flex-shrink-0" />
                    <span className="text-xs sm:text-sm">Exam calendar and organization tools</span>
                  </li>
                  <li className="flex items-center gap-2 sm:gap-3">
                    <span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-cyan-500 rounded-full flex-shrink-0" />
                    <span className="text-xs sm:text-sm">Web browser with CORS proxy support</span>
                  </li>
                  <li className="flex items-center gap-2 sm:gap-3">
                    <span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-orange-500 rounded-full flex-shrink-0" />
                    <span className="text-xs sm:text-sm">Gemini AI chat assistant</span>
                  </li>
                </ul>
              </div>

              {/* Footer Button */}
              <div className="pt-1 sm:pt-2">
                <button
                  onClick={onClose}
                  className="w-full py-2 sm:py-2.5 bg-[#E95420] hover:bg-[#d14818] text-white rounded-lg text-sm sm:text-base font-medium transition-colors shadow-sm"
                >
                  Close
                </button>
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}