"use client";
import { useState } from "react";
import { Container } from "@/components/container";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/badge";
import { 
  Upload, 
  Wand2, 
  Music, 
  Type, 
  Scissors, 
  Sparkles,
  Zap,
  Film,
  Download
} from "lucide-react";

export function VideoEditor() {
  const [selectedFile, setSelectedFile] = useState<string | null>(null);
  const [instructions, setInstructions] = useState("");
  const [selectedStyle, setSelectedStyle] = useState<string>("reels");

  const styles = [
    { id: "reels", name: "Instagram Reels", icon: "📱" },
    { id: "shorts", name: "YouTube Shorts", icon: "▶️" },
    { id: "tiktok", name: "TikTok", icon: "🎵" },
    { id: "cinematic", name: "Cinematic", icon: "🎬" },
  ];

  const features = [
    { icon: Scissors, label: "Fast Cuts", active: true },
    { icon: Music, label: "Add Music", active: true },
    { icon: Type, label: "Text Overlays", active: true },
    { icon: Sparkles, label: "Transitions", active: true },
  ];

  return (
    <section id="editor" className="py-20 bg-neutral-50 dark:bg-neutral-900/50">
      <Container>
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">
            Start Editing Your Video
          </h2>
          <p className="text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
            Upload your raw footage, tell us what you want, and watch AI transform it into a viral-ready video
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
          {/* Upload Section */}
          <Card className="border-2 border-dashed border-neutral-300 dark:border-neutral-700 hover:border-purple-500 dark:hover:border-purple-500 transition-colors">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Upload className="w-5 h-5" />
                Upload Video
              </CardTitle>
              <CardDescription>
                Drag & drop or click to upload your video file
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
                <div className="w-20 h-20 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mb-4">
                  <Film className="w-10 h-10 text-purple-600 dark:text-purple-400" />
                </div>
                <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
                  {selectedFile ? selectedFile : "No file selected"}
                </p>
                <Button 
                  variant="outline" 
                  onClick={() => setSelectedFile("sample-video.mp4")}
                  className="mb-2"
                >
                  Choose File
                </Button>
                <p className="text-xs text-neutral-500 dark:text-neutral-500">
                  Supports MP4, MOV, AVI up to 500MB
                </p>
              </div>
            </CardContent>
          </Card>

          {/* Instructions Section */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Wand2 className="w-5 h-5" />
                Editing Instructions
              </CardTitle>
              <CardDescription>
                Describe how you want your video edited
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label htmlFor="instructions">Your Instructions</Label>
                <Textarea
                  id="instructions"
                  placeholder="Example: Make this clip into an Instagram Reel. Fast cuts. Add energetic music. Highlight key words with big bold text. Make it viral style."
                  value={instructions}
                  onChange={(e) => setInstructions(e.target.value)}
                  rows={6}
                  className="mt-2"
                />
              </div>

              {/* Style Selection */}
              <div>
                <Label>Video Style</Label>
                <div className="grid grid-cols-2 gap-2 mt-2">
                  {styles.map((style) => (
                    <button
                      key={style.id}
                      onClick={() => setSelectedStyle(style.id)}
                      className={`p-3 rounded-lg border-2 transition-all text-left ${
                        selectedStyle === style.id
                          ? "border-purple-500 bg-purple-50 dark:bg-purple-900/20"
                          : "border-neutral-200 dark:border-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-700"
                      }`}
                    >
                      <div className="text-2xl mb-1">{style.icon}</div>
                      <div className="text-sm font-medium">{style.name}</div>
                    </button>
                  ))}
                </div>
              </div>

              {/* Features */}
              <div>
                <Label>Editing Features</Label>
                <div className="flex flex-wrap gap-2 mt-2">
                  {features.map((feature) => (
                    <Badge
                      key={feature.label}
                      className="px-3 py-1.5 bg-purple-100 dark:bg-purple-900/30 text-purple-900 dark:text-purple-300 border border-purple-200 dark:border-purple-800"
                    >
                      <feature.icon className="w-3 h-3 mr-1.5" />
                      {feature.label}
                    </Badge>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Action Button */}
        <div className="flex justify-center mt-8">
          <Button 
            size="lg" 
            className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white shadow-lg shadow-purple-500/30"
            disabled={!selectedFile || !instructions}
          >
            <Zap className="w-5 h-5 mr-2" />
            Generate Viral Video
          </Button>
        </div>

        {/* Demo Output */}
        {selectedFile && instructions && (
          <Card className="mt-8 max-w-2xl mx-auto border-2 border-purple-200 dark:border-purple-800">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Download className="w-5 h-5" />
                Your Video is Ready!
              </CardTitle>
              <CardDescription>
                AI has processed your video with all the requested edits
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="aspect-[9/16] bg-neutral-900 rounded-lg flex items-center justify-center mb-4">
                <div className="text-center text-white">
                  <Film className="w-16 h-16 mx-auto mb-4 opacity-50" />
                  <p className="text-sm opacity-75">Video Preview</p>
                  <p className="text-xs opacity-50 mt-2">9:16 • 1080p • 30fps</p>
                </div>
              </div>
              <Button className="w-full" size="lg">
                <Download className="w-5 h-5 mr-2" />
                Download Video
              </Button>
            </CardContent>
          </Card>
        )}
      </Container>
    </section>
  );
}