"use client";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, CheckCircle, AlertTriangle } from "lucide-react";
import { useSeller } from "@/lib/SellerContext";
import { REPORT_SELLER_REASONS, REPORT_LISTING_REASONS } from "./types";

interface Props {
  open: boolean;
  onClose: () => void;
  mode: "seller" | "listing";
  listingId?: string;
}

export function ReportModal({ open, onClose, mode, listingId }: Props) {
  const { reportSeller, reportListing } = useSeller();
  const [selectedReason, setSelectedReason] = useState("");
  const [description, setDescription] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const reasons = mode === "seller"
    ? Array.from(REPORT_SELLER_REASONS)
    : Array.from(REPORT_LISTING_REASONS);

  const title = mode === "seller" ? "Report Seller" : "Report Listing";

  const handleSubmit = async () => {
    if (!selectedReason) return;
    setLoading(true);
    await new Promise((r) => setTimeout(r, 800));
    if (mode === "seller") {
      reportSeller(selectedReason, description);
    } else {
      reportListing(listingId ?? "", selectedReason, description);
    }
    setLoading(false);
    setSubmitted(true);
  };

  const handleClose = () => {
    setSelectedReason("");
    setDescription("");
    setSubmitted(false);
    setLoading(false);
    onClose();
  };

  return (
    <AnimatePresence>
      {open && (
        <>
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50"
            style={{ background: "rgba(0,0,0,0.75)", backdropFilter: "blur(6px)" }}
            onClick={handleClose}
          />

          {/* Sheet */}
          <motion.div
            initial={{ opacity: 0, y: "100%" }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: "100%" }}
            transition={{ type: "spring", stiffness: 320, damping: 32 }}
            className="fixed bottom-0 left-0 right-0 z-50 rounded-t-3xl overflow-hidden sm:inset-auto sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:w-full sm:max-w-sm sm:rounded-2xl"
            style={{ background: "var(--deep)", border: "1px solid var(--border)" }}
          >
            {submitted ? (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                className="flex flex-col items-center py-12 px-6 text-center"
              >
                <motion.div
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  transition={{ type: "spring", stiffness: 400, damping: 20, delay: 0.1 }}
                >
                  <CheckCircle size={52} color="#22c55e" />
                </motion.div>
                <h3 className="text-lg font-black text-[var(--text-primary)] mt-4 mb-2">Report Submitted</h3>
                <p className="text-sm text-[var(--text-muted)] mb-6">
                  Thank you for keeping the marketplace safe. Our team will review your report within 24 hours.
                </p>
                <button
                  onClick={handleClose}
                  className="px-8 py-3 rounded-xl font-bold text-sm text-white"
                  style={{ background: "var(--accent)" }}
                >
                  Done
                </button>
              </motion.div>
            ) : (
              <>
                {/* Header */}
                <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--border)]">
                  <div className="flex items-center gap-2">
                    <div
                      className="w-8 h-8 rounded-lg flex items-center justify-center"
                      style={{ background: "rgba(248,113,113,0.12)" }}
                    >
                      <AlertTriangle size={15} color="#f87171" />
                    </div>
                    <h3 className="text-base font-black text-[var(--text-primary)]">{title}</h3>
                  </div>
                  <button onClick={handleClose} className="p-1.5 rounded-lg" style={{ color: "var(--text-muted)" }}>
                    <X size={18} />
                  </button>
                </div>

                <div className="px-5 py-5 overflow-y-auto max-h-[70vh] space-y-4">
                  {/* Reasons */}
                  <div>
                    <p className="text-xs font-semibold text-[var(--text-muted)] mb-3">Select a reason</p>
                    <div className="space-y-2">
                      {reasons.map((reason) => (
                        <button
                          key={reason}
                          onClick={() => setSelectedReason(reason)}
                          className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left text-sm font-medium transition-all"
                          style={{
                            background: selectedReason === reason
                              ? "rgba(248,113,113,0.1)"
                              : "var(--card)",
                            border: `1px solid ${selectedReason === reason ? "rgba(248,113,113,0.4)" : "var(--border)"}`,
                            color: selectedReason === reason ? "#f87171" : "var(--text-primary)",
                          }}
                        >
                          <div
                            className="w-4 h-4 rounded-full border-2 flex items-center justify-center shrink-0 transition-all"
                            style={{
                              borderColor: selectedReason === reason ? "#f87171" : "rgba(255,255,255,0.2)",
                              background: selectedReason === reason ? "#f87171" : "transparent",
                            }}
                          >
                            {selectedReason === reason && (
                              <div className="w-1.5 h-1.5 rounded-full bg-white" />
                            )}
                          </div>
                          {reason}
                        </button>
                      ))}
                    </div>
                  </div>

                  {/* Description */}
                  <div>
                    <label className="text-xs font-semibold text-[var(--text-muted)] block mb-2">
                      Additional details <span className="font-normal">(optional)</span>
                    </label>
                    <textarea
                      value={description}
                      onChange={(e) => setDescription(e.target.value)}
                      placeholder="Provide more context to help our team investigate…"
                      rows={3}
                      maxLength={300}
                      className="w-full px-4 py-3 rounded-xl text-sm outline-none resize-none placeholder:text-[var(--text-muted)] text-[var(--text-primary)]"
                      style={{ background: "var(--card)", border: "1px solid var(--border)" }}
                    />
                  </div>

                  {/* Submit */}
                  <button
                    onClick={handleSubmit}
                    disabled={!selectedReason || loading}
                    className="w-full py-3.5 rounded-xl font-bold text-sm transition-all"
                    style={{
                      background: selectedReason ? "rgba(248,113,113,0.9)" : "rgba(255,255,255,0.06)",
                      color: selectedReason ? "#fff" : "var(--text-muted)",
                      cursor: selectedReason ? "pointer" : "not-allowed",
                    }}
                  >
                    {loading ? "Submitting…" : "Submit Report"}
                  </button>

                  <p className="text-[10px] text-[var(--text-muted)] text-center leading-relaxed">
                    False reports may result in your account being flagged. Reports are reviewed by our safety team.
                  </p>
                </div>
              </>
            )}
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}