"use client";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  MapPin, Calendar, MessageCircle, UserPlus, UserCheck,
  MoreVertical, Star, Package, Clock, TrendingUp, Share2, Link,
} from "lucide-react";
import { useSeller } from "@/lib/SellerContext";
import { VerifiedBadge } from "./VerifiedBadge";
import { formatProfileDate, getTrustScoreColor } from "./mockData";

interface Props {
  onReport: () => void;
  onMessage: () => void;
}

export function SellerHero({ onReport, onMessage }: Props) {
  const { profile, toggleFollow } = useSeller();
  const [menuOpen, setMenuOpen] = useState(false);
  const { stats } = profile;

  const quickStats = [
    { label: "Rating", value: stats.averageRating.toFixed(1), Icon: Star, color: "#f0c040", sub: `${stats.totalReviews} reviews` },
    { label: "Sold", value: stats.productsSold.toString(), Icon: TrendingUp, color: "#22c55e", sub: "Products" },
    { label: "Listings", value: stats.activeListings.toString(), Icon: Package, color: "#60a5fa", sub: "Active" },
    { label: "Responds", value: `${stats.responseRate}%`, Icon: MessageCircle, color: "#fb923c", sub: "Rate" },
  ];

  return (
    <div className="relative">
      {/* Cover Image */}
      <motion.div
        initial={{ opacity: 0, scale: 1.05 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.6 }}
        className="relative h-44 sm:h-60 overflow-hidden"
      >
        <img
          src={profile.coverImage}
          alt="Store cover"
          className="w-full h-full object-cover"
        />
        <div
          className="absolute inset-0"
          style={{ background: "linear-gradient(to bottom, rgba(26,26,46,0.15) 0%, rgba(26,26,46,0.92) 100%)" }}
        />

        {/* Trust score pill — top right */}
        <motion.div
          initial={{ opacity: 0, x: 16 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.5 }}
          className="absolute top-3 right-3 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold"
          style={{
            background: "rgba(22,33,62,0.85)",
            border: "1px solid rgba(240,192,64,0.4)",
            backdropFilter: "blur(8px)",
          }}
        >
          <span className="text-[var(--text-muted)]">Trust</span>
          <span style={{ color: getTrustScoreColor(profile.trustScore) }}>
            {profile.trustScore}%
          </span>
        </motion.div>

        {/* Response time pill — top left */}
        <motion.div
          initial={{ opacity: 0, x: -16 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.5 }}
          className="absolute top-3 left-3 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium"
          style={{
            background: "rgba(22,33,62,0.85)",
            border: "1px solid rgba(34,211,153,0.3)",
            color: "#34d399",
            backdropFilter: "blur(8px)",
          }}
        >
          <Clock size={10} />
          <span>Responds {profile.stats.responseTime}</span>
        </motion.div>
      </motion.div>

      {/* Profile content */}
      <div className="px-4 pb-5" style={{ background: "var(--bg)" }}>
        {/* Avatar + action row */}
        <div className="flex items-end justify-between -mt-12 mb-4">
          {/* Avatar */}
          <motion.div
            initial={{ scale: 0.7, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ delay: 0.25, type: "spring", stiffness: 280, damping: 22 }}
            className="relative shrink-0"
          >
            <div
              className="w-[88px] h-[88px] rounded-2xl overflow-hidden"
              style={{
                border: "3px solid #f0c040",
                boxShadow: "0 0 0 3px rgba(240,192,64,0.15), 0 8px 24px rgba(0,0,0,0.5)",
              }}
            >
              <img src={profile.avatar} alt={profile.name} className="w-full h-full object-cover" />
            </div>
            {/* Online dot */}
            <div
              className="absolute bottom-1 right-1 w-4 h-4 rounded-full"
              style={{ background: "#22c55e", border: "2px solid var(--bg)" }}
            />
          </motion.div>

          {/* Actions */}
          <motion.div
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.45 }}
            className="flex items-center gap-2 mt-16"
          >
            <button
              onClick={onMessage}
              className="flex items-center gap-1.5 px-4 py-2.5 rounded-xl text-sm font-bold text-white transition-all active:scale-95"
              style={{ background: "var(--accent)", boxShadow: "0 4px 14px rgba(252,0,0,0.35)" }}
            >
              <MessageCircle size={15} />
              <span className="hidden sm:inline">Message</span>
            </button>

            <button
              onClick={toggleFollow}
              className="flex items-center gap-1.5 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all active:scale-95"
              style={{
                background: profile.isFollowing ? "rgba(240,192,64,0.12)" : "var(--card)",
                color: profile.isFollowing ? "#f0c040" : "var(--text-muted)",
                border: `1px solid ${profile.isFollowing ? "rgba(240,192,64,0.4)" : "var(--border)"}`,
              }}
            >
              {profile.isFollowing ? <UserCheck size={15} /> : <UserPlus size={15} />}
              <span className="hidden sm:inline">{profile.isFollowing ? "Following" : "Follow"}</span>
            </button>

            {/* Three-dot menu */}
            <div className="relative">
              <button
                onClick={() => setMenuOpen((v) => !v)}
                className="p-2.5 rounded-xl transition-all"
                style={{ background: "var(--card)", border: "1px solid var(--border)", color: "var(--text-muted)" }}
                aria-label="More options"
              >
                <MoreVertical size={16} />
              </button>

              <AnimatePresence>
                {menuOpen && (
                  <motion.div
                    initial={{ opacity: 0, scale: 0.92, y: -4 }}
                    animate={{ opacity: 1, scale: 1, y: 0 }}
                    exit={{ opacity: 0, scale: 0.92, y: -4 }}
                    transition={{ type: "spring", stiffness: 400, damping: 28 }}
                    className="absolute right-0 top-full mt-2 rounded-xl py-1 z-50 min-w-[160px]"
                    style={{
                      background: "var(--deep)",
                      border: "1px solid var(--border)",
                      boxShadow: "0 12px 40px rgba(0,0,0,0.5)",
                    }}
                  >
                    <button
                      onClick={() => { setMenuOpen(false); onReport(); }}
                      className="w-full px-4 py-2.5 text-left text-sm flex items-center gap-2 transition-colors hover:bg-[rgba(248,113,113,0.08)] text-[var(--text-muted)] hover:text-[#f87171]"
                    >
                      Report Seller
                    </button>
                    <button
                      onClick={() => setMenuOpen(false)}
                      className="w-full px-4 py-2.5 text-left text-sm flex items-center gap-2 transition-colors hover:bg-[rgba(255,255,255,0.04)] text-[var(--text-muted)] hover:text-[var(--text-primary)]"
                    >
                      <Share2 size={13} /> Share Profile
                    </button>
                    <button
                      onClick={() => setMenuOpen(false)}
                      className="w-full px-4 py-2.5 text-left text-sm flex items-center gap-2 transition-colors hover:bg-[rgba(255,255,255,0.04)] text-[var(--text-muted)] hover:text-[var(--text-primary)]"
                    >
                      <Link size={13} /> Copy Link
                    </button>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          </motion.div>
        </div>

        {/* Name + badges */}
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.35 }}
        >
          <div className="flex flex-wrap items-center gap-2 mb-1.5">
            <h1 className="text-xl font-black text-[var(--text-primary)]">{profile.name}</h1>
            <VerifiedBadge size="md" showTooltip />
            <span
              className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold"
              style={{
                background: "rgba(252,0,0,0.12)",
                color: "var(--accent)",
                border: "1px solid rgba(252,0,0,0.3)",
              }}
            >
              Premium
            </span>
          </div>

          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-[var(--text-muted)] mb-4">
            <span className="flex items-center gap-1">
              <MapPin size={11} style={{ color: "var(--accent)" }} />
              {profile.location}
            </span>
            <span className="flex items-center gap-1">
              <Calendar size={11} />
              Member since {formatProfileDate(profile.joinDate)}
            </span>
          </div>

          {/* Quick stats */}
          <div className="grid grid-cols-4 gap-2">
            {quickStats.map((item, i) => (
              <motion.div
                key={item.label}
                initial={{ opacity: 0, scale: 0.85 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.5 + i * 0.07, type: "spring", stiffness: 300, damping: 24 }}
                className="rounded-xl p-2.5 text-center"
                style={{ background: "var(--card)", border: "1px solid var(--border)" }}
              >
                <item.Icon size={14} style={{ color: item.color, margin: "0 auto 3px" }} />
                <p
                  className="text-sm font-black tabular-nums"
                  style={{ color: "var(--text-primary)" }}
                >
                  {item.value}
                </p>
                <p className="text-[9px] text-[var(--text-muted)] leading-tight mt-0.5">{item.sub}</p>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>
    </div>
  );
}