/* =========================================================================
   Morning Mob — drop / launch page
   A single hero piece, an edition note, a live countdown to release, and a
   waitlist signup. Once the countdown lands the piece becomes buyable.
   ========================================================================= */

function useCountdown(target) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  return { d, h, m, s, done: diff === 0 };
}

function CountCell({ value, label }) {
  return (
    <div style={{ flex: 1, textAlign: 'center', padding: '20px 8px', background: 'var(--canvas)' }}>
      <div style={{ fontFamily: 'var(--font-serif)', fontSize: 44, fontWeight: 400, color: 'var(--ink)', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{String(value).padStart(2, '0')}</div>
      <div style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--muted)', marginTop: 10 }}>{label}</div>
    </div>
  );
}

function DropView({ drop, go, onOpen, onAdd }) {
  const t = useMM();
  const targetRef = useRef(null);
  if (targetRef.current == null) {
    const d = new Date(); d.setDate(d.getDate() + 6); d.setHours(11, 0, 0, 0);
    targetRef.current = d.getTime();
  }
  const target = targetRef.current;
  const { d, h, m, s, done } = useCountdown(target);
  const releaseStr = new Date(target).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });

  const [email, setEmail] = useState('');
  const [joined, setJoined] = useState(false);
  const [focus, setFocus] = useState(false);
  const valid = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email);

  return (
    <div>
      {/* Hero */}
      <section className="mm-drop-hero" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 620, borderBottom: '1px solid var(--hairline)' }}>
        <div style={{ position: 'relative', background: 'var(--surface-card)', minHeight: 480 }}>
          <Photo id="drop-hero" ratio="auto" label="The drop — hero image" style={{ position: 'absolute', inset: 0, aspectRatio: 'auto', height: '100%' }} />
        </div>
        <div className="mm-drop-panel" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '64px 64px', maxWidth: 620 }}>
          <Eyebrow color="var(--tobacco)">{drop.collection}</Eyebrow>
          <h1 className="mm-drop-title" style={{ fontFamily: 'var(--font-serif)', fontSize: Math.round(56 * t.displayScale), fontWeight: 400, color: 'var(--ink)', margin: '20px 0 0', lineHeight: 1.05, letterSpacing: '-0.5px' }}>{drop.name}</h1>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: Math.round(20 * t.displayScale), color: 'var(--body-strong)', marginTop: 16, fontStyle: 'italic' }}>{drop.tagline}</p>
          <div style={{ display: 'flex', gap: 16, marginTop: 22, alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ background: 'var(--parchment)', color: 'var(--tobacco)', fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', padding: '5px 10px' }}>{drop.edition}</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 300, color: 'var(--body)' }}>{money(drop.price)}</span>
          </div>

          {/* Countdown / availability */}
          {!done ? (
            <div style={{ marginTop: 36 }}>
              <Eyebrow style={{ display: 'block', marginBottom: 12 }}>Releases {releaseStr} · 11:00 EST</Eyebrow>
              <div style={{ display: 'flex', gap: 1, background: 'var(--hairline)', border: '1px solid var(--hairline)' }}>
                <CountCell value={d} label="Days" />
                <CountCell value={h} label="Hours" />
                <CountCell value={m} label="Minutes" />
                <CountCell value={s} label="Seconds" />
              </div>

              {joined ? (
                <p style={{ color: 'var(--success)', marginTop: 24, letterSpacing: '0.5px' }}>You're on the list — we'll write the moment it opens.</p>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); if (valid) setJoined(true); }} style={{ display: 'flex', marginTop: 24, maxWidth: 460 }}>
                  <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Email address" onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
                    style={{ flex: 1, height: 48, padding: '0 14px', background: '#fff', borderRadius: 0, outline: 'none', borderRight: 'none',
                      border: '1px solid ' + (focus ? 'var(--hairline-strong)' : 'var(--hairline)'), fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, color: 'var(--ink)' }} />
                  <button type="submit" style={{ height: 48, padding: '0 28px', background: 'var(--ink)', color: '#fff', border: 'none',
                    fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', cursor: 'pointer', whiteSpace: 'nowrap' }}>Notify me</button>
                </form>
              )}
              <p style={{ color: 'var(--muted)', fontSize: 11, marginTop: 14, letterSpacing: '0.5px' }}>{drop.edition} · one per customer · no restock.</p>
            </div>
          ) : (
            <div style={{ marginTop: 36 }}>
              <Eyebrow color="var(--success)" style={{ display: 'block', marginBottom: 16 }}>Available now</Eyebrow>
              <button onClick={() => onAdd(drop, null)} style={{ ...primaryBtn, marginTop: 0, width: '100%', maxWidth: 460 }}>Add to cart — {money(drop.price)}</button>
              <p style={{ color: 'var(--muted)', fontSize: 11, marginTop: 14, letterSpacing: '0.5px' }}>{drop.edition} · one per customer · no restock.</p>
            </div>
          )}

          <button onClick={() => onOpen(drop)} style={{ alignSelf: 'flex-start', marginTop: 24, fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400,
            letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink)', background: 'none', border: 'none', borderBottom: '1px solid var(--ink)', padding: '0 0 4px', cursor: 'pointer' }}>View full product details</button>
        </div>
      </section>

      {/* Story + details */}
      <section style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '80px 28px' }}>
        <div className="mm-drop-story" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <Eyebrow color="var(--muted)">On the making</Eyebrow>
            <p style={{ fontFamily: 'var(--font-serif)', fontSize: Math.round(26 * t.displayScale), color: 'var(--ink)', lineHeight: 1.4, marginTop: 18 }}>{drop.desc}</p>
            <ul style={{ listStyle: 'none', margin: '32px 0 0', padding: 0, display: 'flex', flexDirection: 'column' }}>
              {drop.notes.map((n, i) => (
                <li key={i} style={{ display: 'flex', gap: 16, alignItems: 'baseline', padding: '16px 0', borderTop: '1px solid var(--hairline)' }}>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '1px', color: 'var(--tobacco)' }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 300, color: 'var(--body)', lineHeight: 1.6 }}>{n}</span>
                </li>
              ))}
            </ul>
            <div className="mm-drop-cols" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1, marginTop: 32, border: '1px solid var(--hairline)', background: 'var(--hairline)' }}>
              <SpecCell label="Material" value={drop.material} />
              <SpecCell label="Origin" value={drop.made} />
              <SpecCell label="Care" value={drop.care} />
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <Photo id="drop-detail-1" ratio="4 / 5" label="Detail — beadwork" />
            <Photo id="drop-detail-2" ratio="4 / 5" label="Detail — on figure" />
          </div>
        </div>
      </section>
    </div>
  );
}
window.DropView = DropView;