"use client";
import { motion, AnimatePresence } from "framer-motion";
import { MapPin, X, Navigation, ShieldCheck } from "lucide-react";

interface Props {
  onAllow: () => void;
  onSkip: () => void;
}

export function LocationPermissionModal({ onAllow, onSkip }: Props) {
  return (
    <AnimatePresence>
      {/* Backdrop */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        onClick={onSkip}
        style={{
          position: "fixed",
          inset: 0,
          background: "rgba(0,0,0,0.55)",
          backdropFilter: "blur(4px)",
          zIndex: 9998,
        }}
      />

      {/* Sheet */}
      <motion.div
        initial={{ y: "100%", opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        exit={{ y: "100%", opacity: 0 }}
        transition={{ type: "spring", damping: 26, stiffness: 320 }}
        style={{
          position: "fixed",
          bottom: 0,
          left: 0,
          right: 0,
          maxWidth: 480,
          margin: "0 auto",
          background: "var(--card)",
          borderTopLeftRadius: 24,
          borderTopRightRadius: 24,
          padding: "20px 24px 32px",
          zIndex: 9999,
          boxShadow: "0 -8px 40px rgba(0,0,0,0.18)",
        }}
      >
        {/* Handle */}
        <div
          style={{
            width: 40,
            height: 4,
            borderRadius: 99,
            background: "var(--border)",
            margin: "0 auto 20px",
          }}
        />

        {/* Close */}
        <button
          onClick={onSkip}
          style={{
            position: "absolute",
            top: 18,
            right: 18,
            width: 30,
            height: 30,
            borderRadius: "50%",
            background: "var(--bg)",
            border: "none",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: "var(--text-muted)",
          }}
        >
          <X size={15} />
        </button>

        {/* Icon */}
        <div
          style={{
            width: 64,
            height: 64,
            borderRadius: 18,
            background: "linear-gradient(135deg, #fc0000 0%, #ff4d4d 100%)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            boxShadow: "0 8px 24px rgba(252,0,0,0.3)",
            margin: "0 auto 16px",
          }}
        >
          <MapPin size={28} color="#fff" strokeWidth={2} />
        </div>

        <h2
          style={{
            textAlign: "center",
            fontSize: 18,
            fontWeight: 800,
            color: "var(--text-primary)",
            marginBottom: 8,
            letterSpacing: "-0.02em",
          }}
        >
          Find listings near you
        </h2>
        <p
          style={{
            textAlign: "center",
            fontSize: 13,
            color: "var(--text-muted)",
            lineHeight: 1.5,
            marginBottom: 24,
          }}
        >
          Allow location access to discover nearby deals and sellers in your area.
        </p>

        {/* Privacy note */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 8,
            padding: "10px 14px",
            borderRadius: 10,
            background: "rgba(34,197,94,0.08)",
            border: "1px solid rgba(34,197,94,0.2)",
            marginBottom: 20,
          }}
        >
          <ShieldCheck size={15} style={{ color: "#22c55e", flexShrink: 0 }} />
          <span style={{ fontSize: 11, color: "var(--text-muted)", lineHeight: 1.4 }}>
            Your exact location is never shared. Only your city is visible to sellers.
          </span>
        </div>

        {/* Buttons */}
        <button
          onClick={onAllow}
          style={{
            width: "100%",
            height: 48,
            borderRadius: 14,
            background: "linear-gradient(135deg, #fc0000 0%, #e60000 100%)",
            color: "#fff",
            fontSize: 14,
            fontWeight: 800,
            border: "none",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: 8,
            boxShadow: "0 4px 16px rgba(252,0,0,0.35)",
            marginBottom: 10,
          }}
        >
          <Navigation size={16} />
          Allow Location Access
        </button>

        <button
          onClick={onSkip}
          style={{
            width: "100%",
            height: 40,
            borderRadius: 12,
            background: "transparent",
            color: "var(--text-muted)",
            fontSize: 13,
            fontWeight: 600,
            border: "none",
            cursor: "pointer",
          }}
        >
          Skip for now
        </button>
      </motion.div>
    </AnimatePresence>
  );
}