/* All screens: Home, Search, Map, Calendar, Detail, Booking, Tickets, Profile, Notifications, Organiser, CreateEvent, AI */

const { useState, useEffect, useRef, useMemo } = React;

// ─── HOME / DISCOVER ──────────────────────────────────────────────
const HomeScreen = ({ tweaks, isMobile, nav }) => {
  const heroVariant = tweaks.heroVariant || "stack";
  const cardVariant = tweaks.cardStyle || "rich";
  const dense = tweaks.density || "comfortable";
  const currency = tweaks.currency || "INR";
  const friends = tweaks.showFriends !== false;
  const [activeMood, setActiveMood] = useState(null);
  const [heroIdx, setHeroIdx] = useState(0);
  const heroEvents = DATA.events.slice(0, 3);

  useEffect(() => {
    const t = setInterval(() => setHeroIdx(i => (i+1) % heroEvents.length), 6000);
    return () => clearInterval(t);
  }, []);

  // Hero variants
  const Hero = () => {
    if (heroVariant === "marquee") {
      // Editorial marquee hero — large text + scrolling tape
      const ev = heroEvents[heroIdx];
      return (
        <div style={{ position:"relative", padding: isMobile?"24px 18px":"40px 28px", borderBottom:"1px solid var(--line)" }}>
          <div className="t-eyebrow" style={{ marginBottom:14 }}>● Live now in {DATA.city} · {DATA.events.length} events this week</div>
          <h1 className="t-display" style={{ fontSize: isMobile?"clamp(36px, 11vw, 56px)":"clamp(56px, 7vw, 96px)", lineHeight:0.95, marginBottom:18 }}>
            What's good <em style={{ fontFamily:"serif", fontStyle:"italic", color:"var(--primary)" }}>tonight</em>?
          </h1>
          <div style={{ display:"flex", gap:12, alignItems:"center", marginBottom:20 }}>
            <button onClick={()=>nav("ai")} className="btn btn-primary"><I.sparkle cls="ico-sm" />Ask AI for plans</button>
            <button onClick={()=>nav("search")} className="btn btn-ghost"><I.search cls="ico-sm" />Browse all</button>
          </div>
          <div style={{ marginTop:24, padding:"14px 0", borderTop:"1px dashed var(--line-strong)", borderBottom:"1px dashed var(--line-strong)" }}>
            <Marquee items={[`Now: ${DATA.events[3].title}`, `Selling fast: ${DATA.events[1].title}`, `Tonight: ${DATA.events[0].title}`, `Free: ${DATA.events[11].title}`, `Trending: ${DATA.events[2].title}`]} />
          </div>
        </div>
      );
    }
    if (heroVariant === "split") {
      const ev = heroEvents[heroIdx];
      return (
        <div style={{ display: isMobile?"block":"grid", gridTemplateColumns: isMobile?"":"1fr 1fr", gap:0, borderBottom:"1px solid var(--line)" }}>
          <div style={{ padding: isMobile?"24px 18px":"56px 48px", display:"flex", flexDirection:"column", justifyContent:"center", gap:18, minHeight: isMobile?280:480 }}>
            <div className="t-eyebrow">● Featured tonight</div>
            <h1 className="t-display" style={{ fontSize: isMobile?34:64, lineHeight:1.0 }}>{ev.title}</h1>
            <div style={{ color:"var(--ink-2)", fontSize:14, display:"flex", flexWrap:"wrap", gap:14 }}>
              <span className="t-mono">{ev.date} · {ev.time}</span>
              <span>{ev.venue}, {ev.area}</span>
            </div>
            <div style={{ display:"flex", gap:10, marginTop:6 }}>
              <button onClick={()=>nav("detail", ev.id)} className="btn btn-primary">Get tickets · {fmtPrice(ev.price, currency)}</button>
              <button className="btn btn-ghost"><I.heart cls="ico-sm" />Save</button>
            </div>
            <div style={{ display:"flex", gap:6, marginTop:12 }}>
              {heroEvents.map((_, i) => (
                <button key={i} onClick={()=>setHeroIdx(i)} style={{ height:3, flex: i===heroIdx?2:1, background: i===heroIdx?"var(--primary)":"var(--line-strong)", transition:"all 0.5s" }} />
              ))}
            </div>
          </div>
          <div style={{ position:"relative", aspectRatio: isMobile?"16/10":"unset", minHeight: isMobile?0:480 }}>
            <img src={ev.image} alt="" style={{ width:"100%", height:"100%", objectFit:"cover" }} />
          </div>
        </div>
      );
    }
    // Stack (default) — full bleed image with content over
    const ev = heroEvents[heroIdx];
    return (
      <div style={{ position:"relative", margin: isMobile?"0 0 0":"24px 28px 0", height: isMobile?420:520, borderRadius: isMobile?0:"var(--radius-lg)", overflow:"hidden" }}>
        <img src={ev.image} alt="" style={{ width:"100%", height:"100%", objectFit:"cover" }} />
        <div style={{ position:"absolute", inset:0, background:"linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2) 50%, transparent)" }} />
        <div style={{ position:"absolute", bottom:0, left:0, right:0, padding: isMobile?"24px 18px":"40px 36px", color:"#fff" }}>
          <div className="t-eyebrow" style={{ color:"var(--accent)", marginBottom:8 }}>● Tonight in {DATA.city}</div>
          <h1 className="t-display" style={{ fontSize: isMobile?32:54, lineHeight:1.0, marginBottom:12, color:"#fff" }}>{ev.title}</h1>
          <div style={{ display:"flex", flexWrap:"wrap", gap:14, color:"rgba(255,255,255,0.85)", fontSize:13, marginBottom:18 }}>
            <span className="t-mono">{ev.date} · {ev.time}</span>
            <span>{ev.venue}</span>
            <span>From {fmtPrice(ev.price, currency)}</span>
          </div>
          <div style={{ display:"flex", gap:10 }}>
            <button onClick={()=>nav("detail", ev.id)} className="btn btn-primary">Get tickets</button>
            <button onClick={()=>nav("detail", ev.id)} className="btn" style={{ background:"rgba(255,255,255,0.15)", color:"#fff", backdropFilter:"blur(8px)", border:"1px solid rgba(255,255,255,0.2)" }}>Details</button>
          </div>
          <div style={{ display:"flex", gap:6, marginTop:24 }}>
            {heroEvents.map((_, i) => (
              <button key={i} onClick={()=>setHeroIdx(i)} style={{ height:3, width: i===heroIdx?28:14, background: i===heroIdx?"#fff":"rgba(255,255,255,0.4)", transition:"all 0.5s" }} />
            ))}
          </div>
        </div>
      </div>
    );
  };

  const filtered = activeMood ? DATA.events.filter(e => e.mood?.includes(activeMood)) : DATA.events;
  const cardCols = isMobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)";

  return (
    <div>
      <Hero />

      {/* MOOD ROW */}
      <Section eyebrow="Pick your vibe" title="What kind of night?" dense={dense}>
        <div style={{ display:"flex", gap:10, overflowX:"auto", padding:"0 18px 4px", scrollSnapType:"x mandatory" }}>
          {DATA.moods.map(m => {
            const active = activeMood === m.id;
            return (
              <button key={m.id} onClick={()=>setActiveMood(active?null:m.id)} style={{
                flexShrink:0, scrollSnapAlign:"start",
                width: isMobile?130:160, padding:"16px 14px",
                background: active ? `oklch(0.96 0.05 ${m.hue})` : `oklch(${tweaks.theme==="light"?"0.96":"0.18"} 0.04 ${m.hue})`,
                color: active ? "#000" : "var(--ink)",
                borderRadius:"var(--radius)", border:"1px solid var(--line)",
                display:"flex", flexDirection:"column", alignItems:"flex-start", gap:6, textAlign:"left",
                transition:"all var(--dur) var(--ease)",
              }}>
                <span style={{ fontSize:24 }}>{m.emoji}</span>
                <span style={{ fontWeight:600, fontSize:13 }}>{m.label}</span>
                <span className="t-mono" style={{ fontSize:10, opacity:0.6 }}>{DATA.events.filter(e=>e.mood?.includes(m.id)).length} events</span>
              </button>
            );
          })}
        </div>
      </Section>

      {/* AI ASSISTANT BAND */}
      <div style={{ margin:"0 18px", padding:"18px 20px", background:"linear-gradient(135deg, color-mix(in oklab, var(--primary) 14%, var(--surface)), var(--surface))", borderRadius:"var(--radius-lg)", border:"1px solid var(--line)", display:"flex", justifyContent:"space-between", alignItems:"center", gap:14 }}>
        <div style={{ flex:1 }}>
          <div style={{ display:"inline-flex", alignItems:"center", gap:6, padding:"3px 10px", background:"var(--bg)", borderRadius:999, marginBottom:8, fontSize:10, fontFamily:"var(--font-mono)", textTransform:"uppercase", letterSpacing:"0.1em", color:"var(--primary)" }}>
            <I.sparkle cls="ico-sm" /> AI Concierge
          </div>
          <div className="t-display" style={{ fontSize: isMobile?17:22 }}>"What's good Saturday?"</div>
          <div style={{ fontSize:12, color:"var(--ink-2)", marginTop:4 }}>Get plans tailored to you, your friends, your budget.</div>
        </div>
        <button onClick={()=>nav("ai")} className="btn btn-primary" style={{ flexShrink:0 }}>Ask now</button>
      </div>

      {/* HAPPENING TONIGHT */}
      <Section eyebrow="Tonight" title={activeMood ? `${DATA.moods.find(m=>m.id===activeMood)?.label} picks` : "Happening tonight"} action="See all" onAction={()=>nav("search")} dense={dense}>
        <div style={{ display:"grid", gridTemplateColumns: cardCols, gap: isMobile?12:18, padding:"0 18px" }}>
          {filtered.slice(0, isMobile?4:8).map(ev => (
            <EventCard key={ev.id} event={ev} variant={cardVariant} dense={dense} currency={currency} friends={friends} onClick={()=>nav("detail", ev.id)} />
          ))}
        </div>
      </Section>

      {/* FRIENDS GOING (social) */}
      <Section eyebrow="Your circle" title="Friends are going" action="See all" dense={dense}>
        <div style={{ padding:"0 18px" }}>
          <div className="card" style={{ padding:"14px 16px", display:"flex", alignItems:"center", gap:14 }}>
            <div style={{ display:"flex" }}>
              {DATA.friends.slice(0,5).map((f,i) => (
                <div key={f.name} style={{ width:32, height:32, borderRadius:"50%", background:f.color, color:"#fff", marginLeft:i?-10:0, border:"2px solid var(--surface)", display:"flex", alignItems:"center", justifyContent:"center", fontSize:13, fontWeight:700 }}>{f.initial}</div>
              ))}
            </div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13, fontWeight:600 }}>5 friends are going to <span style={{ color:"var(--primary)" }}>3 events</span> this week</div>
              <div style={{ fontSize:11, color:"var(--ink-3)", marginTop:2 }}>Ananya, Rohan, Sneha + 2 others</div>
            </div>
            <button className="btn btn-ghost" style={{ padding:"6px 12px", fontSize:11 }}>View</button>
          </div>
        </div>
        <div style={{ display:"grid", gridTemplateColumns: cardCols, gap: isMobile?12:18, padding:"14px 18px 0" }}>
          {DATA.events.filter(e => e.friends >= 3).slice(0, isMobile?2:4).map(ev => (
            <EventCard key={ev.id} event={ev} variant={cardVariant} dense={dense} currency={currency} friends={friends} onClick={()=>nav("detail", ev.id)} />
          ))}
        </div>
      </Section>

      {/* NEAR YOU */}
      <Section eyebrow={`${DATA.city} · within 5 km`} title="Near you" action="Open map" onAction={()=>nav("map")} dense={dense}>
        <div style={{ padding:"0 18px", display:"grid", gridTemplateColumns: cardCols, gap: isMobile?12:18 }}>
          {DATA.events.filter(e=>["South Mumbai","Central"].includes(e.neighborhood)).slice(0, isMobile?4:8).map(ev => (
            <EventCard key={ev.id} event={ev} variant={cardVariant} dense={dense} currency={currency} friends={friends} onClick={()=>nav("detail", ev.id)} />
          ))}
        </div>
      </Section>

      {/* CATEGORIES */}
      <Section eyebrow="Browse" title="By category" dense={dense}>
        <div style={{ padding:"0 18px", display:"grid", gridTemplateColumns: isMobile?"repeat(4,1fr)":"repeat(8,1fr)", gap:10 }}>
          {DATA.categories.map(c => {
            const Icon = I[c.icon];
            return (
              <button key={c.id} onClick={()=>nav("search", null, {category:c.label})} style={{ aspectRatio:"1", background:"var(--surface)", border:"1px solid var(--line)", borderRadius:"var(--radius)", display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", gap:8, color:"var(--ink)", transition:"all var(--dur) var(--ease)" }}
                onMouseEnter={e=>{e.currentTarget.style.borderColor="var(--primary)"; e.currentTarget.style.color="var(--primary)"}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor="var(--line)"; e.currentTarget.style.color="var(--ink)"}}
              >
                <Icon cls="ico-lg" />
                <span style={{ fontSize:11, fontWeight:500 }}>{c.label}</span>
              </button>
            );
          })}
        </div>
      </Section>

      {/* THIS WEEKEND */}
      <Section eyebrow="14–15 June" title="This weekend" dense={dense}>
        <div style={{ padding:"0 18px", display:"grid", gridTemplateColumns: cardCols, gap: isMobile?12:18 }}>
          {DATA.events.filter(e=>e.date.includes("14 Jun") || e.date.includes("15 Jun")).slice(0, isMobile?4:4).map(ev => (
            <EventCard key={ev.id} event={ev} variant={cardVariant} dense={dense} currency={currency} friends={friends} onClick={()=>nav("detail", ev.id)} />
          ))}
        </div>
      </Section>

      <div style={{ height:120 }} />
    </div>
  );
};

window.HomeScreen = HomeScreen;