// Dashboard — organizer home
const Dashboard = ({ setRoute }) => {
  const upcoming = [
    { name: 'Apparat — LP5 Live', date: '24. Mai', city: 'Berghain, Berlin', sold: 1420, total: 1700, revenue: euro(58400, { compact: true }), status: 'live', hue: 20 },
    { name: 'Hot Chip · Astra', date: '12. Jun', city: 'Astra Kulturhaus, Berlin', sold: 3240, total: 5000, revenue: euro(128400, { compact: true }), status: 'live', hue: 65 },
    { name: 'Open Air · Tempelhof', date: '28. Jul', city: 'Tempelhof Feld, Berlin', sold: 1410, total: 2600, revenue: euro(48320, { compact: true }), status: 'live', hue: 275 },
    { name: 'Nachtgalerie · Rooftop', date: '02. Jun', city: 'Klunkerkranich, Berlin', sold: 0, total: 800, revenue: '—', status: 'draft', hue: 340 },
  ];

  const activity = [
    { who: 'Lena Weber', what: 'booked 2× VIP', event: 'Apparat · Berghain', when: '2m ago', amount: euro(240) },
    { who: 'Jonas Richter', what: 'booked 1× Early Bird', event: 'Hot Chip · Astra', when: '6m ago', amount: euro(32) },
    { who: 'Mila Hofmann', what: 'requested refund', event: 'Apparat · Berghain', when: '14m ago', tone: 'warning' },
    { who: 'Finn Wagner', what: 'booked 4× GA', event: 'Hot Chip · Astra', when: '22m ago', amount: euro(180) },
    { who: 'Clara Schulz', what: 'booked 1× VIP', event: 'Nachtgalerie · Rooftop', when: '1h ago', amount: euro(65) },
    { who: 'Max Neumann', what: 'joined waitlist', event: 'Apparat · Berghain', when: '2h ago' },
  ];

  const sparklineRevenue = [32, 45, 38, 52, 60, 58, 72, 68, 80, 76, 92, 88, 96];
  const sparklineBookings = [20, 32, 28, 40, 38, 52, 48, 62, 58, 70, 68, 82, 78];

  return (
    <div
      className="dashboard-root px-4 sm:px-6 lg:px-8 py-6 lg:py-8"
      style={{ maxWidth: 1400, margin: '0 auto' }}
    >
      {/* Responsive rules (Tailwind-equivalent) — kept as a style block so the prototype
          (which doesn't yet bundle Tailwind) still renders correctly. Breakpoints match
          Tailwind defaults: sm=640px, lg=1024px. */}
      <style>{`
        .dashboard-root { padding: 24px 16px; }
        @media (min-width: 640px) { .dashboard-root { padding: 24px 24px; } }
        @media (min-width: 1024px) { .dashboard-root { padding: 32px 32px; } }

        /* Hero header row */
        .dash-hero { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
        @media (min-width: 1024px) {
          .dash-hero { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; }
        }
        .dash-hero-title { font-size: 32px; line-height: 1.05; white-space: normal; }
        @media (min-width: 640px) { .dash-hero-title { font-size: 40px; } }
        @media (min-width: 1024px) { .dash-hero-title { font-size: 48px; white-space: nowrap; } }

        .dash-hero-actions { display: flex; gap: 8px; flex-direction: column; }
        .dash-hero-actions > * { width: 100%; }
        @media (min-width: 640px) {
          .dash-hero-actions { flex-direction: row; }
          .dash-hero-actions > * { width: auto; }
        }

        /* Stat grid */
        .dash-stats { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 14px; }
        @media (min-width: 640px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .dash-stats { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

        /* Main split */
        .dash-main { display: grid; grid-template-columns: 1fr; gap: 20px; }
        @media (min-width: 1024px) { .dash-main { grid-template-columns: 1fr 380px; gap: 14px; } }

        /* Quick actions */
        .dash-quick { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
        @media (min-width: 640px) { .dash-quick { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .dash-quick { grid-template-columns: repeat(4, 1fr); } }

        /* Event row: hide thumbnail on very small screens */
        .dash-event-thumb { display: none; }
        @media (min-width: 640px) { .dash-event-thumb { display: block; } }
        .dash-event-row { grid-template-columns: 1fr auto auto auto; }
        @media (min-width: 640px) { .dash-event-row { grid-template-columns: 56px 1fr auto auto auto; } }
      `}</style>

      {/* Greeting */}
      <div className="dash-hero flex flex-col lg:flex-row lg:items-end lg:justify-between">
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginBottom: 6, fontWeight: 500 }}>Mittwoch, 17. April · Berlin</div>
          <h1
            className="display dash-hero-title text-[32px] sm:text-[40px] lg:text-[48px] leading-[1.05]"
            style={{ margin: 0, fontWeight: 500, letterSpacing: '-0.02em' }}
          >
            Guten Morgen, Priya.
          </h1>
          <div style={{ fontSize: 14, color: 'var(--ink-3)', marginTop: 4 }}>
            You sold <span style={{ color: 'var(--ink)', fontWeight: 600 }}>147 tickets</span> overnight across 3 events in Berlin, Amsterdam & Frankfurt.
          </div>
        </div>
        <div className="dash-hero-actions flex flex-col sm:flex-row gap-2" style={{ flexShrink: 0 }}>
          <Button variant="secondary" icon="download" size="md" className="w-full sm:w-auto">Export report</Button>
          <Button variant="primary" icon="plus" size="md" onClick={() => setRoute('create')} className="w-full sm:w-auto">Create event</Button>
        </div>
      </div>

      {/* Stats row */}
      <div className="dash-stats grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <Stat label="Revenue (30 days)" value={euro(482400, { compact: true })} delta="+18%" sub="vs. previous 30d" icon="money"/>
          <div style={{ marginTop: 10 }}><Sparkline data={sparklineRevenue} /></div>
        </Card>
        <Card>
          <Stat label="Tickets sold" value={count(14592)} delta="+12%" sub="last 30 days" icon="ticket"/>
          <div style={{ marginTop: 10 }}><Sparkline data={sparklineBookings} color="oklch(0.52 0.14 275)" /></div>
        </Card>
        <Card>
          <Stat label="Conversion" value="6.4%" delta="+0.8pt" sub="views → bookings" icon="sparkle"/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 14, fontSize: 11, color: 'var(--ink-3)' }}>
            <div style={{ flex: 1, height: 4, background: 'var(--bg-muted)', borderRadius: 99, overflow: 'hidden' }}>
              <div style={{ width: '64%', height: '100%', background: 'var(--accent)' }}/>
            </div>
            <span>64% of target</span>
          </div>
        </Card>
        <Card>
          <Stat label="Active events" value="7" sub="2 go live this week" icon="calendar"/>
          <div style={{ display: 'flex', gap: 4, marginTop: 12 }}>
            {[1,2,3,4,5,6,7].map(i => <div key={i} style={{ flex: 1, height: 26, borderRadius: 4, background: i <= 4 ? 'var(--accent)' : 'var(--bg-muted)', opacity: i <= 4 ? 0.2 + (i/10) : 1 }}/>)}
          </div>
        </Card>
      </div>

      <div className="dash-main grid grid-cols-1 lg:grid-cols-[1fr_380px] gap-5">
        {/* Upcoming events */}
        <Card pad={0}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px', borderBottom: '1px solid var(--line)' }}>
            <div>
              <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 600 }}>Upcoming events</h3>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>What's on sale right now</div>
            </div>
            <Button variant="ghost" size="sm" iconRight="arrow" onClick={() => setRoute('events')}>View all</Button>
          </div>
          <div>
            {upcoming.map((e, i) => (
              <div key={i} onClick={() => setRoute('event-detail')}
                className="dash-event-row"
                style={{
                  display: 'grid', gap: 16,
                  padding: '14px 20px', alignItems: 'center',
                  borderBottom: i < upcoming.length - 1 ? '1px solid var(--line)' : 'none',
                  cursor: 'pointer', transition: 'background 120ms',
                }}
                onMouseEnter={ev => ev.currentTarget.style.background = 'var(--bg-sunken)'}
                onMouseLeave={ev => ev.currentTarget.style.background = 'transparent'}
              >
                <div className="dash-event-thumb hidden sm:block">
                  <Placeholder label="" aspect="1/1" hue={e.hue} rounded={8} style={{ width: 56, height: 56 }}/>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }}>
                  <div className="truncate" style={{ fontSize: 13.5, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="calendar" size={11}/>{e.date}</span>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Icon name="pin" size={11}/>{e.city}</span>
                  </div>
                </div>
                <div style={{ minWidth: 120 }}>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 3 }}>{e.sold.toLocaleString()} / {e.total.toLocaleString()}</div>
                  <div style={{ height: 4, background: 'var(--bg-muted)', borderRadius: 99, overflow: 'hidden' }}>
                    <div style={{ width: `${(e.sold/e.total)*100}%`, height: '100%', background: 'var(--accent)' }}/>
                  </div>
                </div>
                <div style={{ fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-display)', minWidth: 70, textAlign: 'right' }}>{e.revenue}</div>
                <Chip tone={e.status === 'live' ? 'success' : 'outline'} size="sm">
                  <span style={{ width: 6, height: 6, borderRadius: 99, background: e.status === 'live' ? 'oklch(0.58 0.12 155)' : 'var(--ink-4)' }}/>
                  {e.status === 'live' ? 'On sale' : 'Draft'}
                </Chip>
              </div>
            ))}
          </div>
        </Card>

        {/* Activity feed */}
        <Card pad={0}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px', borderBottom: '1px solid var(--line)' }}>
            <div>
              <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 600 }}>Live activity</h3>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--success)', boxShadow: '0 0 0 3px oklch(0.92 0.08 155)' }}/>
                Updating in real-time
              </div>
            </div>
          </div>
          <div style={{ padding: '8px 12px' }}>
            {activity.map((a, i) => (
              <div key={i} style={{
                display: 'flex', gap: 10, padding: '10px 8px',
                borderBottom: i < activity.length - 1 ? '1px solid var(--line)' : 'none',
              }}>
                <Avatar name={a.who} size={28}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, lineHeight: 1.45 }}>
                    <span className="truncate" style={{ fontWeight: 600 }}>{a.who}</span>
                    <span style={{ color: 'var(--ink-3)' }}> {a.what} · </span>
                    <span className="truncate" style={{ color: 'var(--ink-2)' }}>{a.event}</span>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 2 }}>{a.when}</div>
                </div>
                {a.amount && <div style={{ fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-mono)' }}>{a.amount}</div>}
                {a.tone === 'warning' && <Chip tone="warning" size="sm">Needs review</Chip>}
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Quick actions row */}
      <div className="dash-quick grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        {[
          { icon: 'plus', title: 'Duplicate last event', desc: 'Reuse Hot Chip · Astra setup', hue: 65 },
          { icon: 'coupon', title: 'Create promo code', desc: 'Early bird 20% off', hue: 275 },
          { icon: 'qr', title: 'Check-in terminal', desc: 'Set up for door staff', hue: 160 },
          { icon: 'share', title: 'Share widget', desc: 'Embed on your website', hue: 20 },
        ].map((q, i) => (
          <button key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: 16, borderRadius: 12,
            background: 'var(--bg-raised)', border: '1px solid var(--line)',
            fontFamily: 'inherit', cursor: 'pointer', textAlign: 'left',
            transition: 'all 140ms',
          }}
          onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--line-3)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.transform = 'translateY(0)'; }}
          >
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: `oklch(0.95 0.04 ${q.hue})`,
              color: `oklch(0.38 0.11 ${q.hue})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><Icon name={q.icon} size={18}/></div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{q.title}</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{q.desc}</div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;