import { useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { motion, AnimatePresence } from "framer-motion";
import sparkHorse from "@/assets/spark-horse.png";
import orionLogo from "@/assets/orion-logo.svg";
import { normalizeHeroContent, type HeroContent } from "./hero/normalizeContent";
import type { HeroTab } from "./hero/defaultContent";

type Content = Record<string, unknown>;

const dimensionColors: Record<string, string> = {
  valencia: "bg-valencia",
  sunflower: "bg-sunflower",
  "deep-sea": "bg-deep-sea",
  moss: "bg-moss",
  mist: "bg-mist",
  salmon: "bg-salmon",
};

const dimensionBorderColors: Record<string, string> = {
  valencia: "border-valencia",
  sunflower: "border-sunflower",
  "deep-sea": "border-deep-sea",
  moss: "border-moss",
  mist: "border-mist",
  salmon: "border-salmon",
};

const dimensionTextColors: Record<string, string> = {
  valencia: "text-valencia",
  sunflower: "text-sunflower",
  "deep-sea": "text-deep-sea",
  moss: "text-moss",
  mist: "text-mist",
  salmon: "text-salmon",
};

const dimensionHoverClasses: Record<string, string> = {
  valencia: "hover:text-valencia hover:bg-valencia/10",
  sunflower: "hover:text-sunflower hover:bg-sunflower/10",
  "deep-sea": "hover:text-deep-sea hover:bg-deep-sea/10",
  moss: "hover:text-moss hover:bg-moss/10",
  mist: "hover:text-mist hover:bg-mist/10",
  salmon: "hover:text-salmon hover:bg-salmon/10",
};

function resolveImageSrc(value: string, fallback: string): string {
  const trimmed = value.trim();
  return trimmed || fallback;
}

function tabButtonClass(tab: HeroTab, selectedKey: string | null, mobile = false): string {
  const selected = selectedKey === tab.key;
  const color = dimensionColors[tab.color] ?? "bg-secondary";
  if (mobile) {
    return selected
      ? `${color} text-milk shadow-lg`
      : "text-foreground/80 bg-secondary/50 hover:bg-secondary";
  }
  const hover = dimensionHoverClasses[tab.color] ?? "hover:bg-secondary/50";
  return selected
    ? `${color} text-milk shadow-lg scale-110`
    : `text-foreground/80 ${hover} cursor-pointer`;
}

function sortTabsForMobile(tabs: HeroTab[]): HeroTab[] {
  return [...tabs].sort((a, b) => a.position.mobileOrder - b.position.mobileOrder);
}

export function HeroBlock({ content }: { content?: Content }) {
  const hero = normalizeHeroContent(content);
  const [selectedTabKey, setSelectedTabKey] = useState<string | null>(null);
  const toggle = (key: string) => setSelectedTabKey(selectedTabKey === key ? null : key);

  const selected = selectedTabKey ? hero.tabs.find((tab) => tab.key === selectedTabKey) ?? null : null;
  const mobileTabs = useMemo(() => sortTabsForMobile(hero.tabs), [hero.tabs]);

  const logoSrc = resolveImageSrc(hero.logo.src, orionLogo);
  const horseSrc = resolveImageSrc(hero.horseImage.src, sparkHorse);

  const totalCourses = selected?.courseGroups.reduce((sum, group) => sum + group.courses.length, 0) ?? 0;

  return (
    <>
      <section className="flex-1 flex flex-col items-center justify-center bg-milk px-6 py-12 md:py-20">
        <motion.div
          className="text-center mb-8"
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <img src={logoSrc} alt={hero.logo.alt} className="h-16 md:h-20 mx-auto mb-2" />
          <h1 className="font-display text-3xl md:text-5xl font-bold text-bark mb-2">{hero.title}</h1>
          <p className="text-muted-foreground text-sm md:text-base max-w-xl mx-auto">{hero.subtitle}</p>
        </motion.div>

        <div className="relative max-w-3xl mx-auto w-full">
          <motion.div
            className="flex justify-center"
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <img
              src={horseSrc}
              alt={hero.horseImage.alt}
              className="w-full max-w-[280px] sm:max-w-md md:max-w-lg"
            />
          </motion.div>

          <div className="flex flex-col gap-2 mt-4 md:hidden">
            {mobileTabs.map((tab) => (
              <motion.button
                key={`mobile-${tab.key}`}
                type="button"
                onClick={() => toggle(tab.key)}
                className={`font-display text-xs tracking-[0.1em] uppercase font-bold px-4 py-2.5 rounded-full transition-all w-full ${tabButtonClass(tab, selectedTabKey, true)}`}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 }}
              >
                {tab.iconSrc ? (
                  <img src={tab.iconSrc} alt="" className="inline-block w-4 h-4 mr-1 rounded-full object-cover" />
                ) : (
                  <span className="mr-1">{tab.emoji}</span>
                )}
                {tab.buttonLabel || tab.title}
              </motion.button>
            ))}
          </div>

          {hero.tabs.map((tab, index) => {
            const position = tab.position.desktop.trim();
            if (!position) return null;

            return (
              <motion.button
                key={`desktop-${tab.key}`}
                type="button"
                onClick={() => toggle(tab.key)}
                className={`hidden md:block absolute ${position} font-display text-xs tracking-[0.1em] uppercase font-bold px-3 py-1.5 rounded-full transition-all ${tabButtonClass(tab, selectedTabKey)}`}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 + index * 0.05 }}
              >
                {tab.iconSrc ? (
                  <img src={tab.iconSrc} alt="" className="inline-block w-4 h-4 mr-1 rounded-full object-cover" />
                ) : null}
                {tab.buttonLabel || tab.title}
              </motion.button>
            );
          })}
        </div>
      </section>

      <AnimatePresence mode="wait">
        {selected && (
          <motion.section
            key={selected.key}
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.35 }}
            className="bg-background"
          >
            <div className="container mx-auto px-6 py-10 max-w-5xl">
              <div className={`rounded-2xl border-2 ${dimensionBorderColors[selected.color] ?? "border-border"} bg-card p-6 md:p-8`}>
                <div className="flex items-center gap-3 mb-2">
                  {selected.iconSrc ? (
                    <img src={selected.iconSrc} alt="" className="w-10 h-10 rounded-full object-cover" />
                  ) : (
                    <span className="text-3xl">{selected.emoji}</span>
                  )}
                  <div>
                    <h2 className="font-display text-xl md:text-2xl font-bold text-foreground">{selected.title}</h2>
                    <p className="text-muted-foreground text-sm">{selected.desc}</p>
                  </div>
                </div>

                <div className="grid md:grid-cols-2 gap-8 mt-6">
                  <div>
                    <p className="font-display text-xs tracking-[0.2em] uppercase text-muted-foreground mb-4">
                      {hero.detailPanel.traitsSectionTitle}
                    </p>
                    <div className="space-y-3">
                      {selected.traitGroups.map((group) => (
                        <div key={`${selected.key}-${group.mindset}`} className="bg-muted rounded-xl p-4">
                          <p className="font-display text-[0.65rem] tracking-[0.15em] uppercase text-muted-foreground mb-2">
                            {group.mindset}
                          </p>
                          <div className="space-y-2">
                            {group.traits.map((item) => (
                              <div key={`${group.mindset}-${item.trait}`} className="flex items-center justify-between gap-2">
                                <span className="text-sm font-display font-medium text-foreground">{item.trait}</span>
                                <div className="flex items-center gap-2 shrink-0">
                                  <div className="w-14 h-2 bg-secondary rounded-full overflow-hidden">
                                    <motion.div
                                      className={`h-full rounded-full ${dimensionColors[selected.color] ?? "bg-primary"}`}
                                      initial={{ width: 0 }}
                                      animate={{ width: `${Math.max(0, Math.min(100, item.pct))}%` }}
                                      transition={{ duration: 0.5, delay: 0.1 }}
                                    />
                                  </div>
                                  <span className={`text-xs font-display font-bold ${dimensionTextColors[selected.color] ?? ""} w-8 text-right`}>
                                    {item.pct}%
                                  </span>
                                </div>
                              </div>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div>
                    <p className="font-display text-xs tracking-[0.2em] uppercase text-muted-foreground mb-4">
                      {hero.detailPanel.coursesSectionTitle}
                    </p>
                    <div className="space-y-4">
                      {selected.courseGroups.map((group) => (
                        <div key={`${selected.key}-${group.category}`}>
                          <p className="font-display text-[0.65rem] tracking-[0.15em] uppercase text-muted-foreground mb-2 border-b border-border pb-1">
                            {group.category}
                          </p>
                          <div className="space-y-1.5">
                            {group.courses.map((course) => {
                              const href = course.href.trim() || (course.slug ? `/course/${course.slug}` : "#");
                              return (
                                <Link
                                  key={`${group.category}-${course.slug || course.name}`}
                                  to={href}
                                  className="group flex items-center gap-3 bg-muted rounded-xl p-3 hover:bg-muted/80 transition-colors"
                                >
                                  <span className="text-xl shrink-0">{course.emoji}</span>
                                  <div className="flex-1 min-w-0">
                                    <p className="font-display text-sm font-bold text-foreground group-hover:text-valencia transition-colors truncate">
                                      {course.name}
                                    </p>
                                  </div>
                                  <div className="flex items-center gap-2 shrink-0">
                                    <div className="w-16 h-2 bg-secondary rounded-full overflow-hidden">
                                      <motion.div
                                        className={`h-full rounded-full ${dimensionColors[selected.color] ?? "bg-primary"}`}
                                        initial={{ width: 0 }}
                                        animate={{ width: `${Math.max(0, Math.min(100, course.pct))}%` }}
                                        transition={{ duration: 0.5, delay: 0.15 }}
                                      />
                                    </div>
                                    <span className={`text-xs font-display font-bold ${dimensionTextColors[selected.color] ?? ""} w-8 text-right`}>
                                      {course.pct}%
                                    </span>
                                  </div>
                                </Link>
                              );
                            })}
                          </div>
                        </div>
                      ))}
                      {totalCourses === 0 && (
                        <p className="text-muted-foreground text-sm italic">{hero.detailPanel.emptyCoursesMessage}</p>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.section>
        )}
      </AnimatePresence>
    </>
  );
}

export type { HeroContent };