"use client";
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Globe, Briefcase, ChevronDown, ChevronUp, Award } from "lucide-react";
import { useSeller } from "@/lib/SellerContext";

export function AboutSeller() {
  const { profile } = useSeller();
  const [expanded, setExpanded] = useState(false);

  const shortBio = profile.bio.length > 180 ? profile.bio.slice(0, 180) + "…" : profile.bio;

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.15, type: "spring", stiffness: 300, damping: 28 }}
      className="mx-4 mb-4 rounded-2xl p-4"
      id="about"
      style={{ background: "var(--card)", border: "1px solid var(--border)" }}
    >
      <h2 className="text-base font-bold text-[var(--text-primary)] mb-3">About the Seller</h2>

      {/* Bio */}
      <AnimatePresence initial={false} mode="wait">
        <motion.p
          key={expanded ? "full" : "short"}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
          className="text-sm text-[var(--text-muted)] leading-relaxed mb-2"
        >
          {expanded ? profile.bio : shortBio}
        </motion.p>
      </AnimatePresence>

      {profile.bio.length > 180 && (
        <button
          onClick={() => setExpanded((v) => !v)}
          className="flex items-center gap-1 text-xs font-semibold mb-4 transition-colors"
          style={{ color: "var(--accent)" }}
        >
          {expanded ? <><ChevronUp size={13} /> Show Less</> : <><ChevronDown size={13} /> Read More</>}
        </button>
      )}

      {/* Business description */}
      {expanded && (
        <motion.p
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: "auto" }}
          className="text-sm text-[var(--text-muted)] leading-relaxed mb-4 pb-4 border-b border-[var(--border)]"
        >
          {profile.businessDescription}
        </motion.p>
      )}

      {/* Languages */}
      <div className="mb-4">
        <div className="flex items-center gap-2 mb-2">
          <Globe size={13} style={{ color: "#60a5fa" }} />
          <span className="text-xs font-semibold text-[var(--text-primary)]">Languages</span>
        </div>
        <div className="flex flex-wrap gap-2">
          {profile.languages.map((lang) => (
            <span
              key={lang}
              className="px-2.5 py-1 rounded-lg text-xs font-medium"
              style={{
                background: "rgba(96,165,250,0.1)",
                color: "#60a5fa",
                border: "1px solid rgba(96,165,250,0.25)",
              }}
            >
              {lang}
            </span>
          ))}
        </div>
      </div>

      {/* Specialization */}
      <div className="mb-4">
        <div className="flex items-center gap-2 mb-2">
          <Briefcase size={13} style={{ color: "#a78bfa" }} />
          <span className="text-xs font-semibold text-[var(--text-primary)]">Specialization</span>
        </div>
        <div className="flex flex-wrap gap-2">
          {profile.specialization.map((spec) => (
            <span
              key={spec}
              className="px-2.5 py-1 rounded-lg text-xs font-medium"
              style={{
                background: "rgba(167,139,250,0.1)",
                color: "#a78bfa",
                border: "1px solid rgba(167,139,250,0.25)",
              }}
            >
              {spec}
            </span>
          ))}
        </div>
      </div>

      {/* Experience */}
      <div className="flex items-center gap-3 p-3 rounded-xl" style={{ background: "rgba(240,192,64,0.06)", border: "1px solid rgba(240,192,64,0.2)" }}>
        <div className="w-8 h-8 rounded-xl flex items-center justify-center" style={{ background: "rgba(240,192,64,0.15)" }}>
          <Award size={15} style={{ color: "#f0c040" }} />
        </div>
        <div>
          <p className="text-xs font-bold" style={{ color: "#f0c040" }}>Experience</p>
          <p className="text-xs text-[var(--text-muted)]">{profile.experience}</p>
        </div>
      </div>
    </motion.div>
  );
}
