import { Button } from "@/components/ui/button";
import { ArrowLeft, ArrowRight, Instagram, ExternalLink } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

export function Follow({
  follows,
  setFollows,
  onBack,
  onNext,
}: {
  follows: boolean | null;
  setFollows: (v: boolean) => void;
  onBack: () => void;
  onNext: () => void;
}) {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl md:text-3xl font-bold text-gradient">Follow Required</h2>
        <p className="text-sm text-muted-foreground mt-1">A small step to verify you're serious.</p>
      </div>

      <a
        href="https://instagram.com/gloovup_arun"
        target="_blank"
        rel="noopener noreferrer"
        className="flex items-center justify-between p-5 rounded-2xl glass-card hover:border-primary/40 transition-colors group"
      >
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ background: "var(--gradient-primary)" }}>
            <Instagram className="w-6 h-6 text-white" />
          </div>
          <div>
            <div className="font-semibold">@gloovup_arun</div>
            <div className="text-xs text-muted-foreground">Open Instagram profile</div>
          </div>
        </div>
        <ExternalLink className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
      </a>

      <div className="text-center text-sm text-muted-foreground">
        Are you following <span className="text-foreground font-medium">@gloovup_arun</span>?
      </div>

      <div className="grid grid-cols-2 gap-3">
        <button
          onClick={() => setFollows(true)}
          className={`py-4 rounded-xl border-2 transition-all font-semibold ${
            follows === true
              ? "border-primary bg-primary/15 text-foreground glow-blue"
              : "border-white/10 bg-white/5 hover:border-white/20"
          }`}
        >
          ✓ Yes
        </button>
        <button
          onClick={() => setFollows(false)}
          className={`py-4 rounded-xl border-2 transition-all font-semibold ${
            follows === false
              ? "border-destructive bg-destructive/15"
              : "border-white/10 bg-white/5 hover:border-white/20"
          }`}
        >
          ✕ No
        </button>
      </div>

      <AnimatePresence>
        {follows === false && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            className="text-center text-sm text-destructive bg-destructive/10 border border-destructive/30 rounded-xl p-3"
          >
            Please follow @gloovup_arun to continue.
          </motion.div>
        )}
      </AnimatePresence>

      <div className="flex gap-3 pt-2">
        <Button type="button" variant="glass" size="lg" onClick={onBack}>
          <ArrowLeft className="w-4 h-4" />
        </Button>
        <Button
          variant="hero"
          size="lg"
          disabled={follows !== true}
          onClick={onNext}
          className="flex-1"
        >
          Continue <ArrowRight className="ml-1 w-4 h-4" />
        </Button>
      </div>
    </div>
  );
}