"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { ChevronRight, ChevronLeft, PlayCircle, ShieldCheck, X, Search, Clock, User } from "lucide-react";
import SafeImage from "./SafeImage";


import { videoService, Video } from "../lib/services/videoService";
import { useRouter } from 'next/navigation';
import VideoModalPlayer from "./VideoModalPlayer";

const FALLBACK_VIDEOS: Video[] = [
  {
    id: "v1",
    title: "نحوه آماده‌سازی کانی‌هیدروکس GAG",
    doctor: "دکتر کلاوس هنینگ",
    duration: "۰۱:۴۵",
    thumbnail: "https://images.unsplash.com/photo-1576091160550-217359f42f8c?auto=format&fit=crop&q=80&w=600",
    videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4",
    description: "آموزش گام به گام آماده‌سازی پودر Canhydrox GAG برای جذب حداکثری در دستگاه گوارش."
  },
  {
    id: "v2",
    title: "اهمیت صدف لب‌سبز برای بازسازی غضروف",
    doctor: "دکتر النا اشمیت",
    duration: "۰۲:۲۰",
    thumbnail: "https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&q=80&w=600",
    videoUrl: "https://www.w3schools.com/html/movie.mp4",
    description: "چرا صدف لب‌سبز نیوزیلندی نایاب‌ترین و موثرترین ماده برای بازسازی مفصل است؟"
  },
  {
    id: "v3",
    title: "تغذیه هوشمند توله‌سگ‌های نژاد بزرگ",
    doctor: "دکتر هلگا فیشر",
    duration: "۰۳:۱۰",
    thumbnail: "/assets/images/regenerated_image_1779109861747.png",
    videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4",
    description: "دوز مصرفی مکمل‌های کلسیم در نژادهای بزرگ برای جلوگیری از بدشکلی‌های استخوانی."
  },
  {
    id: "v4",
    title: "تاثیر امگا ۳ بر ریزش مو فصلی",
    doctor: "دکتر ماری کونیگ",
    duration: "۰۵:۱۵",
    thumbnail: "https://images.unsplash.com/photo-1516734212186-a967f81ad0d7?auto=format&fit=crop&q=80&w=600",
    videoUrl: "https://www.w3schools.com/html/movie.mp4",
    description: "چربی‌های ضروری چگونه لایه محافظ پوست را بازسازی می‌کنند."
  },
  {
    id: "v5",
    title: "سم‌زدایی گوارشی با اسید هومیک",
    doctor: "دکتر ریکاردو کوخ",
    duration: "۰۴:۰۰",
    thumbnail: "https://images.unsplash.com/photo-1581594693702-fbdc51b2763b?auto=format&fit=crop&q=80&w=600",
    videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4",
    description: "مکانیزم عمل Moor-Tranke در جذب توکسین‌های روده‌ای."
  }
];

export default function VideosPage() {
  const router = useRouter();
  const [videos, setVideos] = useState<Video[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
  const [search, setSearch] = useState("");

  React.useEffect(() => {
    setIsLoading(true);
    videoService.getVideos({ limit: 100 }).then((data) => {
      if (data && data.length > 0) {
        setVideos(data);
      } else {
        setVideos(FALLBACK_VIDEOS);
      }
    }).catch(() => {
      setVideos(FALLBACK_VIDEOS);
    }).finally(() => {
      setIsLoading(false);
    });
  }, []);

  const filteredVideos = videos.filter(v => 
    v.title.includes(search) || v.doctor.includes(search)
  );

  return (
    <div className="min-h-screen bg-medical-gray-900 pt-8 pb-20 px-4 font-vazir" dir="rtl">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="flex flex-col md:flex-row items-center justify-between mb-16 gap-6">
            <div className="text-right">
               <div className="inline-flex items-center gap-2 px-3 py-1 bg-canina-blue/10 text-canina-blue rounded-full text-[10px] font-black uppercase tracking-widest mb-4">
                  <PlayCircle className="w-3 h-3" />
                  Video Academy
               </div>
               <h1 className="text-4xl lg:text-6xl font-black text-white italic leading-tight">
                  آکادمی ویدئویی <span className="text-canina-blue">کنینا</span>
               </h1>
            </div>
            <button 
              onClick={() => router.push('/')}
              className="px-8 py-3 bg-white/5 border border-white/10 rounded-2xl text-white shadow-sm flex items-center gap-2 font-black hover:bg-white/10 transition-all font-vazir"
            >
              <span>بازگشت</span>
              <ChevronLeft className="w-5 h-5" />
            </button>
        </div>

        {/* Search Bar */}
        <div className="mb-12 relative max-w-2xl">
           <Search className="absolute right-6 top-1/2 -translate-y-1/2 text-white/30 w-5 h-5" />
           <input 
             type="text" 
             placeholder="جستجو در ویدئوهای آموزشی..."
             value={search}
             onChange={e => setSearch(e.target.value)}
             className="w-full bg-white/5 border border-white/10 rounded-[2rem] py-5 pr-14 pl-6 text-white outline-none focus:bg-white/10 transition-all font-bold"
           />
        </div>

        {/* Video Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
           {filteredVideos.map((video, idx) => (
             <motion.div 
               key={video.id}
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: idx * 0.1 }}
               className="group cursor-pointer"
               onClick={() => {
                 setSelectedVideo(video);
                 videoService.incrementViews(video.id);
               }}
             >
                <div className="relative aspect-video rounded-[2.5rem] overflow-hidden mb-6 shadow-2xl border border-white/5">
                   <SafeImage 
                     src={video.thumbnail} 
                     alt={video.title}
                     className="w-full h-full"
                     imgClassName="object-cover group-hover:scale-110 transition-transform duration-700 opacity-60 group-hover:opacity-100"
                   />
                   <div className="absolute inset-0 flex items-center justify-center">
                      <div className="w-16 h-16 bg-canina-blue rounded-full flex items-center justify-center text-white shadow-2xl group-hover:scale-110 transition-transform">
                         <PlayCircle className="w-10 h-10" />
                      </div>
                   </div>
                   <div className="absolute bottom-4 right-4 bg-black/60 backdrop-blur-md text-white px-3 py-1 rounded-lg text-[10px] font-black">
                      {video.duration}
                   </div>
                </div>
                <div className="px-4">
                   <h3 className="text-xl font-black text-white group-hover:text-canina-blue transition-colors mb-2">{video.title}</h3>
                   <div className="flex items-center gap-4 text-xs font-bold text-white/40">
                      <div className="flex items-center gap-1">
                         <User className="w-3 h-3" />
                         {video.doctor || 'کادر علمی کنینا'}
                      </div>
                      <div className="flex items-center gap-1">
                         <Clock className="w-3 h-3" />
                         <span>{video.duration || 'آموزش ویدئویی'}</span>
                      </div>
                   </div>
                </div>
             </motion.div>
           ))}
        </div>
      </div>

      {/* Custom Feature-Rich Video Player Modal */}
      <VideoModalPlayer
        isOpen={!!selectedVideo}
        onClose={() => setSelectedVideo(null)}
        video={selectedVideo}
      />
    </div>
  );
}