"use client";

import { useLucideIcons } from "@/hooks/useLucideIcons";

interface Stat {
  value: string;
  label: string;
}

interface HeroAction {
  href: string;
  label: string;
  variant: "primary" | "green" | "outline" | "glass" | "dark";
  iconBefore?: string;
  iconAfter?: string;
  external?: boolean;
}

interface RingText {
  top?: string;
  middle: string;
  bottom?: string;
}

interface Polaroid {
  cap: string;
}

export interface PageHeroProps {
  accent?: "purple" | "green";
  breadcrumb: string;
  eyebrow: string;
  titleTop: string;
  titleBottom: React.ReactNode;
  lede: string;
  stats: ReadonlyArray<Stat>;
  actions: ReadonlyArray<HeroAction>;
  stageImage: string;
  stageAriaLabel: string;
  stamp: string;
  floorEyebrow: string;
  floorTitle: React.ReactNode;
  ringText: RingText;
  polaroids: [Polaroid, Polaroid];
}

const BTN_CLASS: Record<HeroAction["variant"], string> = {
  primary: "btn btn-primary btn-lg",
  green: "btn btn-green btn-lg",
  outline: "btn btn-outline btn-lg",
  glass: "btn btn-glass btn-lg",
  dark: "btn btn-dark btn-lg",
};

export function PageHero(props: PageHeroProps) {
  useLucideIcons();
  const {
    accent = "purple",
    breadcrumb,
    eyebrow,
    titleTop,
    titleBottom,
    lede,
    stats,
    actions,
    stageImage,
    stageAriaLabel,
    stamp,
    floorEyebrow,
    floorTitle,
    ringText,
    polaroids,
  } = props;

  const sectionClass = accent === "green" ? "page-hero green-accent" : "page-hero";
  const topOrbClass = accent === "green" ? "ph-orb green" : "ph-orb purple";
  const bottomOrbClass = accent === "green" ? "ph-orb purple" : "ph-orb green";
  const ringTopCircle = accent === "green" ? "#AFB171" : "#B970D0";
  const ringBottomCircle = accent === "green" ? "#B970D0" : "#AFB171";

  return (
    <section className={sectionClass} data-screen-label="01 Hero">
      <div className={topOrbClass} />
      <div className={bottomOrbClass} />
      <div className="ph-pattern" />
      <div className="wrap">
        <div className="ph-crumbs">
          <a href="/">الرئيسية</a>
          <span className="sep">/</span>
          <span>{breadcrumb}</span>
        </div>
        <div className="ph-grid">
          <div className="ph-content">
            <span className="ph-eyebrow">
              <span className="pip" />
              {eyebrow}
            </span>
            <h1 className="ph-title">
              <span className="line">{titleTop}</span>
              <span className="line">{titleBottom}</span>
            </h1>
            <p className="ph-lede">{lede}</p>
            <div className="ph-stats">
              {stats.map((stat) => (
                <div key={stat.label} className="ph-stat">
                  <span className="n">
                    <em>{stat.value}</em>
                  </span>
                  <span className="l">{stat.label}</span>
                </div>
              ))}
            </div>
            <div className="ph-cta">
              {actions.map((action) => (
                <a
                  key={action.href + action.label}
                  href={action.href}
                  className={BTN_CLASS[action.variant]}
                  {...(action.external ? { rel: "noopener noreferrer", target: "_blank" } : {})}
                >
                  {action.iconBefore && <i data-lucide={action.iconBefore} />}
                  {action.label}
                  {action.iconAfter && <i data-lucide={action.iconAfter} />}
                </a>
              ))}
            </div>
          </div>
          <div className="ph-stage" role="img" aria-label={stageAriaLabel}>
            <div className="ph-image" style={{ backgroundImage: `url('${stageImage}')` }} />
            <div className="ph-image-overlay" />
            <div className="ph-image-grain" />
            <span className="ph-stamp">
              <span className="d" />
              {stamp}
            </span>
            <div className="ph-floor">
              <div className="eb">{floorEyebrow}</div>
              <div className="ttl">{floorTitle}</div>
            </div>
            <div className="ph-ring" aria-hidden="true">
              <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <circle cx="50" cy="50" r="44" fill="none" stroke="#151515" strokeWidth="1.5" strokeDasharray="4 5" />
                <circle cx="50" cy="6" r="7" fill={ringTopCircle} />
                <circle cx="50" cy="94" r="7" fill={ringBottomCircle} />
                {ringText.top && (
                  <text x="50" y="40" textAnchor="middle" fill="#151515" fontFamily="JetBrains Mono, monospace" fontSize="6" fontWeight="700" letterSpacing="1" opacity="0.55">
                    {ringText.top}
                  </text>
                )}
                <text x="50" y="58" textAnchor="middle" fill="#151515" fontFamily="JetBrains Mono, monospace" fontSize="10" fontWeight="800" letterSpacing="2">
                  {ringText.middle}
                </text>
                {ringText.bottom && (
                  <text x="50" y="70" textAnchor="middle" fill="#151515" fontFamily="JetBrains Mono, monospace" fontSize="5" fontWeight="600" letterSpacing="1.5" opacity="0.45">
                    {ringText.bottom}
                  </text>
                )}
              </svg>
            </div>
            <div className="ph-pol-stack" aria-hidden="true">
              <div className="ph-pol ph-pol-1">
                <div className="photo" />
                <div className="cap">{polaroids[0].cap}</div>
              </div>
              <div className="ph-pol ph-pol-2">
                <div className="photo" />
                <div className="cap">{polaroids[1].cap}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}