/* Mereka v2 — User dashboard pages */

/* ============ OVERVIEW ============ */
function UserOverviewPage() {
  return (
    <UserShell route="/app/dashboard/overview" title="Welcome back, Faiz">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
        <StatCard label="Active bookings" value="3" delta="+1 this week" tone="info" icon="calendar" />
        <StatCard label="Sessions completed" value="14" delta="+2 this month" tone="success" icon="check" />
        <StatCard label="Saved hours" value="42 h" delta="vs Q1" tone="purple" icon="clock" />
      </div>

      <Card className="mb-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-base font-semibold">Pick up where you left off</h2>
          <Link to="/app/dashboard/courses" className="text-sm text-primary hover:underline">View courses →</Link>
        </div>
        <div className="grid md:grid-cols-2 gap-4">
          {[
            { t: 'Brand Identity Sprint', d: 'Module 3 of 6 · Positioning', p: 48 },
            { t: 'Digital Illustration Bootcamp', d: 'Lesson 5 of 18 · Colour theory', p: 28 },
          ].map(c => (
            <div key={c.t} className="p-4 rounded-xl bg-neutral-50 border border-neutral-200">
              <div className="text-sm font-semibold">{c.t}</div>
              <div className="text-xs text-neutral-500 mt-1">{c.d}</div>
              <Progress value={c.p} className="mt-3" />
              <div className="mt-2 flex items-center justify-between text-xs">
                <span className="text-neutral-500 num-tabular">{c.p}% complete</span>
                <a href="#" className="text-primary font-semibold">Continue</a>
              </div>
            </div>
          ))}
        </div>
      </Card>

      <div className="grid lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <Card>
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-base font-semibold">Upcoming</h2>
              <Link to="/app/dashboard/bookings" className="text-sm text-primary hover:underline">All bookings →</Link>
            </div>
            <div className="divide-y divide-neutral-100">
              {[
                { t: 'Sourdough Bread Class', d: 'Sat May 23 · 10:00 AM', host: 'Mill & Crust', status: 'Confirmed' },
                { t: 'UX Audit session — Rafael Tan', d: 'Mon May 25 · 3:00 PM', host: 'Online', status: 'Confirmed' },
                { t: 'Tropical Garden Walking Tour', d: 'Sun May 31 · 9:00 AM', host: 'Greenhaus Hub', status: 'Pending' },
              ].map((b, i) => (
                <div key={i} className="py-3 flex items-center gap-4">
                  <div className="w-12 h-12 rounded-lg ph-grad flex-shrink-0" />
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-semibold">{b.t}</div>
                    <div className="text-xs text-neutral-500">{b.d} · {b.host}</div>
                  </div>
                  <Badge tone={b.status === 'Confirmed' ? 'success' : 'warning'}>{b.status}</Badge>
                  <Icon name="chevronRight" size={14} className="text-neutral-400" />
                </div>
              ))}
            </div>
          </Card>

          <Card>
            <h2 className="text-base font-semibold mb-3">Recommended for you</h2>
            <div className="grid sm:grid-cols-3 gap-4">
              {EXPERIENCES.slice(0, 3).map((e, i) => <ExperienceCard key={e.id} experience={e} seed={i + 1} />)}
            </div>
          </Card>
        </div>

        <div className="space-y-4">
          <Card>
            <div className="flex items-center justify-between mb-3">
              <h3 className="font-semibold text-sm">Your network</h3>
              <a className="text-xs text-primary" href="#">View all</a>
            </div>
            <div className="space-y-3">
              {EXPERTS.slice(0, 3).map(x => (
                <div key={x.id} className="flex items-center gap-3">
                  <Avatar name={x.name} size={36} />
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium truncate">{x.name}</div>
                    <div className="text-xs text-neutral-500 truncate">{x.role}</div>
                  </div>
                  <Button variant="ghost" size="sm">Message</Button>
                </div>
              ))}
            </div>
          </Card>

          <Card className="bg-primary text-white !border-primary">
            <Badge tone="purple" className="mb-3">Programs</Badge>
            <h3 className="font-semibold mb-2">Try a guided journey</h3>
            <p className="text-sm text-white/70 mb-4">Curated programs that combine courses, experts and experiences.</p>
            <Link to="/web/programs"><Button variant="secondary" size="sm">Browse programs</Button></Link>
          </Card>
        </div>
      </div>
    </UserShell>
  );
}

function StatCard({ label, value, delta, tone = 'info', icon }) {
  const tones = {
    info: 'bg-blue-50 text-blue-700',
    success: 'bg-green-50 text-green-700',
    purple: 'bg-purple-50 text-purple-700',
    warning: 'bg-amber-50 text-amber-700',
  };
  return (
    <Card>
      <div className="flex items-start justify-between">
        <div>
          <div className="text-sm text-neutral-500">{label}</div>
          <div className="text-3xl font-bold mt-1 num-tabular">{value}</div>
          <div className="text-xs text-neutral-500 mt-1">{delta}</div>
        </div>
        <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${tones[tone]}`}>
          <Icon name={icon} size={18} />
        </div>
      </div>
    </Card>
  );
}

/* ============ BOOKINGS ============ */
function UserBookingsPage() {
  const [tab, setTab] = useState('upcoming');
  const bookings = [
    { id: 'b1', t: 'Sourdough Bread Class', host: 'Mill & Crust', date: 'Sat May 23, 10:00 AM', price: 'RM 210', status: 'Confirmed', when: 'upcoming' },
    { id: 'b2', t: 'UX Audit session — Rafael Tan', host: 'Rafael Tan', date: 'Mon May 25, 3:00 PM', price: 'RM 420', status: 'Confirmed', when: 'upcoming' },
    { id: 'b3', t: 'Tropical Garden Walking Tour', host: 'Greenhaus Hub', date: 'Sun May 31, 9:00 AM', price: 'RM 95', status: 'Pending', when: 'upcoming' },
    { id: 'b4', t: 'Traditional Batik Painting Workshop', host: 'Kraf KL Studio', date: 'Sat May 9, 2:00 PM', price: 'RM 180', status: 'Completed', when: 'past' },
    { id: 'b5', t: 'Digital Illustration Bootcamp', host: 'Pixel House', date: 'Apr 12, 10:00 AM', price: 'RM 340', status: 'Completed', when: 'past' },
  ];
  const filtered = bookings.filter(b => b.when === tab);
  return (
    <UserShell route="/app/dashboard/bookings" title="My Bookings">
      <Tabs items={[
        { value: 'upcoming', label: 'Upcoming', count: bookings.filter(b => b.when === 'upcoming').length },
        { value: 'past', label: 'Past', count: bookings.filter(b => b.when === 'past').length },
        { value: 'cancelled', label: 'Cancelled', count: 0 },
      ]} value={tab} onChange={setTab} className="mb-6" />

      <Card padding="p-0">
        <table className="w-full">
          <thead>
            <tr className="text-xs uppercase tracking-wide text-neutral-500 border-b border-neutral-200">
              <th className="text-left px-5 py-3 font-semibold">Experience</th>
              <th className="text-left px-5 py-3 font-semibold">Date &amp; time</th>
              <th className="text-left px-5 py-3 font-semibold">Price</th>
              <th className="text-left px-5 py-3 font-semibold">Status</th>
              <th className="text-right px-5 py-3 font-semibold">Actions</th>
            </tr>
          </thead>
          <tbody>
            {filtered.length === 0 ? (
              <tr><td colSpan={5} className="px-5 py-12 text-center text-sm text-neutral-500">No bookings here yet.</td></tr>
            ) : filtered.map(b => (
              <tr key={b.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-4">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-lg ph-grad flex-shrink-0" />
                    <div>
                      <div className="text-sm font-semibold">{b.t}</div>
                      <div className="text-xs text-neutral-500">{b.host}</div>
                    </div>
                  </div>
                </td>
                <td className="px-5 py-4 text-sm">{b.date}</td>
                <td className="px-5 py-4 text-sm font-semibold num-tabular">{b.price}</td>
                <td className="px-5 py-4">
                  <Badge tone={b.status === 'Confirmed' ? 'success' : b.status === 'Pending' ? 'warning' : 'neutral'}>{b.status}</Badge>
                </td>
                <td className="px-5 py-4 text-right">
                  <Button variant="ghost" size="sm" rightIcon="chevronRight">View</Button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </UserShell>
  );
}

/* ============ FAVORITES ============ */
function UserFavoritesPage() {
  return (
    <UserShell route="/app/dashboard/favorites" title="Favorites">
      <Tabs items={[
        { value: 'experiences', label: 'Experiences', count: 6 },
        { value: 'experts', label: 'Experts', count: 4 },
        { value: 'hubs', label: 'Hubs', count: 2 },
      ]} value="experiences" onChange={() => {}} className="mb-6" />
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {EXPERIENCES.slice(0, 6).map((e, i) => <ExperienceCard key={e.id} experience={e} seed={i} />)}
      </div>
    </UserShell>
  );
}

/* ============ COURSES ============ */
function UserCoursesPage() {
  const courses = [
    { t: 'Brand Identity Sprint', mod: 'Module 3 of 6', topic: 'Positioning', p: 48, inst: 'Studio Kuala', hue: 275 },
    { t: 'Digital Illustration Bootcamp', mod: 'Lesson 5 of 18', topic: 'Colour theory', p: 28, inst: 'Pixel House', hue: 220 },
    { t: 'Sustainable Cooking Masterclass', mod: 'Lesson 2 of 8', topic: 'Sourcing', p: 12, inst: 'Chef Aisyah Lim', hue: 140 },
    { t: 'AI Fundamentals for Teams', mod: 'Week 1 of 6', topic: 'Intro to LLMs', p: 8, inst: 'Mereka Programs', hue: 290 },
  ];
  return (
    <UserShell route="/app/dashboard/courses" title="My Courses">
      <div className="grid sm:grid-cols-2 gap-5">
        {courses.map((c, i) => (
          <Card key={i}>
            <ImageBlock aspect="16/9" seed={i + 1} className="mb-4" />
            <h3 className="font-semibold">{c.t}</h3>
            <p className="text-sm text-neutral-500 mt-1">{c.inst}</p>
            <Progress value={c.p} className="mt-4" />
            <div className="mt-2 flex items-center justify-between text-xs">
              <span className="text-neutral-500">{c.mod} · {c.topic}</span>
              <span className="font-semibold num-tabular">{c.p}%</span>
            </div>
            <Button variant="primary" size="sm" className="w-full mt-4">Continue learning</Button>
          </Card>
        ))}
      </div>
    </UserShell>
  );
}

/* ============ CHATS ============ */
function UserChatsPage() {
  const threads = [
    { id: 1, name: 'Rafael Tan', last: 'Sounds good — let\'s set Monday 3pm.', unread: 1, avatar: 'Rafael Tan', time: '2m' },
    { id: 2, name: 'Kraf KL Studio', last: 'See you on Saturday!', unread: 0, avatar: 'Kraf KL', time: '1h' },
    { id: 3, name: 'Dr. Hanna Yusof', last: 'Sharing the brand brief now.', unread: 2, avatar: 'Hanna Yusof', time: '3h' },
    { id: 4, name: 'Mill & Crust', last: 'Class starts at 10:00 AM sharp.', unread: 0, avatar: 'Mill Crust', time: 'Yesterday' },
    { id: 5, name: 'Pixel House', last: 'Booked your second session.', unread: 0, avatar: 'Pixel House', time: '2d' },
  ];
  const [active, setActive] = useState(1);
  const cur = threads.find(t => t.id === active);

  return (
    <UserShell route="/app/dashboard/chats" title="Chats">
      <Card padding="p-0" className="overflow-hidden h-[640px] flex">
        <div className="w-[300px] border-r border-neutral-200 flex flex-col">
          <div className="p-3 border-b border-neutral-200">
            <SearchInput placeholder="Search messages" size="sm" />
          </div>
          <div className="flex-1 overflow-y-auto scrollbar-thin">
            {threads.map(t => (
              <button key={t.id} onClick={() => setActive(t.id)}
                className={`w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-50 text-left border-b border-neutral-100 ${active === t.id ? 'bg-neutral-50' : ''}`}>
                <Avatar name={t.avatar} size={40} />
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-semibold truncate">{t.name}</span>
                    <span className="text-xs text-neutral-400 flex-shrink-0">{t.time}</span>
                  </div>
                  <div className="flex items-center justify-between mt-0.5">
                    <span className="text-xs text-neutral-500 truncate pr-2">{t.last}</span>
                    {t.unread > 0 && <span className="w-5 h-5 bg-primary text-white text-[11px] rounded-full flex items-center justify-center flex-shrink-0">{t.unread}</span>}
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>

        <div className="flex-1 flex flex-col">
          <div className="px-5 py-3 border-b border-neutral-200 flex items-center gap-3">
            <Avatar name={cur.avatar} size={36} />
            <div className="flex-1">
              <div className="text-sm font-semibold">{cur.name}</div>
              <div className="text-xs text-green-600 flex items-center gap-1">
                <span className="w-1.5 h-1.5 bg-green-600 rounded-full" /> Online
              </div>
            </div>
            <Icon name="more" size={20} className="text-neutral-400" />
          </div>

          <div className="flex-1 overflow-y-auto p-5 space-y-3 bg-neutral-50">
            <MsgBubble side="them" name={cur.name}>Hi Faiz! Wanted to confirm next week's session.</MsgBubble>
            <MsgBubble side="me">Yes! What time works best for you?</MsgBubble>
            <MsgBubble side="them" name={cur.name}>Monday 3pm or Tuesday 11am — both open.</MsgBubble>
            <MsgBubble side="me">Let's do Monday 3pm. I'll send the brief over by Sunday.</MsgBubble>
            <MsgBubble side="them" name={cur.name}>Sounds good — let's set Monday 3pm.</MsgBubble>
          </div>

          <div className="p-3 border-t border-neutral-200 flex items-center gap-2">
            <button className="p-2 text-neutral-500 hover:text-neutral-900"><Icon name="paperclip" size={18} /></button>
            <input className="flex-1 h-10 px-4 rounded-full bg-neutral-100 text-sm focus:outline-none" placeholder="Type a message…" />
            <button className="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center"><Icon name="send" size={16} /></button>
          </div>
        </div>
      </Card>
    </UserShell>
  );
}

function MsgBubble({ side, name, children }) {
  if (side === 'me') return (
    <div className="flex justify-end">
      <div className="max-w-[70%] bg-primary text-white rounded-2xl rounded-tr-md px-4 py-2.5 text-sm">{children}</div>
    </div>
  );
  return (
    <div className="flex items-end gap-2 max-w-[75%]">
      <Avatar name={name} size={28} />
      <div className="bg-white rounded-2xl rounded-tl-md px-4 py-2.5 text-sm border border-neutral-200 text-neutral-900">{children}</div>
    </div>
  );
}

/* ============ REVIEWS ============ */
function UserReviewsPage() {
  return (
    <UserShell route="/app/dashboard/reviews" title="My Reviews">
      <Tabs items={[
        { value: 'received', label: 'Received', count: 4 },
        { value: 'given', label: 'Given', count: 7 },
        { value: 'pending', label: 'To review', count: 2 },
      ]} value="given" onChange={() => {}} className="mb-6" />

      <div className="space-y-3">
        {[
          { t: 'Traditional Batik Painting Workshop', host: 'Kraf KL Studio', rating: 5, text: "Such a calming afternoon. The host was patient and detailed.", date: 'Apr 14' },
          { t: 'Digital Illustration Bootcamp', host: 'Pixel House', rating: 4, text: "Loved the content. Wish there was more time for live feedback.", date: 'Apr 2' },
          { t: 'UX Audit session', host: 'Rafael Tan', rating: 5, text: "Practical, focused, and shipped me a clean roadmap.", date: 'Mar 18' },
        ].map((r, i) => (
          <Card key={i}>
            <div className="flex items-start justify-between gap-4">
              <div>
                <div className="flex items-center gap-2 mb-1">
                  {[...Array(5)].map((_, j) => <Icon key={j} name="star" size={14} fill={j < r.rating ? '#fbbf24' : '#e5e7eb'} strokeWidth={0} />)}
                </div>
                <h3 className="text-sm font-semibold">{r.t}</h3>
                <p className="text-xs text-neutral-500">{r.host} · {r.date}</p>
                <p className="text-sm text-neutral-700 mt-2">{r.text}</p>
              </div>
              <Button variant="ghost" size="sm">Edit</Button>
            </div>
          </Card>
        ))}
      </div>
    </UserShell>
  );
}

/* ============ TRANSACTIONS ============ */
function UserTransactionsPage() {
  const txns = [
    { id: 'T-2851', desc: 'UX Audit session — Rafael Tan', date: 'May 18, 2026', amt: 'RM 420.00', type: 'Booking', status: 'Paid' },
    { id: 'T-2812', desc: 'Sourdough Bread Class', date: 'May 14, 2026', amt: 'RM 210.00', type: 'Booking', status: 'Paid' },
    { id: 'T-2790', desc: 'Brand Identity Sprint — Milestone 1', date: 'May 8, 2026', amt: 'RM 2,800.00', type: 'Milestone', status: 'Paid' },
    { id: 'T-2772', desc: 'AI Fundamentals — Program enrolment', date: 'May 1, 2026', amt: 'RM 1,200.00', type: 'Program', status: 'Paid' },
    { id: 'T-2733', desc: 'Pottery refund', date: 'Apr 28, 2026', amt: '-RM 150.00', type: 'Refund', status: 'Refunded' },
  ];
  return (
    <UserShell route="/app/dashboard/transactions" title="Transactions">
      <div className="grid sm:grid-cols-3 gap-4 mb-6">
        <StatCard label="Spent this month" value="RM 4,630" delta="+RM 1.2k vs Apr" tone="info" icon="dollar" />
        <StatCard label="Pending charges" value="RM 360" delta="2 bookings" tone="warning" icon="clock" />
        <StatCard label="Refunds received" value="RM 150" delta="1 refund" tone="success" icon="check" />
      </div>
      <Card padding="p-0">
        <div className="px-5 py-3 border-b border-neutral-200 flex items-center justify-between">
          <h2 className="font-semibold text-sm">All transactions</h2>
          <Button variant="secondary" size="sm" leftIcon="download">Export CSV</Button>
        </div>
        <table className="w-full">
          <thead>
            <tr className="text-xs uppercase tracking-wide text-neutral-500 border-b border-neutral-100">
              <th className="text-left px-5 py-3 font-semibold">Reference</th>
              <th className="text-left px-5 py-3 font-semibold">Description</th>
              <th className="text-left px-5 py-3 font-semibold">Date</th>
              <th className="text-left px-5 py-3 font-semibold">Type</th>
              <th className="text-right px-5 py-3 font-semibold">Amount</th>
              <th className="text-left px-5 py-3 font-semibold">Status</th>
            </tr>
          </thead>
          <tbody>
            {txns.map(t => (
              <tr key={t.id} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3 text-sm font-mono text-neutral-500">{t.id}</td>
                <td className="px-5 py-3 text-sm font-medium">{t.desc}</td>
                <td className="px-5 py-3 text-sm text-neutral-600">{t.date}</td>
                <td className="px-5 py-3 text-sm"><Badge tone="neutral">{t.type}</Badge></td>
                <td className="px-5 py-3 text-right text-sm font-semibold num-tabular">{t.amt}</td>
                <td className="px-5 py-3"><Badge tone={t.status === 'Paid' ? 'success' : 'info'}>{t.status}</Badge></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </UserShell>
  );
}

/* ============ BILLING ============ */
function UserBillingPage() {
  return (
    <UserShell route="/app/dashboard/billing" title="Billing">
      <div className="grid lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-6">
          <Card>
            <div className="flex items-center justify-between mb-4">
              <h2 className="font-semibold">Payment methods</h2>
              <Button variant="secondary" size="sm" leftIcon="plus">Add payment method</Button>
            </div>
            <div className="space-y-3">
              {[
                { brand: 'Visa', last: '4242', exp: '04/28', default: true },
                { brand: 'MasterCard', last: '8801', exp: '11/26', default: false },
              ].map(c => (
                <div key={c.last} className="flex items-center justify-between p-4 rounded-lg border border-neutral-200">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-8 rounded bg-neutral-900 text-white text-[11px] font-bold flex items-center justify-center">{c.brand}</div>
                    <div>
                      <div className="text-sm font-medium">{c.brand} ending in {c.last}</div>
                      <div className="text-xs text-neutral-500">Expires {c.exp}</div>
                    </div>
                    {c.default && <Badge tone="success" className="ml-2">Default</Badge>}
                  </div>
                  <Button variant="ghost" size="sm">Manage</Button>
                </div>
              ))}
            </div>
          </Card>

          <Card>
            <h2 className="font-semibold mb-4">Billing address</h2>
            <div className="grid sm:grid-cols-2 gap-3 text-sm">
              <div>
                <div className="text-xs text-neutral-500 mb-1">Name</div>
                <div className="font-medium">Faiz Fadhillah</div>
              </div>
              <div>
                <div className="text-xs text-neutral-500 mb-1">Email</div>
                <div className="font-medium">faiz.fadhillah@example.com</div>
              </div>
              <div className="sm:col-span-2">
                <div className="text-xs text-neutral-500 mb-1">Address</div>
                <div className="font-medium">12 Jalan Bangsar, 59000 Kuala Lumpur, Malaysia</div>
              </div>
            </div>
            <div className="mt-4">
              <Button variant="secondary" size="sm">Edit address</Button>
            </div>
          </Card>
        </div>

        <Card>
          <Badge tone="primaryLight" className="mb-3">Plan</Badge>
          <h2 className="text-lg font-semibold mb-1">Mereka Free</h2>
          <p className="text-sm text-neutral-500 mb-4">No monthly fee. Pay per booking.</p>
          <ul className="space-y-2 text-sm">
            <li className="flex items-center gap-2"><Icon name="check" size={14} className="text-green-600" /> Unlimited bookings</li>
            <li className="flex items-center gap-2"><Icon name="check" size={14} className="text-green-600" /> Direct messaging with hosts</li>
            <li className="flex items-center gap-2"><Icon name="check" size={14} className="text-green-600" /> Standard 24h cancellation</li>
          </ul>
          <Button variant="primary" className="w-full mt-5">Upgrade to Pro</Button>
        </Card>
      </div>
    </UserShell>
  );
}

/* ============ NOTIFICATIONS ============ */
function UserNotificationsPage() {
  const groups = [
    { day: 'Today', items: [
      { icon: 'calendar', t: 'Booking confirmed', d: 'Mill & Crust confirmed your sourdough class for Sat May 23, 10:00 AM.', time: '12m ago', unread: true },
      { icon: 'chat', t: 'New message from Rafael Tan', d: '"Sounds good — let\'s set Monday 3pm."', time: '2h ago', unread: true },
    ]},
    { day: 'Yesterday', items: [
      { icon: 'card', t: 'Payment receipt', d: 'RM 2,800 charged for Brand Identity Sprint milestone 1.', time: '1d ago' },
      { icon: 'star', t: 'New review request', d: "Tell us about your Batik Painting Workshop.", time: '1d ago' },
    ]},
    { day: 'This week', items: [
      { icon: 'spark', t: 'You unlocked a badge', d: '5 bookings completed — Curious Mind badge earned.', time: '3d ago' },
      { icon: 'briefcase', t: 'New job match', d: 'Brand Identity for D2C Skincare Launch — RM 8–12k.', time: '4d ago' },
    ]},
  ];
  return (
    <UserShell route="/app/dashboard/notifications" title="Notifications">
      <div className="flex items-center justify-between mb-6">
        <p className="text-sm text-neutral-500">3 unread notifications</p>
        <Button variant="secondary" size="sm">Mark all as read</Button>
      </div>
      <Card padding="p-0" className="divide-y divide-neutral-100">
        {groups.map(g => (
          <div key={g.day}>
            <div className="px-5 py-2 bg-neutral-50 text-xs font-semibold text-neutral-500 uppercase tracking-wide">{g.day}</div>
            {g.items.map((n, i) => (
              <div key={i} className={`flex items-start gap-3 px-5 py-4 ${n.unread ? 'bg-primary/5' : ''}`}>
                <div className="w-9 h-9 rounded-full bg-neutral-100 flex items-center justify-center flex-shrink-0">
                  <Icon name={n.icon} size={16} />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-semibold">{n.t}</span>
                    {n.unread && <span className="w-1.5 h-1.5 bg-primary rounded-full" />}
                  </div>
                  <p className="text-sm text-neutral-600 mt-0.5">{n.d}</p>
                  <p className="text-xs text-neutral-400 mt-1">{n.time}</p>
                </div>
              </div>
            ))}
          </div>
        ))}
      </Card>
    </UserShell>
  );
}

/* ============ ACCOUNT ============ */
function UserAccountPage() {
  return (
    <UserShell route="/app/dashboard/account" title="Account details">
      <div className="grid lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-1 text-center">
          <div className="inline-block relative">
            <Avatar name="Faiz Fadhillah" size={120} />
            <button className="absolute bottom-0 right-0 w-9 h-9 rounded-full bg-neutral-900 text-white flex items-center justify-center border-2 border-white">
              <Icon name="edit" size={14} />
            </button>
          </div>
          <h3 className="mt-4 font-semibold">Faiz Fadhillah</h3>
          <p className="text-sm text-neutral-500">faiz.fadhillah@example.com</p>
          <Button variant="secondary" size="sm" className="mt-4">Change photo</Button>
        </Card>

        <Card className="lg:col-span-2">
          <h2 className="font-semibold mb-5">Personal details</h2>
          <div className="grid sm:grid-cols-2 gap-4">
            <Field label="First name" value="Faiz" />
            <Field label="Last name" value="Fadhillah" />
            <Field label="Email" value="faiz.fadhillah@example.com" />
            <Field label="Phone" value="+60 12 345 6789" />
            <Field label="Location" value="Kuala Lumpur, Malaysia" />
            <Field label="Birthday" value="—" placeholder="Not set" />
            <div className="sm:col-span-2">
              <Field label="Bio" value="Founder & learner. Building things, taking workshops, picking up new skills." textarea />
            </div>
          </div>
          <div className="mt-6 flex gap-2">
            <Button variant="primary">Save changes</Button>
            <Button variant="ghost">Cancel</Button>
          </div>
        </Card>
      </div>
    </UserShell>
  );
}

function Field({ label, value, placeholder, textarea, type = 'text' }) {
  return (
    <div>
      <label className="text-xs font-medium text-neutral-700 mb-1.5 block">{label}</label>
      {textarea ? (
        <textarea rows={3} defaultValue={value} placeholder={placeholder}
                  className="w-full px-3 py-2 text-sm border border-neutral-300 rounded-lg focus:outline-none focus:border-neutral-500" />
      ) : (
        <input type={type} defaultValue={value} placeholder={placeholder}
               className="w-full h-10 px-3 text-sm border border-neutral-300 rounded-lg focus:outline-none focus:border-neutral-500" />
      )}
    </div>
  );
}

/* ============ INTERESTS ============ */
function UserInterestsPage() {
  const categories = [
    { t: 'Creative & Crafts', items: ['Batik & textiles', 'Pottery', 'Calligraphy', 'Illustration', 'Music'] },
    { t: 'Wellbeing & Mindfulness', items: ['Yoga', 'Meditation', 'Journaling', 'Breathwork'] },
    { t: 'Food & Drink', items: ['Baking', 'Coffee', 'Fermentation', 'Plant-based cooking'] },
    { t: 'Business & Tech', items: ['AI tools', 'Branding', 'Sales', 'Product design', 'Engineering'] },
    { t: 'Outdoor', items: ['Hiking', 'Cycling', 'Foraging', 'Photography walks'] },
  ];
  const selected = ['Branding', 'AI tools', 'Baking', 'Pottery'];
  return (
    <UserShell route="/app/dashboard/interests" title="My Interests">
      <Card>
        <p className="text-sm text-neutral-600 mb-5">Tell us what you're into. We'll use this to recommend experiences, experts and programs you'll love.</p>
        <div className="space-y-6">
          {categories.map(c => (
            <div key={c.t}>
              <h3 className="text-sm font-semibold mb-3">{c.t}</h3>
              <div className="flex flex-wrap gap-2">
                {c.items.map(it => <Chip key={it} active={selected.includes(it)}>{it}</Chip>)}
              </div>
            </div>
          ))}
        </div>
        <div className="mt-6 pt-5 border-t border-neutral-100 flex gap-2">
          <Button variant="primary">Save interests</Button>
          <Button variant="ghost">Reset</Button>
        </div>
      </Card>
    </UserShell>
  );
}

/* ============ SECURITY ============ */
function UserSecurityPage() {
  return (
    <UserShell route="/app/dashboard/security" title="Security">
      <div className="space-y-6">
        <Card>
          <h2 className="font-semibold mb-4">Password</h2>
          <div className="grid sm:grid-cols-2 gap-4 max-w-lg">
            <div className="sm:col-span-2"><Field label="Current password" type="password" value="" placeholder="Enter current password" /></div>
            <Field label="New password" type="password" value="" placeholder="At least 8 characters" />
            <Field label="Confirm" type="password" value="" placeholder="Repeat new password" />
          </div>
          <div className="mt-4"><Button variant="primary">Update password</Button></div>
        </Card>

        <Card>
          <div className="flex items-center justify-between">
            <div>
              <h2 className="font-semibold">Two-factor authentication</h2>
              <p className="text-sm text-neutral-500 mt-1">Add a second layer of security. Required for sending money &gt; RM 5,000.</p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" defaultChecked className="sr-only peer" />
              <div className="w-11 h-6 bg-neutral-300 rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-5 after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition" />
            </label>
          </div>
        </Card>

        <Card>
          <h2 className="font-semibold mb-4">Active sessions</h2>
          <div className="divide-y divide-neutral-100">
            {[
              { dev: 'MacBook Pro · Chrome', loc: 'Kuala Lumpur, MY', last: 'Active now', current: true },
              { dev: 'iPhone 15 · Mereka iOS', loc: 'Kuala Lumpur, MY', last: '2h ago' },
              { dev: 'Windows · Edge', loc: 'Singapore, SG', last: '3d ago' },
            ].map((s, i) => (
              <div key={i} className="py-3 flex items-center justify-between gap-4">
                <div>
                  <div className="text-sm font-semibold">{s.dev} {s.current && <Badge tone="success" className="ml-2">This device</Badge>}</div>
                  <div className="text-xs text-neutral-500">{s.loc} · {s.last}</div>
                </div>
                {!s.current && <Button variant="ghost" size="sm" className="text-red-600">Sign out</Button>}
              </div>
            ))}
          </div>
        </Card>
      </div>
    </UserShell>
  );
}

/* ============ SETTINGS ============ */
function UserSettingsPage() {
  return (
    <UserShell route="/app/dashboard/settings" title="Settings">
      <div className="space-y-6">
        <Card>
          <h2 className="font-semibold mb-4">Preferences</h2>
          <div className="grid sm:grid-cols-2 gap-4">
            <Field label="Language" value="English (UK)" />
            <Field label="Time zone" value="Kuala Lumpur (UTC+8)" />
            <Field label="Currency" value="MYR (RM)" />
            <Field label="Date format" value="DD MMM YYYY" />
          </div>
        </Card>

        <Card>
          <h2 className="font-semibold mb-4">Communication channels</h2>
          <div className="space-y-3">
            {[
              { label: 'Email newsletter', desc: 'Weekly digest of new experiences and experts.', on: true },
              { label: 'WhatsApp updates', desc: 'Booking reminders and time-sensitive alerts.', on: true },
              { label: 'SMS', desc: 'Two-factor codes and urgent security messages.', on: true },
              { label: 'Marketing emails', desc: 'Occasional promotions and partner offers.', on: false },
            ].map(p => (
              <div key={p.label} className="flex items-center justify-between py-2 border-b border-neutral-100 last:border-0">
                <div>
                  <div className="text-sm font-medium">{p.label}</div>
                  <div className="text-xs text-neutral-500">{p.desc}</div>
                </div>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" defaultChecked={p.on} className="sr-only peer" />
                  <div className="w-11 h-6 bg-neutral-300 rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-5 after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition" />
                </label>
              </div>
            ))}
          </div>
        </Card>

        <Card className="!border-red-200">
          <h2 className="font-semibold text-red-700 mb-2">Danger zone</h2>
          <p className="text-sm text-neutral-600 mb-4">Delete your account permanently. This cannot be undone.</p>
          <Button variant="danger" size="sm">Delete account</Button>
        </Card>
      </div>
    </UserShell>
  );
}

/* ============ COMMUNICATION LOGS ============ */
function UserCommLogsPage() {
  const logs = [
    { ch: 'Email', sub: 'Your sourdough class is confirmed', to: 'faiz.fadhillah@example.com', date: 'May 18 12:42 PM', status: 'Delivered' },
    { ch: 'WhatsApp', sub: 'Reminder: UX session in 24h', to: '+60 12 345 6789', date: 'May 17 3:00 PM', status: 'Delivered' },
    { ch: 'Email', sub: 'Receipt — Brand Identity Sprint M1', to: 'faiz.fadhillah@example.com', date: 'May 8 9:14 AM', status: 'Delivered' },
    { ch: 'Email', sub: 'Welcome to AI Fundamentals', to: 'faiz.fadhillah@example.com', date: 'May 1 8:00 AM', status: 'Delivered' },
    { ch: 'SMS', sub: 'Login code: 482 109', to: '+60 12 345 6789', date: 'Apr 30 9:55 PM', status: 'Delivered' },
  ];
  return (
    <UserShell route="/app/dashboard/communication-logs" title="Communication logs">
      <Card padding="p-0">
        <div className="px-5 py-3 border-b border-neutral-200 flex items-center justify-between">
          <h2 className="font-semibold text-sm">All communications</h2>
          <div className="flex gap-2">
            <Chip>All channels</Chip><Chip>Email</Chip><Chip>WhatsApp</Chip><Chip>SMS</Chip>
          </div>
        </div>
        <table className="w-full">
          <thead>
            <tr className="text-xs uppercase tracking-wide text-neutral-500 border-b border-neutral-100">
              <th className="text-left px-5 py-3 font-semibold">Channel</th>
              <th className="text-left px-5 py-3 font-semibold">Subject</th>
              <th className="text-left px-5 py-3 font-semibold">Recipient</th>
              <th className="text-left px-5 py-3 font-semibold">Date</th>
              <th className="text-left px-5 py-3 font-semibold">Status</th>
            </tr>
          </thead>
          <tbody>
            {logs.map((l, i) => (
              <tr key={i} className="border-b border-neutral-100 last:border-0 hover:bg-neutral-50">
                <td className="px-5 py-3 text-sm"><Badge tone={l.ch === 'Email' ? 'info' : l.ch === 'WhatsApp' ? 'success' : 'purple'}>{l.ch}</Badge></td>
                <td className="px-5 py-3 text-sm font-medium">{l.sub}</td>
                <td className="px-5 py-3 text-sm text-neutral-600">{l.to}</td>
                <td className="px-5 py-3 text-sm text-neutral-600">{l.date}</td>
                <td className="px-5 py-3 text-sm"><Badge tone="success">{l.status}</Badge></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </UserShell>
  );
}

/* ============ NOTIFICATION SETTINGS ============ */
function UserNotifSettingsPage() {
  const cats = [
    { t: 'Bookings & sessions', rows: ['Booking confirmations', 'Reminders 24h before', 'Cancellations', 'Reschedules'] },
    { t: 'Payments', rows: ['Receipts', 'Failed payments', 'Refunds', 'Payouts'] },
    { t: 'Reviews & social', rows: ['New review requests', 'Replies on reviews', 'Mentions'] },
    { t: 'Marketing', rows: ['Newsletter', 'Personalised offers', 'New programs'] },
  ];
  return (
    <UserShell route="/app/dashboard/notification-settings" title="Notification settings">
      <Card padding="p-0">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto_auto_auto] px-5 py-3 border-b border-neutral-200 text-xs uppercase tracking-wide font-semibold text-neutral-500">
          <span>Type</span>
          <span className="px-3 w-20 text-center">Email</span>
          <span className="px-3 w-20 text-center">SMS</span>
          <span className="px-3 w-20 text-center">WhatsApp</span>
        </div>
        {cats.map(c => (
          <div key={c.t} className="border-b border-neutral-100 last:border-0">
            <div className="px-5 py-2 bg-neutral-50 text-xs font-semibold text-neutral-700 uppercase tracking-wide">{c.t}</div>
            {c.rows.map(r => (
              <div key={r} className="grid grid-cols-1 lg:grid-cols-[1fr_auto_auto_auto] items-center px-5 py-2.5 text-sm">
                <span>{r}</span>
                <span className="w-20 text-center"><input type="checkbox" defaultChecked /></span>
                <span className="w-20 text-center"><input type="checkbox" /></span>
                <span className="w-20 text-center"><input type="checkbox" defaultChecked /></span>
              </div>
            ))}
          </div>
        ))}
      </Card>
    </UserShell>
  );
}

Object.assign(window, {
  UserOverviewPage, UserBookingsPage, UserFavoritesPage, UserCoursesPage,
  UserChatsPage, UserReviewsPage, UserTransactionsPage, UserBillingPage,
  UserNotificationsPage, UserAccountPage, UserInterestsPage, UserSecurityPage,
  UserSettingsPage, UserCommLogsPage, UserNotifSettingsPage,
});