"use client";

import { useState, useRef } from "react";
import { motion } from "framer-motion";
import { 
  Upload, 
  FileText, 
  X, 
  CheckCircle, 
  AlertCircle,
  Monitor,
  Palette,
  FileImage,
  ArrowRight,
  Info
} from "lucide-react";
import Link from "next/link";

const categories = [
  {
    id: "digital-art",
    title: "Digital Art",
    icon: Monitor,
    description: "Artwork created using digital tools and software",
  },
  {
    id: "paintings",
    title: "Paintings",
    icon: Palette,
    description: "Traditional paintings in any medium",
  },
  {
    id: "poster-making",
    title: "Poster Making",
    icon: FileImage,
    description: "Creative posters with impactful messages",
  },
];

export default function SubmitPage() {
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    category: "",
  });
  const [file, setFile] = useState<File | null>(null);
  const [preview, setPreview] = useState<string | null>(null);
  const [fileError, setFileError] = useState<string | null>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitSuccess, setSubmitSuccess] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileSelect = (selectedFile: File) => {
    const validTypes = ["image/jpeg", "image/png", "application/pdf"];
    const maxSize = 10 * 1024 * 1024; // 10MB

    setFileError(null);

    if (!validTypes.includes(selectedFile.type)) {
      setFileError("Invalid file type. Please upload a JPG, PNG, or PDF file.");
      return;
    }

    if (selectedFile.size > maxSize) {
      setFileError("File too large. Maximum size is 10MB.");
      return;
    }

    setFile(selectedFile);

    if (selectedFile.type.startsWith("image/")) {
      const reader = new FileReader();
      reader.onload = (e) => setPreview(e.target?.result as string);
      reader.readAsDataURL(selectedFile);
    } else {
      setPreview(null);
    }
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    const droppedFile = e.dataTransfer.files[0];
    if (droppedFile) handleFileSelect(droppedFile);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!file || !formData.category) return;

    setIsSubmitting(true);
    // TODO: Implement actual submission logic
    await new Promise(resolve => setTimeout(resolve, 2000));
    setIsSubmitting(false);
    setSubmitSuccess(true);
  };

  const removeFile = () => {
    setFile(null);
    setPreview(null);
    setFileError(null);
    if (fileInputRef.current) fileInputRef.current.value = "";
  };

  if (submitSuccess) {
    return (
      <main className="min-h-screen bg-black pt-32 pb-20 flex items-center justify-center">
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          className="text-center px-4"
        >
          <div className="w-20 h-20 rounded-full bg-lime-400/20 flex items-center justify-center mx-auto mb-6">
            <CheckCircle className="w-10 h-10 text-lime-400" />
          </div>
          <h1 className="text-3xl sm:text-4xl font-black text-white mb-4">
            Submission Successful!
          </h1>
          <p className="text-zinc-400 mb-8 max-w-md mx-auto">
            Your artwork has been submitted for review. You'll receive an email 
            notification once it's approved by our moderators.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button
              onClick={() => {
                setSubmitSuccess(false);
                setFormData({ title: "", description: "", category: "" });
                setFile(null);
                setPreview(null);
                setFileError(null);
              }}
              className="inline-flex items-center justify-center gap-2 bg-lime-400 text-black px-8 py-4 rounded-full font-bold hover:bg-lime-300 transition-all"
            >
              Submit Another
            </button>
            <Link
              href="/gallery"
              className="inline-flex items-center justify-center gap-2 bg-transparent text-white px-8 py-4 rounded-full font-bold border border-zinc-700 hover:border-zinc-500 transition-all"
            >
              View Gallery
            </Link>
          </div>
        </motion.div>
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-black pt-32 pb-20">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12"
        >
          <span className="inline-block bg-lime-400 text-black px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-6">
            SUBMIT ARTWORK
          </span>
          <h1 className="text-4xl sm:text-5xl font-black tracking-tight text-white mb-4">
            Share Your <span className="text-lime-400">Masterpiece</span>
          </h1>
          <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
            Upload your artwork and let the world see your creativity. 
            Make sure to read the rules before submitting.
          </p>
        </motion.div>

        {/* Info Banner */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.1 }}
          className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4 mb-8 flex items-start gap-3"
        >
          <Info className="w-5 h-5 text-lime-400 flex-shrink-0 mt-0.5" />
          <div className="text-sm text-zinc-400">
            <strong className="text-white">Submission Requirements:</strong> JPG, PNG, or PDF files up to 10MB. 
            Minimum resolution 1920x1080. AI-generated artwork will be detected and rejected.
          </div>
        </motion.div>

        <form onSubmit={handleSubmit} className="space-y-8">
          {/* Category Selection */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <label className="block text-white text-lg font-bold mb-4">
              Select Category
            </label>
            <div className="grid sm:grid-cols-3 gap-4">
              {categories.map((category) => (
                <button
                  key={category.id}
                  type="button"
                  onClick={() => setFormData({ ...formData, category: category.id })}
                  className={`p-6 rounded-2xl border-2 transition-all text-left ${
                    formData.category === category.id
                      ? "bg-lime-400/10 border-lime-400"
                      : "bg-zinc-900 border-zinc-800 hover:border-zinc-700"
                  }`}
                >
                  <category.icon 
                    className={`w-8 h-8 mb-3 ${
                      formData.category === category.id ? "text-lime-400" : "text-zinc-500"
                    }`} 
                  />
                  <h3 className={`font-bold mb-1 ${
                    formData.category === category.id ? "text-lime-400" : "text-white"
                  }`}>
                    {category.title}
                  </h3>
                  <p className="text-zinc-500 text-sm">{category.description}</p>
                </button>
              ))}
            </div>
          </motion.div>

          {/* File Upload */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
          >
            <label className="block text-white text-lg font-bold mb-4">
              Upload Artwork
            </label>
            <div
              onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
              onDragLeave={() => setIsDragging(false)}
              onDrop={handleDrop}
              className={`relative border-2 border-dashed rounded-2xl transition-all ${
                isDragging
                  ? "border-lime-400 bg-lime-400/5"
                  : file
                  ? "border-lime-400/50 bg-zinc-900"
                  : "border-zinc-700 bg-zinc-900 hover:border-zinc-600"
              }`}
            >
              <input
                ref={fileInputRef}
                type="file"
                accept=".jpg,.jpeg,.png,.pdf"
                onChange={(e) => e.target.files?.[0] && handleFileSelect(e.target.files[0])}
                className="hidden"
              />

              {file ? (
                <div className="p-6">
                  <div className="flex items-start gap-4">
                    {preview ? (
                      <img
                        src={preview}
                        alt="Preview"
                        className="w-32 h-32 object-cover rounded-xl"
                      />
                    ) : (
                      <div className="w-32 h-32 bg-zinc-800 rounded-xl flex items-center justify-center">
                        <FileText className="w-12 h-12 text-zinc-600" />
                      </div>
                    )}
                    <div className="flex-1">
                      <div className="flex items-start justify-between">
                        <div>
                          <p className="text-white font-semibold mb-1">{file.name}</p>
                          <p className="text-zinc-500 text-sm">
                            {(file.size / 1024 / 1024).toFixed(2)} MB
                          </p>
                        </div>
                        <button
                          type="button"
                          onClick={removeFile}
                          className="p-2 hover:bg-zinc-800 rounded-lg transition-colors"
                        >
                          <X className="w-5 h-5 text-zinc-400" />
                        </button>
                      </div>
                      <div className="flex items-center gap-2 mt-3 text-lime-400 text-sm">
                        <CheckCircle className="w-4 h-4" />
                        File ready for upload
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <button
                  type="button"
                  onClick={() => fileInputRef.current?.click()}
                  className="w-full p-12 text-center"
                >
                  <div className="w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center mx-auto mb-4">
                    <Upload className="w-8 h-8 text-zinc-500" />
                  </div>
                  <p className="text-white font-semibold mb-2">
                    Drop your artwork here or click to browse
                  </p>
                  <p className="text-zinc-500 text-sm">
                    Supports JPG, PNG, PDF up to 10MB
                  </p>
                </button>
              )}
            </div>
            {fileError && (
              <div className="flex items-center gap-2 mt-3 text-red-500 text-sm">
                <AlertCircle className="w-4 h-4 flex-shrink-0" />
                {fileError}
              </div>
            )}
          </motion.div>

          {/* Title & Description */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="space-y-6"
          >
            <div>
              <label className="block text-white text-lg font-bold mb-4">
                Artwork Title
              </label>
              <input
                type="text"
                required
                maxLength={100}
                value={formData.title}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-4 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors"
                placeholder="Give your artwork a memorable title"
              />
              <p className="text-zinc-500 text-sm mt-2">{formData.title.length}/100 characters</p>
            </div>

            <div>
              <label className="block text-white text-lg font-bold mb-4">
                Description
              </label>
              <textarea
                required
                maxLength={500}
                rows={4}
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-4 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors resize-none"
                placeholder="Tell us about your artwork, the inspiration behind it, and the techniques used..."
              />
              <p className="text-zinc-500 text-sm mt-2">{formData.description.length}/500 characters</p>
            </div>
          </motion.div>

          {/* Submit Button */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.5 }}
            className="flex flex-col sm:flex-row gap-4"
          >
            <button
              type="submit"
              disabled={isSubmitting || !file || !formData.category || !formData.title || !formData.description}
              className="flex-1 flex items-center justify-center gap-2 bg-lime-400 text-black px-8 py-4 rounded-full font-bold tracking-wider hover:bg-lime-300 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isSubmitting ? (
                <>
                  <div className="w-5 h-5 border-2 border-black/30 border-t-black rounded-full animate-spin" />
                  SUBMITTING...
                </>
              ) : (
                <>
                  SUBMIT ARTWORK
                  <ArrowRight className="w-5 h-5" />
                </>
              )}
            </button>
            <Link
              href="/rules"
              className="flex items-center justify-center gap-2 bg-transparent text-white px-8 py-4 rounded-full font-bold border border-zinc-700 hover:border-zinc-500 transition-all"
            >
              View Rules
            </Link>
          </motion.div>
        </form>
      </div>
    </main>
  );
}