// Landing view — multiple layouts, switchable via Tweaks.
const { useState: useStateL, useRef: useRefL, useEffect: useEffectL } = React;

// Inline layout picker — lives on the landing page, between the intro and the
// project list. Two SVG icon tiles: text-list and grid-covers.
function InlineLayoutPicker({ value, onChange }) {
  const opts = [
    {
      value: 'text-list',
      label: 'list',
      icon: (
        <svg width="22" height="14" viewBox="0 0 22 14" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round">
          <line x1="2" y1="3"  x2="20" y2="3"/>
          <line x1="2" y1="7"  x2="16" y2="7"/>
          <line x1="2" y1="11" x2="18" y2="11"/>
        </svg>
      ),
    },
    {
      value: 'grid-covers',
      label: 'grid',
      icon: (
        <svg width="22" height="14" viewBox="0 0 22 14" fill="none" stroke="currentColor" strokeWidth="1.3">
          <rect x="2"  y="2" width="5" height="4" rx="0.6"/>
          <rect x="8.5" y="2" width="5" height="4" rx="0.6"/>
          <rect x="15" y="2" width="5" height="4" rx="0.6"/>
          <rect x="2"  y="8" width="5" height="4" rx="0.6"/>
          <rect x="8.5" y="8" width="5" height="4" rx="0.6"/>
          <rect x="15" y="8" width="5" height="4" rx="0.6"/>
        </svg>
      ),
    },
  ];
  return (
    <div className="inline-layout-picker" role="radiogroup" aria-label="layout">
      <span className="ilp-label">view</span>
      <div className="ilp-buttons">
        {opts.map((o) => (
          <button
            key={o.value}
            type="button"
            className="ilp-btn"
            role="radio"
            aria-checked={value === o.value}
            aria-pressed={value === o.value}
            title={`${o.label} view`}
            onClick={() => onChange(o.value)}
          >
            {o.icon}
            <span className="ilp-btn-label">{o.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function Intro() {
  return (
    <section className="intro">
      <p className="lede">
        a working archive of photography, film and travel — kept here so it
        doesn't disappear into a phone. mostly long format, mostly slow.
      </p>
      <p className="sub">
        sid · chicago / dc · <a href="https://instagram.com/tick.ley" target="_blank" rel="noopener">instagram</a> · <a href="https://sidtickle.com" target="_blank" rel="noopener">sidtickle.com</a>
      </p>
    </section>
  );
}

// --- Layout 1: list + cursor-following hover preview ---------------------
function ListHoverLayout({ projects, onOpen, coverTx }) {
  const [hover, setHover] = useStateL(null); // { idx, x, y }
  const wrapRef = useRefL(null);

  const onMove = (e, p, i) => {
    setHover({ idx: i, p, x: e.clientX, y: e.clientY });
  };
  const onLeave = () => setHover(null);

  return (
    <div className="list-hover" onMouseLeave={onLeave}>
      <div className="section-label">
        <span className="label">projects</span>
        <span className="count">{String(projects.length).padStart(2, '0')} total</span>
      </div>
      <ul className="row-list" ref={wrapRef}>
        {projects.map((p, i) => (
          <li
            key={p.id}
            className="row"
            onMouseMove={(e) => onMove(e, p, i)}
            onClick={() => onOpen(p.id)}
          >
            <span className="num">{String(i + 1).padStart(2, '0')}</span>
            <span className="title">{p.title}</span>
            <span className="meta-loc">{p.location} · {p.medium}</span>
            <span className="meta-year">{p.year}</span>
          </li>
        ))}
      </ul>
      <div
        className={`hover-preview ${hover ? 'active' : ''}`}
        style={hover ? { left: hover.x + 200, top: hover.y } : {}}
        aria-hidden="true"
      >
        {hover && (
          <img className={`cover-img tx-${coverTx}`} src={hover.p.cover} alt="" style={{width:'100%', height:'100%', objectFit:'cover'}} />
        )}
      </div>
    </div>
  );
}

// --- Layout 2: pure text list (no preview) --------------------------------
function TextListLayout({ projects, onOpen }) {
  return (
    <div className="text-list">
      <div className="section-label">
        <span className="label">projects</span>
        <span className="count">{String(projects.length).padStart(2, '0')} total</span>
      </div>
      <ul className="row-list">
        {projects.map((p, i) => (
          <li key={p.id} className="row" onClick={() => onOpen(p.id)}>
            <span className="num">{String(i + 1).padStart(2, '0')}</span>
            <span className="title-line">
              {p.title}
              <span className="dot">·</span>
              <span className="place">{p.location}</span>
              <span className="dot">·</span>
              <span className="medium">{p.medium}</span>
            </span>
            <span className="meta-year">{p.year}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// --- Layout 3: grid of covers --------------------------------------------
function GridCoversLayout({ projects, onOpen, coverTx }) {
  return (
    <div className="grid-covers">
      <div className="section-label">
        <span className="label">projects</span>
        <span className="count">{String(projects.length).padStart(2, '0')} total</span>
      </div>
      <div className="grid">
        {projects.map((p) => (
          <a key={p.id} className="card" onClick={() => onOpen(p.id)} role="button" tabIndex="0">
            <div className="cover">
              <img className={`cover-img tx-${coverTx}`} src={p.cover} alt={p.title} />
            </div>
            <div className="meta">
              <span className="title">{p.title}</span>
              <span className="year">{p.year}</span>
            </div>
            <span className="sub">{p.location} · {p.medium}</span>
          </a>
        ))}
      </div>
    </div>
  );
}

// --- Layout 4: featured + list -------------------------------------------
function FeaturedAndListLayout({ projects, onOpen, coverTx }) {
  const [feature, ...rest] = projects;
  return (
    <div className="featured-and-list">
      <div className="section-label">
        <span className="label">projects</span>
        <span className="count">{String(projects.length).padStart(2, '0')} total</span>
      </div>
      <div className="layout">
        <div className="feature" onClick={() => onOpen(feature.id)} style={{cursor:'pointer'}}>
          <div className="cover">
            <img className={`cover-img tx-${coverTx}`} src={feature.cover} alt={feature.title} />
          </div>
          <div className="feature-meta">
            <div className="eyebrow">— featured · {feature.eyebrow}</div>
            <h2>{feature.title}</h2>
            <p className="feature-sub">{feature.description}</p>
          </div>
        </div>
        <ul className="others">
          {rest.map((p) => (
            <li key={p.id} onClick={() => onOpen(p.id)}>
              <div>
                <span className="t">{p.title}</span>
                <span className="s">{p.location} · {p.medium}</span>
              </div>
              <span className="y">{p.year}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function Landing({ tweaks, onOpenProject, setTweak }) {
  const layout = tweaks.landingLayout;
  const coverTx = tweaks.coverTreatment;
  const projects = window.PROJECTS;

  let body;
  if (layout === 'text-list') body = <TextListLayout projects={projects} onOpen={onOpenProject} />;
  else if (layout === 'grid-covers') body = <GridCoversLayout projects={projects} onOpen={onOpenProject} coverTx={coverTx} />;
  else if (layout === 'featured') body = <FeaturedAndListLayout projects={projects} onOpen={onOpenProject} coverTx={coverTx} />;
  else body = <ListHoverLayout projects={projects} onOpen={onOpenProject} coverTx={coverTx} />;

  // Only show the inline picker when the current layout is one of the two
  // it can switch between. Other layouts (hover, featured) remain Tweaks-only.
  const showPicker = layout === 'text-list' || layout === 'grid-covers';

  return (
    <main className="landing">
      <Intro />
      {showPicker && (
        <InlineLayoutPicker
          value={layout}
          onChange={(v) => setTweak && setTweak('landingLayout', v)}
        />
      )}
      {body}
    </main>
  );
}

window.Landing = Landing;