// Work — draggable horizontal portfolio strip

const WORK_ITEMS = [
  { title: "Helix AI Dashboard",      tags: ["Product Design", "AI/ML"],         img: "assets/our work/work 1.png", href: "#" },
  { title: "Meridian Brand Identity", tags: ["Branding", "Visual Identity"],      img: "assets/our work/work 2.png", href: "#" },
  { title: "Forma SaaS Platform",     tags: ["UI Design", "SaaS"],                img: "assets/our work/work 3.png", href: "#" },
  { title: "Caspian Web Redesign",    tags: ["Web Design", "Conversion"],         img: "assets/our work/work 4.png", href: "#" },
  { title: "Orbis Motion System",     tags: ["Motion", "Design System"],          img: "assets/our work/work 5.png", href: "#" },
  { title: "Stackfield App UI",       tags: ["Mobile UI", "Product"],             img: "assets/our work/work 6.png", href: "#" },
  { title: "Rayfield Marketing",      tags: ["Marketing", "Landing Page"],        img: "assets/our work/work 7.png", href: "#" },
];

// ─── WorkCard ─────────────────────────────────────────────────
const WorkCard = ({ title, tags, img, href }) => (
  <article className="ag-work-card">
    <div
      className="ag-work-card__img"
      style={{ backgroundImage: `url('${img}')` }}
      role="img"
      aria-label={title}
    />
    <div className="ag-work-card__scrim" />
    <div className="ag-work-card__overlay">
      <h3 className="ag-work-card__title">{title}</h3>
      <div className="ag-work-card__tags">
        {tags.map((t) => (
          <span key={t} className="ag-work-card__tag">{t}</span>
        ))}
      </div>
      <div className="ag-work-card__cta">
        <a
          href={href}
          className="ag-work-card__arrow"
          aria-label={`View project: ${title}`}
          onClick={(e) => e.stopPropagation()}
        >
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="5" y1="12" x2="19" y2="12"/>
            <polyline points="12,5 19,12 12,19"/>
          </svg>
        </a>
      </div>
    </div>
  </article>
);

// ─── Work ─────────────────────────────────────────────────────
const Work = ({ data, lang }) => {
  const hasSection = data !== null && data !== undefined;
  const items = hasSection
    ? (Array.isArray(data) ? [...data].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)).map(w => ({
        title: i18(w.title, lang) || '',
        tags:  (i18(w.tags, lang) || '').split(',').map(t => t.trim()).filter(Boolean),
        img:   w.img  || '',
        href:  w.href || '#',
      })) : [])
    : (window.TRANSLATIONS?.works?.items || WORK_ITEMS).map((_, i) => ({
        title: t('works.items.' + i + '.title', lang),
        tags:  t('works.items.' + i + '.tags', lang).split(',').map(x => x.trim()).filter(Boolean),
        img:   WORK_ITEMS[i]?.img  || '',
        href:  WORK_ITEMS[i]?.href || '#',
      }));

  const sectionRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const wrapRef  = React.useRef(null);
  const rafRef   = React.useRef(null);
  const setupRef = React.useRef(null);

  const isMobile = () => window.innerWidth <= 960;

  React.useEffect(() => {
    const section = sectionRef.current;
    const track   = trackRef.current;
    const wrap    = wrapRef.current;
    if (!section || !track || !wrap) return;

    let maxTranslate = 0;
    let enabled = false;

    const setup = () => {
      enabled = !isMobile();
      if (!enabled) {
        section.style.height = "";
        track.style.transform = "";
        return;
      }

      maxTranslate = Math.max(0, track.scrollWidth - wrap.offsetWidth);
      section.style.height = `${window.innerHeight + maxTranslate}px`;
      track.style.transform = "translateX(0px)";
    };

    setupRef.current = setup;

    const onScroll = () => {
      if (!enabled) return;
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      rafRef.current = requestAnimationFrame(() => {
        const sectionTop = section.getBoundingClientRect().top + window.scrollY;
        const scrollable = parseFloat(section.style.height) - window.innerHeight;
        if (scrollable <= 0) return;
        const progress = Math.max(0, Math.min(1, (window.scrollY - sectionTop) / scrollable));
        track.style.transform = `translateX(${-progress * maxTranslate}px)`;
      });
    };

    const onResize = () => {
      setup();
      onScroll();
    };

    setup();
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onResize);

    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onResize);
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
    };
  }, []);

  React.useEffect(() => {
    setupRef.current?.();
  }, [items.length]);

  React.useEffect(() => {
    const track = trackRef.current;
    const wrap  = wrapRef.current;
    if (!track || !wrap || isMobile()) return;

    let dragging    = false;
    let startX      = 0;
    let startTransX = 0;

    const getTransX = () => new DOMMatrix(getComputedStyle(track).transform).m41;
    const clamp = (v) => Math.max(-(track.scrollWidth - wrap.offsetWidth), Math.min(0, v));

    const onDown = (x) => {
      dragging = true;
      startX = x;
      startTransX = getTransX();
      track.classList.add("is-dragging");
      track.style.transition = "none";
    };

    const onMove = (x) => {
      if (!dragging) return;
      track.style.transform = `translateX(${clamp(startTransX + x - startX)}px)`;
    };

    const onUp = () => {
      if (!dragging) return;
      dragging = false;
      track.classList.remove("is-dragging");
    };

    const onMouseMove = (e) => { if (dragging) { e.preventDefault(); onMove(e.clientX); } };
    const onResize = () => {
      track.style.transform = `translateX(${clamp(getTransX())}px)`;
    };

    const onMouseDown = (e) => onDown(e.clientX);
    const onTouchStart = (e) => onDown(e.touches[0].clientX);
    const onTouchMove = (e) => onMove(e.touches[0].clientX);

    track.addEventListener("mousedown", onMouseDown);
    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onUp);
    window.addEventListener("resize", onResize);
    track.addEventListener("touchstart", onTouchStart, { passive: true });
    track.addEventListener("touchmove", onTouchMove, { passive: true });
    track.addEventListener("touchend", onUp);

    return () => {
      track.removeEventListener("mousedown", onMouseDown);
      track.removeEventListener("touchstart", onTouchStart);
      track.removeEventListener("touchmove", onTouchMove);
      track.removeEventListener("touchend", onUp);
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onUp);
      window.removeEventListener("resize", onResize);
    };
  }, []);

  return (
    <section className="ag-work" id="ag-section-works" ref={sectionRef}>
      <div className="ag-work__sticky">
        <div className="ag-work__head">
          <SectionHeading
            eyebrow={t('works.eyebrow', lang)}
            align="start"
            sub={t('works.sub', lang)}
          >
            {t('works.heading1', lang)}<br/>{t('works.heading2', lang)}
          </SectionHeading>
        </div>

        <div className="ag-work__track-wrap" ref={wrapRef}>
          <div className="ag-work__track" ref={trackRef}>
            {items.map((item) => (
              <WorkCard key={item.title} {...item} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Work = Work;