/* global React, DETAILS, SERVICES, Icon */
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;

function thumbFor(src) {
  /* Video/brand/sub/file.mp4 → uploads/thumbs/brand/sub/file.jpg */
  if (src.startsWith('http')) return '';
  const parts = src.split('/');
  const brand = parts.slice(1, -1); // strip "Video/" prefix and filename
  const stem = parts[parts.length - 1].replace(/\.[^.]+$/, '');
  return ['uploads', 'thumbs', ...brand, stem + '.jpg'].join('/');
}

function LocalVideoTile({ v, active, onToggle }) {
  const thumb = v.thumb || thumbFor(v.src);
  const videoRef = useRefD(null);
  useEffectD(() => {
    if (active && videoRef.current) {
      videoRef.current.play().catch(() => {});
    }
  }, [active]);
  return (
    <div className="d-video-frame" onClick={onToggle} style={{ cursor: 'pointer' }}>
      {active ? (
        <video ref={videoRef} src={v.src} controls playsInline poster={thumb}
          className="d-video-local" onClick={(e) => e.stopPropagation()} />
      ) : (
        <>
          <img src={thumb} alt={v.title || ''} className="d-video-thumb" loading="lazy" />
          <div className="d-video-play">
            <span className="d-play-btn">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>
            </span>
          </div>
        </>
      )}
    </div>
  );
}

const CAT_COLOR = {
  Growth: "#6E7B57",
  Reach: "#7A6E8C",
  Engagement: "#B0654A",
  Views: "#4F7488",
  Virality: "#9A7B4F",
};

/* ---- a row of big numbers ---- */
function StatRow({ items }) {
  return (
    <div className="d-statrow">
      {items.map((s, i) => (
        <div className="d-stat" key={i}>
          <div className="d-stat-val">{s.value}</div>
          <div className="d-stat-lbl">{s.label}{s.delta && <span className="d-delta">{s.delta} YoY</span>}</div>
        </div>
      ))}
    </div>
  );
}

/* ---- NOTABLE BRAND WINS ---- */
function WinsBlock({ block }) {
  return (
    <section className="d-block">
      <div className="d-kicker">{block.title}</div>
      <div className="d-wins">
        {block.items.map((w, i) => {
          const c = CAT_COLOR[w.cat] || "#8C8775";
          return (
            <div className="d-win d-win--vivid" key={i} style={{ '--accent': c }}>
              <div className="d-win-cat" style={{ color: c }}>
                <span className="d-win-dot" style={{ background: c }} />{w.cat}
              </div>
              <div className="d-win-brand">{w.brand}</div>
              <div className="d-win-stat">{w.stat}</div>
              <div className="d-win-desc">{w.desc}</div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ---- a role / brand case study ---- */
function RoleBlock({ block }) {
  return (
    <section className="d-block d-role">
      <div className="d-role-head">
        <h3>{block.company}</h3>
      </div>
      <p className="d-role-summary">{block.summary}</p>

      {block.media && (
        <div className="d-media">
          <div className="d-media-frame">
            {block.media.src ? (
              <video src={block.media.src} controls playsInline poster={block.media.thumb || thumbFor(block.media.src)}
                style={{ display: "block", width: "100%", borderRadius: "18px" }} />
            ) : (
              <image-slot id={block.media.slot} shape="rounded" radius="18"
                placeholder="Drop the show still / video frame"
                style={{ display: "block", width: "100%", aspectRatio: "16 / 9" }}></image-slot>
            )}
            <div className="d-media-cap">{block.media.caption}</div>
          </div>
          {block.media.stats && (
            <div className="d-media-stats">
              {block.media.stats.map((s, i) => (
                <div className="d-mstat" key={i}>
                  <div className="d-mstat-val">{s.value}</div>
                  <div className="d-mstat-lbl">{s.label}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {block.groups && (
        <div className="d-groups">
          {block.groupsTitle && <div className="d-kicker">{block.groupsTitle}</div>}
          {block.groups.map((g, i) => (
            <div className="d-group" key={i}>
              <div className="d-group-name">{g.platform}</div>
              <div className="d-group-grid">
                {g.stats.map((s, k) => (
                  <div className="d-gstat" key={k}>
                    <div className="d-gstat-val">{s.value}</div>
                    <div className="d-gstat-lbl">{s.label}</div>
                    {s.delta && <div className="d-gstat-delta">{s.delta} YoY</div>}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}

      {block.did && (
        <div className="d-sub">
          <div className="d-sub-h">What I did</div>
          <ul className="d-list">
            {block.did.map((x, i) => <li key={i}><span className="mk">—</span><span>{x}</span></li>)}
          </ul>
        </div>
      )}

      {block.results && (
        <div className="d-sub">
          <div className="d-sub-h">Notable results</div>
          <ul className="d-list d-list-num">
            {block.results.map((x, i) => <li key={i}><span className="mk">{String(i + 1).padStart(2, "0")}</span><span>{x}</span></li>)}
          </ul>
        </div>
      )}
    </section>
  );
}

function StatsBlock({ block }) {
  return (
    <section className="d-block">
      {block.title && <div className="d-kicker">{block.title}</div>}
      {block.note && <p className="d-note">{block.note}</p>}
      <StatRow items={block.items} />
    </section>
  );
}

function CaptionGrid({ items }) {
  return (
    <div className="d-caption-grid">
      {items.map((item, i) => (
        <div key={i} className="d-caption-item">
          <img src={item.src} alt={item.caption || ""} className="d-caption-img" />
          {item.caption && <p className="d-caption-label">{item.caption}</p>}
        </div>
      ))}
    </div>
  );
}

function TextBlock({ block }) {
  return (
    <section className="d-block">
      {block.title && <div className="d-kicker">{block.title}</div>}
      {block.igLinks && <IgLinksGrid items={block.igLinks} centered={block.igLinksCentered} />}
      {block.captionImgs && <CaptionGrid items={block.captionImgs} />}
      {block.imgs && <GalleryImgs imgs={block.imgs} layout={block.layout} />}
      {block.note && <p className="d-note">{block.note}</p>}
      {block.highlights && <StatRow items={block.highlights} />}
      {block.items && block.items.length > 0 && (
        typeof block.items[0] === "object" ? (
          <div className="d-items-card">
            {block.items.map((x, i) => (
              <div key={i} className="d-items-card-row">
                <span className="d-items-card-icon">{x.icon}</span>
                <span className="d-items-card-text">{x.text}</span>
              </div>
            ))}
          </div>
        ) : (
          <ul className="d-list d-list-cols">
            {block.items.map((x, i) => <li key={i}><span className="mk">—</span><span>{x}</span></li>)}
          </ul>
        )
      )}
    </section>
  );
}

function ChecklistBlock({ block }) {
  return (
    <section className="d-block">
      <div className="d-kicker">{block.title}</div>
      {block.note && <p className="d-note">{block.note}</p>}
      <ul className="d-list d-list-cols">
        {block.items.map((x, i) => <li key={i}><span className="mk">—</span><span>{x}</span></li>)}
      </ul>
    </section>
  );
}

function GalleryImgs({ imgs, layout }) {
  const [hero, ...rest] = imgs;
  if (layout === "hero") {
    return (
      <div className="d-gallery-hero">
        <img src={hero} alt="" className="d-gallery-hero-img" />
        {rest.length > 0 && (
          <div className="d-gallery-hero-row">
            {rest.map((src, i) => <img key={i} src={src} alt="" className="d-gallery-hero-sub" />)}
          </div>
        )}
      </div>
    );
  }
  if (layout === "full") {
    return (
      <div className="d-gallery-full">
        {imgs.map((src, i) => <img key={i} src={src} alt="" className="d-gallery-full-img" />)}
      </div>
    );
  }
  return (
    <div className="d-gallery-grid">
      {imgs.map((src, i) => <img key={i} src={src} alt="" className="d-gallery-grid-img" />)}
    </div>
  );
}

function GalleryBlock({ block }) {
  if (block.imgs) {
    return (
      <section className="d-block">
        {block.title && <div className="d-kicker">{block.title}</div>}
        {block.note && <p className="d-note">{block.note}</p>}
        <GalleryImgs imgs={block.imgs} layout={block.layout} />
      </section>
    );
  }

  return (
    <section className="d-block">
      {block.title && <div className="d-kicker">{block.title}</div>}
      {block.note && <p className="d-note">{block.note}</p>}
      <div className={`d-gallery cols-${block.slots.length}`}>
        {block.slots.map((s) => (
          <div className="d-slot" key={s.id}>
            <image-slot id={s.id} shape="rounded" radius="16" placeholder={s.label}
              style={{ display: "block", width: "100%", aspectRatio: "4 / 5" }}></image-slot>
          </div>
        ))}
      </div>
    </section>
  );
}

function BrandsBlock({ block }) {
  return (
    <section className="d-block d-block-tight">
      <div className="d-kicker">{block.title}</div>
      <div className="d-chips">
        {block.items.map((b) => <span className="d-chip" key={b}>{b}</span>)}
      </div>
    </section>
  );
}

function VideoBlock({ block }) {
  const [activeIdx, setActiveIdx] = useStateD(null);
  return (
    <section className="d-block">
      {block.title && <div className="d-kicker">{block.title}</div>}
      <div className="d-video-grid">
        {block.items.map((v, i) => (
          <div className="d-video-item" key={i}>
            {v.src ? (
              <LocalVideoTile v={v} active={activeIdx === i}
                onToggle={() => setActiveIdx(activeIdx === i ? null : i)} />
            ) : (
              <div className="d-video-frame"
                onClick={() => setActiveIdx(activeIdx === i ? null : i)}
                style={{ cursor: "pointer" }}>
                {activeIdx === i ? (
                  <iframe
                    src={`https://drive.google.com/file/d/${v.id}/preview?autoplay=1`}
                    allow="autoplay; fullscreen"
                    frameBorder="0"
                    allowFullScreen
                  />
                ) : (
                  <>
                    <img className="d-video-thumb"
                      src={`https://drive.google.com/thumbnail?id=${v.id}&sz=w600`}
                      alt={v.title || ""} loading="lazy" />
                    <div className="d-video-play">
                      <span className="d-play-btn">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>
                      </span>
                    </div>
                  </>
                )}
              </div>
            )}
            {v.title && <div className="d-video-lbl">{v.title}</div>}
          </div>
        ))}
      </div>
    </section>
  );
}

const GALLERY_BRANDS = ["All", "Anya Hindmarch", "Alexander McQueen", "Lulu Guinness"];
const GALLERY_TYPES  = ["All", "Campaign", "Store tour", "Brand collaboration", "Evergreen content", "Voiceover", "Making of"];

function VideoGallery({ block }) {
  const [activeBrand, setActiveBrand] = useStateD("All");
  const [activeType,  setActiveType]  = useStateD("All");
  const [activeKey,   setActiveKey]   = useStateD(null);

  const availableTypes = ["All", ...GALLERY_TYPES.filter(t =>
    block.videos.some(v => (activeBrand === "All" || v.brand === activeBrand) && v.type === t)
  )];

  const filtered = block.videos.filter(v =>
    (activeBrand === "All" || v.brand === activeBrand) &&
    (activeType  === "All" || v.type  === activeType)
  );

  function pickBrand(b) { setActiveBrand(b); setActiveType("All"); setActiveKey(null); }
  function pickType(t)  { setActiveType(t);  setActiveKey(null); }

  return (
    <section className="d-block">
      <div className="d-gallery-filter">
        <div className="d-filter-row">
          <span className="d-filter-label">BRAND</span>
          {GALLERY_BRANDS.map(b => (
            <button key={b} className={`d-filter-btn${activeBrand === b ? " active" : ""}`} onClick={() => pickBrand(b)}>{b}</button>
          ))}
        </div>
        <div className="d-filter-row">
          <span className="d-filter-label">TYPE</span>
          {availableTypes.map(t => (
            <button key={t} className={`d-filter-btn${activeType === t ? " active" : ""}`} onClick={() => pickType(t)}>{t}</button>
          ))}
        </div>
      </div>
      <div className="d-video-grid">
        {filtered.map(v => (
          <div className="d-video-item" key={v.src}>
            <LocalVideoTile v={v} active={activeKey === v.src}
              onToggle={() => setActiveKey(activeKey === v.src ? null : v.src)} />
            {v.title && <div className="d-video-lbl">{v.title}</div>}
          </div>
        ))}
      </div>
    </section>
  );
}

function PlatformTabs({ block }) {
  const [activeIdx, setActiveIdx] = useStateD(0);
  const current = block.platforms[activeIdx];
  return (
    <section className="d-block">
      <div className="d-ptabs">
        {block.platforms.map((p, i) => (
          <button key={p.platform} className={`d-ptab${activeIdx === i ? " active" : ""}`}
            onClick={() => setActiveIdx(i)}>{p.platform}</button>
        ))}
      </div>
      <div className="d-pcard">
        <div className="d-pcard-head">
          <span className="d-pcard-name">{current.platform}</span>
          <span className="d-pcard-headline">
            <span className="d-pcard-val">{current.headline.value}</span>
            <span className="d-pcard-lbl">{current.headline.label}</span>
            <span className="d-pcard-delta">{current.headline.delta}</span>
          </span>
        </div>
        <div className="d-pcard-metrics">
          {current.stats.map((s, i) => (
            <div className="d-pmetric" key={i}>
              <div className="d-pmetric-lbl">{s.label}</div>
              <div className="d-pmetric-val">{s.value}</div>
              <div className="d-pmetric-delta">{s.delta}</div>
            </div>
          ))}
        </div>
      </div>
      {block.china && (
        <div className="d-pchina">
          <span className="d-pchina-label">{block.china.platform}</span>
          <div className="d-pchina-stats">
            {block.china.stats.map((s, i) => (
              <div className="d-pchina-stat" key={i}>
                <span className="d-pchina-val">{s.value}</span>
                <span className="d-pchina-lbl">{s.label}</span>
                <span className="d-pchina-delta">{s.delta}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </section>
  );
}

function IgLinksGrid({ items, centered }) {
  const cls = `d-video-grid${centered ? " d-video-grid-center" : ""}`;
  return (
    <div className={cls}>
      {items.map((item) => (
        <a key={item.shortcode}
          href={`https://www.instagram.com/${item.type}/${item.shortcode}/`}
          target="_blank" rel="noopener noreferrer"
          className={`d-ig-card${item.thumb ? " has-thumb" : ""}`}>
          {item.thumb && <img src={item.thumb} alt={item.title || ""} className="d-ig-thumb" style={item.thumbFit === "contain" ? { objectFit: "contain", background: "#fff" } : undefined} />}
          <div className="d-ig-body">
            <svg className="d-ig-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="22" height="22"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
            {item.title && <span className="d-ig-title">{item.title}</span>}
            <span className="d-ig-cta">View on Instagram →</span>
          </div>
        </a>
      ))}
    </div>
  );
}

function IgLinks({ block }) {
  return (
    <section className="d-block">
      <IgLinksGrid items={block.items} />
    </section>
  );
}

function QuoteBlock({ block }) {
  return (
    <section className="d-block d-block-quote">
      <blockquote className="d-quote">
        <p className="d-quote-text">{block.text}</p>
        {block.attribution && <cite className="d-quote-attr">— {block.attribution}</cite>}
      </blockquote>
    </section>
  );
}

function renderBlock(block, i) {
  switch (block.t) {
    case "wins":         return <WinsBlock block={block} key={i} />;
    case "role":         return <RoleBlock block={block} key={i} />;
    case "stats":        return <StatsBlock block={block} key={i} />;
    case "checklist":    return <ChecklistBlock block={block} key={i} />;
    case "gallery":      return <GalleryBlock block={block} key={i} />;
    case "brands":       return <BrandsBlock block={block} key={i} />;
    case "videos":       return <VideoBlock block={block} key={i} />;
    case "videogallery":    return <VideoGallery block={block} key={i} />;
    case "platform-tabs":  return <PlatformTabs block={block} key={i} />;
    case "quote":          return <QuoteBlock block={block} key={i} />;
    case "ig-links":       return <IgLinks block={block} key={i} />;
    case "text":           return <TextBlock block={block} key={i} />;
    default: return null;
  }
}

/* ===================== DETAIL OVERLAY ===================== */
function DetailOverlay({ index, onClose }) {
  const open = index !== null && index !== undefined;
  const [mounted, setMounted] = useStateD(false);
  const [exiting, setExiting] = useStateD(false);
  const lastIndex = useRefD(index ?? 0);
  const wasOpen = useRefD(false);

  if (open) lastIndex.current = index;

  useEffectD(() => {
    if (open) {
      wasOpen.current = true;
      setMounted(true);
      setExiting(false);
      document.body.style.overflow = "hidden";
      const onKey = (e) => { if (e.key === "Escape") onClose(); };
      window.addEventListener("keydown", onKey);
      const scroller = document.querySelector(".detail-scroll");
      if (scroller) scroller.scrollTop = 0;
      return () => { window.removeEventListener("keydown", onKey); };
    } else if (wasOpen.current) {
      wasOpen.current = false;
      setExiting(true);
      const t = setTimeout(() => {
        setMounted(false);
        setExiting(false);
        document.body.style.overflow = "";
      }, 220);
      return () => clearTimeout(t);
    }
  }, [open, index]);

  if (!mounted) return null;

  const displayIndex = lastIndex.current;
  const service = SERVICES[displayIndex];
  const detail = DETAILS[displayIndex];

  return (
    <div className={`detail${exiting ? " exiting" : ""}`} role="dialog" aria-modal="true">
      <div className="detail-bar">
        <button className="d-back" onClick={onClose}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 6l-6 6 6 6" /></svg>
          Back
        </button>
        <div className="d-bar-title">{service.name}</div>
      </div>

      <div className="detail-scroll">
        <header className="d-hero wrap">
          <div className="d-hero-eyebrow">{service.tag}</div>
          <h1 className="d-bigname">
            {service.name.split(" ").map((w, i) => (
              <span className="d-line" key={i} style={{ display: "inline" }}>
                <span className="d-line-i" style={{ "--li": i, display: "inline" }}>{w}{i < service.name.split(" ").length - 1 ? " " : ""}</span>
              </span>
            ))}
          </h1>
          <div className="d-hero-meta">
            <div className="d-tags">
              {(service.tags || []).map((t) => <span className="d-tag" key={t}>{t}</span>)}
            </div>
            <p className="d-intro">{detail.intro}</p>
          </div>
        </header>

        <div className="wrap d-body">
          {detail.blocks.map((b, i) => renderBlock(b, i))}
        </div>

        <div className="wrap d-foot">
          <button className="btn btn-dark" onClick={onClose}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 6l-6 6 6 6" /></svg>
            All services
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DetailOverlay });