import { useNavigate } from 'react-router'
import { MOCK_YOUTUBE_VIDEOS } from '@/lib/mockData'
import { Card, CardContent } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Search, PlayCircle, User } from 'lucide-react'

export const VideoSearchPage = () => {
    const navigate = useNavigate()

    return (
        <div className="p-8 max-w-6xl mx-auto min-h-[calc(100vh-4rem)]">
            <div className="mb-8">
                <h1 className="text-3xl font-bold tracking-tight mb-2">Video Learning</h1>
                <p className="text-muted-foreground mb-6">Learn Norwegian from authentic YouTube videos with interactive subtitles.</p>

                <div className="relative max-w-2xl">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-4 h-4" />
                    <Input
                        placeholder="Search YouTube videos..."
                        className="pl-9 bg-card"
                    />
                </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {MOCK_YOUTUBE_VIDEOS.map((video) => (
                    <Card
                        key={video.id}
                        className="group cursor-pointer hover:shadow-lg transition-all border-none bg-transparent hover:bg-muted/50 rounded-xl overflow-hidden"
                        onClick={() => navigate(`/video-learning/${video.id}`)}
                    >
                        <div className="relative aspect-video rounded-xl overflow-hidden mb-3 shadow-md">
                            <img
                                src={video.thumbnail}
                                alt={video.title}
                                className="w-full h-full object-cover transition-transform group-hover:scale-105"
                            />
                            <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                                <PlayCircle className="w-12 h-12 text-white drop-shadow-lg" />
                            </div>
                            <div className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded font-mono">
                                {video.duration}
                            </div>
                        </div>
                        <CardContent className="p-1">
                            <h3 className="font-bold leading-tight mb-1 group-hover:text-primary transition-colors line-clamp-2">
                                {video.title}
                            </h3>
                            <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                <span className="flex items-center gap-1"><User className="w-3 h-3" /> {video.channel}</span>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>
        </div>
    )
}
