import { useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Upload as UploadIcon, CheckCircle2, Loader2 } from "lucide-react";
import { motion } from "framer-motion";
import { toast } from "sonner";

const MAX_BYTES = 5 * 1024 * 1024;

export function Upload({
  current,
  setScreenshot,
  onBack,
  onNext,
}: {
  current: string | null;
  setScreenshot: (n: string) => void;
  onBack: () => void;
  onNext: () => void;
}) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [verifying, setVerifying] = useState(false);
  const [verified, setVerified] = useState(!!current);
  const [dragOver, setDragOver] = useState(false);

  const handleFile = (file: File | null) => {
    if (!file) return;
    if (!file.type.startsWith("image/")) return toast.error("Image files only");
    if (file.size > MAX_BYTES) return toast.error("Max 5MB");
    setVerifying(true);
    setTimeout(() => {
      setScreenshot(file.name);
      setVerifying(false);
      setVerified(true);
      setTimeout(onNext, 600);
    }, 1100);
  };

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl md:text-3xl font-bold text-gradient">Upload Proof</h2>
        <p className="text-sm text-muted-foreground mt-1">
          Screenshot showing you follow <span className="text-foreground">@gloovup_arun</span>.
        </p>
      </div>

      <div
        onClick={() => !verifying && inputRef.current?.click()}
        onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
        onDragLeave={() => setDragOver(false)}
        onDrop={(e) => {
          e.preventDefault();
          setDragOver(false);
          handleFile(e.dataTransfer.files?.[0] ?? null);
        }}
        className={`relative cursor-pointer rounded-2xl border-2 border-dashed transition-all p-10 text-center
          ${dragOver ? "border-primary bg-primary/5 glow-blue" : "border-white/15 bg-white/[0.02] hover:border-white/30"}`}
      >
        <input
          ref={inputRef}
          type="file"
          accept="image/*"
          className="hidden"
          onChange={(e) => handleFile(e.target.files?.[0] ?? null)}
        />
        {verifying ? (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex flex-col items-center gap-3">
            <Loader2 className="w-10 h-10 text-primary animate-spin" />
            <p className="text-sm text-muted-foreground">Verifying…</p>
          </motion.div>
        ) : verified ? (
          <motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="flex flex-col items-center gap-3">
            <CheckCircle2 className="w-10 h-10 text-success" />
            <p className="text-sm">Verified · {current}</p>
          </motion.div>
        ) : (
          <div className="flex flex-col items-center gap-3">
            <div className="w-14 h-14 rounded-full glass-card flex items-center justify-center">
              <UploadIcon className="w-6 h-6 text-primary" />
            </div>
            <div>
              <p className="font-medium">Drop screenshot here</p>
              <p className="text-xs text-muted-foreground mt-1">or click to browse · PNG, JPG · max 5MB</p>
            </div>
          </div>
        )}
      </div>

      <div className="flex gap-3 pt-2">
        <Button type="button" variant="glass" size="lg" onClick={onBack} disabled={verifying}>
          <ArrowLeft className="w-4 h-4" />
        </Button>
      </div>
    </div>
  );
}