"use client";

import { useState } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import {
  Play,
  Clock,
  Eye,
  MoreHorizontal,
  Plus,
  Sparkles,
} from 'lucide-react';

const mockTasks = [
  {
    id: 1,
    title: 'Tech Product Demo',
    status: 'completed',
    duration: '2:45',
    views: 1234,
    createdAt: '2024-01-15',
    thumbnail: 'https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=400',
  },
  {
    id: 2,
    title: 'Marketing Campaign Video',
    status: 'processing',
    duration: '1:30',
    views: 0,
    createdAt: '2024-01-14',
    thumbnail: 'https://images.pexels.com/photos/3184287/pexels-photo-3184287.jpeg?auto=compress&cs=tinysrgb&w=400',
  },
  {
    id: 3,
    title: 'Educational Content',
    status: 'completed',
    duration: '5:20',
    views: 856,
    createdAt: '2024-01-12',
    thumbnail: 'https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=400',
  },
];

export function HomePage() {
  return (
    <div className="space-y-8">
      {/* Hero Section */}
      <div className="text-center space-y-4">
        <div className="space-y-2">
          <h1 className="text-4xl font-bold tracking-tight">
            Create Amazing Videos with{' '}
            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              AI Power
            </span>
          </h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Transform your ideas into professional videos using our advanced AI technology. 
            From script to screen in minutes, not hours.
          </p>
        </div>

        <div className="flex justify-center pt-4">
          <Link href="/create">
            <Button size="lg" className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700">
              <Sparkles className="mr-2 h-5 w-5" />
              Create AI Video
            </Button>
          </Link>
        </div>
      </div>

      <Separator />

      {/* Recent Projects */}
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold">Recent Projects</h2>
          <Button variant="outline" size="sm">
            <Plus className="mr-2 h-4 w-4" />
            New Project
          </Button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {mockTasks.map((task) => (
            <Card key={task.id} className="group hover:shadow-lg transition-all duration-200 cursor-pointer">
              <CardHeader className="p-0">
                <div className="relative">
                  <img
                    src={task.thumbnail}
                    alt={task.title}
                    className="w-full h-48 object-cover rounded-t-lg"
                  />
                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-t-lg flex items-center justify-center">
                    <Button size="sm" variant="secondary">
                      <Play className="mr-2 h-4 w-4" />
                      Preview
                    </Button>
                  </div>
                  <Badge
                    variant={task.status === 'completed' ? 'default' : 'secondary'}
                    className="absolute top-2 right-2"
                  >
                    {task.status}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="pt-4">
                <CardTitle className="text-lg mb-2">{task.title}</CardTitle>
                <div className="flex items-center space-x-4 text-sm text-muted-foreground">
                  <div className="flex items-center">
                    <Clock className="mr-1 h-3 w-3" />
                    {task.duration}
                  </div>
                  <div className="flex items-center">
                    <Eye className="mr-1 h-3 w-3" />
                    {task.views}
                  </div>
                </div>
                <p className="text-sm text-muted-foreground mt-2">
                  Created on {new Date(task.createdAt).toLocaleDateString()}
                </p>
              </CardContent>
              <CardFooter className="pt-0">
                <Button variant="ghost" size="sm" className="ml-auto">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>

        {mockTasks.length === 0 && (
          <Card className="text-center py-12">
            <CardContent>
              <div className="space-y-4">
                <div className="mx-auto w-16 h-16 rounded-full bg-muted flex items-center justify-center">
                  <Sparkles className="h-8 w-8 text-muted-foreground" />
                </div>
                <div className="space-y-2">
                  <h3 className="text-xl font-semibold">No projects yet</h3>
                  <p className="text-muted-foreground">
                    Get started by creating your first AI-powered video
                  </p>
                </div>
                <Link href="/create">
                  <Button>
                    <Plus className="mr-2 h-4 w-4" />
                    Create Your First Video
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  );
}