"use client";
import { motion } from "framer-motion";
import { MapPin, ShoppingCart, Award, Shield, Trophy, Crown, Target } from "lucide-react";
import { useSeller } from "@/lib/SellerContext";
import { formatProfileDate } from "./mockData";

const TIMELINE_ICONS: Record<string, React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & { size?: number | string; color?: string }>> = {
  "Joined Marketplace": MapPin,
  "First Sale": ShoppingCart,
  "100 Orders": Award,
  "Verified Seller": Shield,
  "Top Rated Seller": Trophy,
  "Premium Seller": Crown,
  "500 Orders": Target,
};

export function ReputationTimeline() {
  const { profile } = useSeller();
  const { timeline } = profile;

  return (
    <div className="mx-4 mb-4 rounded-2xl p-4" id="timeline" style={{ background: "var(--card)", border: "1px solid var(--border)" }}>
      <h2 className="text-base font-bold text-[var(--text-primary)] mb-4">Seller Journey</h2>

      <div className="relative pl-10">
        {/* Vertical spine */}
        <div
          className="absolute left-4 top-2 bottom-2 w-0.5 rounded-full"
          style={{ background: "rgba(255,255,255,0.07)" }}
        />

        {timeline.map((milestone, i) => {
          const Icon = TIMELINE_ICONS[milestone.label] ?? Award;
          const isLast = i === timeline.length - 1;

          return (
            <motion.div
              key={milestone.id}
              initial={{ opacity: 0, x: -12 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.1, type: "spring", stiffness: 300, damping: 26 }}
              className={`relative flex gap-3 ${isLast ? "" : "pb-6"}`}
            >
              {/* Node */}
              <div
                className="absolute -left-10 top-0 w-8 h-8 rounded-full flex items-center justify-center border-2 z-10"
                style={{
                  background: milestone.achieved ? "rgba(240,192,64,0.12)" : "var(--deep)",
                  borderColor: milestone.achieved ? "#f0c040" : "rgba(255,255,255,0.1)",
                  boxShadow: milestone.achieved ? "0 0 0 3px rgba(240,192,64,0.12)" : "none",
                }}
              >
                <Icon
                  size={14}
                  color={milestone.achieved ? "#f0c040" : "rgba(255,255,255,0.2)"}
                />
              </div>

              {/* Content */}
              <div
                className="flex-1 p-3 rounded-xl"
                style={{
                  background: milestone.achieved ? "rgba(240,192,64,0.05)" : "rgba(255,255,255,0.02)",
                  border: `1px solid ${milestone.achieved ? "rgba(240,192,64,0.2)" : "var(--border)"}`,
                  opacity: milestone.achieved ? 1 : 0.45,
                }}
              >
                <div className="flex items-start justify-between gap-2">
                  <div>
                    <p
                      className="text-sm font-bold"
                      style={{ color: milestone.achieved ? "var(--text-primary)" : "var(--text-muted)" }}
                    >
                      {milestone.label}
                    </p>
                    <p className="text-xs text-[var(--text-muted)] mt-0.5 leading-relaxed">
                      {milestone.description}
                    </p>
                  </div>
                  <div className="shrink-0 text-right">
                    <span
                      className="text-[10px] font-semibold px-2 py-0.5 rounded-md"
                      style={{
                        background: milestone.achieved ? "rgba(34,197,94,0.12)" : "rgba(255,255,255,0.04)",
                        color: milestone.achieved ? "#22c55e" : "var(--text-muted)",
                      }}
                    >
                      {milestone.achieved ? "✓ Done" : "Upcoming"}
                    </span>
                    <p className="text-[9px] text-[var(--text-muted)] mt-1">
                      {formatProfileDate(milestone.date)}
                    </p>
                  </div>
                </div>
              </div>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
}