// ========== BOOKINGS PAGE ==========
const BookingsPage = ({ nav, bookings, openProvider }) => {
  const [filter, setFilter] = React.useState('upcoming');
  const counts = {
    upcoming: bookings.filter(b => b.status === 'upcoming').length,
    completed: bookings.filter(b => b.status === 'completed').length,
    cancelled: bookings.filter(b => b.status === 'cancelled').length,
    all: bookings.length,
  };
  const filtered = filter === 'all' ? bookings : bookings.filter(b => b.status === filter);

  return (
    <div className="fade-in">
      <div className="container">
        <div className="page-head">
          <div>
            <div className="eyebrow">Your calendar</div>
            <h1>My <span className="i">bookings</span></h1>
          </div>
          <button className="btn btn-brand" onClick={() => nav('explore')}>
            <Icon name="plus" size={14}/> Book new service
          </button>
        </div>

        <div className="status-filters">
          {[
            {k: 'upcoming', l: 'Upcoming'},
            {k: 'completed', l: 'Completed'},
            {k: 'cancelled', l: 'Cancelled'},
            {k: 'all', l: 'All'},
          ].map(f => (
            <button key={f.k} className={filter === f.k ? 'active' : ''} onClick={() => setFilter(f.k)}>
              {f.l} <span className="c">{counts[f.k]}</span>
            </button>
          ))}
        </div>

        <div className="bookings-split">
          <div>
            {filtered.length === 0 ? (
              <div style={{textAlign:'center', padding: 60, background:'#fff', borderRadius:'var(--r-lg)', border:'1px dashed var(--line)'}}>
                <div style={{fontFamily:'Fraunces, serif', fontSize: 28, fontWeight: 500, marginBottom: 6}}>Nothing here yet</div>
                <div style={{color:'var(--muted)', fontSize: 14, marginBottom: 20}}>When you book, it'll show up here.</div>
                <button className="btn btn-outline" onClick={() => nav('explore')}>Find a provider</button>
              </div>
            ) : filtered.map(b => (
              <div key={b.id} className="booking-card">
                <div className="date-block">
                  <div className="m">{b.date}</div>
                  <div className="d">{b.day}</div>
                </div>
                <div className="info">
                  <div className="svc">{b.service}</div>
                  <div className="prov">
                    <div className={`av`} style={{background: `var(--grad-${b.tone === 'coral' ? 'coral' : b.tone === 'blush' ? 'coral' : 'teal'})`}}/>
                    with {b.providerName} · {b.location}
                  </div>
                  <div className="time">
                    <span><Icon name="clock" size={12}/> {b.time} · {b.duration}</span>
                    {b.status === 'upcoming' && <span className="badge badge-ok">Confirmed</span>}
                    {b.status === 'completed' && <span className="badge">Completed</span>}
                    {b.status === 'cancelled' && <span className="badge badge-err">Cancelled</span>}
                  </div>
                </div>
                <div className="price">${b.price}</div>
                <div style={{display:'flex', gap: 6}}>
                  {b.status === 'upcoming' && <>
                    <button className="btn btn-outline btn-sm" onClick={() => nav('messages')}>Message</button>
                    <button className="btn btn-ghost btn-sm">Cancel</button>
                  </>}
                  {b.status === 'completed' && <>
                    <button className="btn btn-outline btn-sm">Review</button>
                    <button className="btn btn-outline btn-sm" onClick={() => openProvider(b.providerId)}>Rebook</button>
                  </>}
                  {b.status === 'cancelled' && <button className="btn btn-outline btn-sm" onClick={() => openProvider(b.providerId)}>Rebook</button>}
                </div>
              </div>
            ))}
          </div>

          <MiniCalendar/>
        </div>
      </div>
    </div>
  );
};

const MiniCalendar = () => {
  // April 2026: starts Wednesday (0=Sun). 30 days.
  const dows = ['S','M','T','W','T','F','S'];
  const startOffset = 3; // April 1, 2026 = Wednesday
  const daysInMonth = 30;
  const eventDays = [5, 14, 28];
  const today = 21;
  const cells = [];
  for (let i = 0; i < startOffset; i++) cells.push({ dim: true, d: 31 - startOffset + i + 1 });
  for (let d = 1; d <= daysInMonth; d++) cells.push({ d });
  while (cells.length < 42) cells.push({ dim: true, d: cells.length - startOffset - daysInMonth + 1 });

  return (
    <div className="mini-cal">
      <div className="mini-cal-head">
        <h4>April <span style={{fontStyle:'italic'}}>2026</span></h4>
        <div className="cal-nav">
          <button><Icon name="chevL" size={14}/></button>
          <button><Icon name="chevR" size={14}/></button>
        </div>
      </div>
      <div className="cal-grid">
        {dows.map((d, i) => <div key={i} className="cal-cell dow">{d}</div>)}
        {cells.map((c, i) => (
          <div key={i} className={`cal-cell ${c.dim ? 'dim' : ''} ${c.d === today && !c.dim ? 'today' : ''} ${!c.dim && eventDays.includes(c.d) ? 'has-event' : ''}`}>
            {c.d}
          </div>
        ))}
      </div>
      <div style={{marginTop: 18, paddingTop: 16, borderTop:'1px solid var(--line)'}}>
        <div className="eyebrow" style={{marginBottom: 10}}>Upcoming</div>
        <div style={{display:'flex', gap: 10, padding: '10px 0', borderBottom:'1px solid var(--line)'}}>
          <div style={{width: 40, textAlign:'center'}}>
            <div style={{fontSize: 9.5, color:'var(--muted)', fontWeight: 700}}>APR</div>
            <div style={{fontFamily:'Fraunces, serif', fontSize: 20, fontWeight: 500, lineHeight: 1}}>28</div>
          </div>
          <div>
            <div style={{fontSize: 13, fontWeight: 600}}>Silk Press + Trim</div>
            <div style={{fontSize: 11.5, color:'var(--muted)'}}>Jasmine M. · 2:30 PM</div>
          </div>
        </div>
        <div style={{display:'flex', gap: 10, padding: '10px 0'}}>
          <div style={{width: 40, textAlign:'center'}}>
            <div style={{fontSize: 9.5, color:'var(--muted)', fontWeight: 700}}>MAY</div>
            <div style={{fontFamily:'Fraunces, serif', fontSize: 20, fontWeight: 500, lineHeight: 1}}>3</div>
          </div>
          <div>
            <div style={{fontSize: 13, fontWeight: 600}}>Bridal Trial</div>
            <div style={{fontSize: 11.5, color:'var(--muted)'}}>Alana K. · 10:00 AM</div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ========== MESSAGES ==========
const MessagesPage = ({ nav }) => {
  const apiAvailable = typeof window !== 'undefined' && window.cgApi && window.cgApi.isAuthed();
  const [convs, setConvs] = React.useState(() => Array.isArray(window.CONVERSATIONS) ? window.CONVERSATIONS : []);
  const [activeId, setActiveId] = React.useState(() => (convs[0] && convs[0].id) || null);
  const [draft, setDraft] = React.useState('');
  const [messages, setMessages] = React.useState(() => Array.isArray(window.MESSAGES_P1) ? window.MESSAGES_P1 : []);
  const [sending, setSending] = React.useState(false);
  const bodyRef = React.useRef(null);

  // Load conversations from API
  React.useEffect(() => {
    if (!apiAvailable) return;
    cgApi.listConversations().then(list => {
      if (!list || !list.length) return;
      setConvs(list);
      window.CONVERSATIONS = list;
      if (!activeId) setActiveId(list[0].id);
    }).catch(() => {});
  }, []);

  // Load messages for active conversation
  React.useEffect(() => {
    if (!apiAvailable || !activeId) return;
    cgApi.listMessages(activeId).then(msgs => {
      const adapted = (msgs || []).map(m => ({
        dir: m.from === 'me' ? 'out' : 'in',
        text: m.text,
        time: m.time,
        img: m.mediaUrl ? { url: m.mediaUrl, tone: 'coral', label: '' } : null,
      }));
      setMessages(adapted);
      cgApi.markRead(activeId).catch(() => {});
      setTimeout(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, 30);
    }).catch(() => {});
  }, [activeId]);

  const active = convs.find(c => c.id === activeId) || convs[0] || { name: 'Conversation', tone: 'coral' };

  const send = async () => {
    const text = (draft || '').trim();
    if (!text || sending) return;
    if (!apiAvailable || !activeId) {
      setMessages(prev => [...prev, { dir: 'out', text, time: 'now' }]);
      setDraft('');
      return;
    }
    const optimistic = { dir: 'out', text, time: 'now' };
    setMessages(prev => [...prev, optimistic]);
    setDraft('');
    setSending(true);
    try {
      await cgApi.sendMessage(activeId, text, null, 'TEXT');
    } catch (e) {
      setMessages(prev => prev.map(m => m === optimistic ? { ...m, text: m.text + ' (send failed)' } : m));
    } finally {
      setSending(false);
      setTimeout(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, 30);
    }
  };

  return (
    <div className="fade-in">
      <div className="container">
        <div className="page-head">
          <div>
            <div className="eyebrow">Inbox</div>
            <h1><span className="i">Messages</span></h1>
          </div>
        </div>

        <div className="msg-layout">
          <div className="conv-list">
            <div className="conv-list-head">
              <input placeholder="Search conversations..."/>
            </div>
            <div style={{flex: 1, overflowY: 'auto'}}>
              {convs.length === 0 && <div style={{padding: 24, color: 'var(--muted)', fontSize: 13, textAlign: 'center'}}>No conversations yet. Start one from a provider's profile.</div>}
              {convs.map(c => (
                <div key={c.id} className={`conv-item ${activeId === c.id ? 'active' : ''}`} onClick={() => setActiveId(c.id)}>
                  <div className={`av`} style={{background: `var(--grad-${c.tone === 'mint' ? 'teal' : 'coral'})`, position:'relative', backgroundImage: c.avatar ? `url(${c.avatar})` : undefined, backgroundSize: 'cover'}}>
                    {c.online && <div style={{position:'absolute', bottom: 0, right: 0, width: 11, height: 11, borderRadius:'50%', background:'var(--teal)', border:'2px solid #fff'}}/>}
                  </div>
                  <div className="conv-body">
                    <div className="top">
                      <div className="n">{c.name}</div>
                      <div className="t">{c.time}</div>
                    </div>
                    <div className={`last ${c.unread > 0 ? 'unread' : ''}`}>{c.lastMessage || c.last || ''}</div>
                  </div>
                  {c.unread > 0 && <div className="unread-dot"/>}
                </div>
              ))}
            </div>
          </div>

          <div className="chat-pane">
            <div className="chat-head">
              <div className={`placeholder-av`} style={{width: 38, height: 38, background: `var(--grad-coral)`}}/>
              <div>
                <div className="n">{active.name}</div>
                <div className="s">Active now</div>
              </div>
              <div className="actions">
                <button className="icon-btn" style={{width: 34, height: 34}}><Icon name="phone" size={14}/></button>
                <button className="icon-btn" style={{width: 34, height: 34}}><Icon name="more" size={14}/></button>
              </div>
            </div>

            <div className="chat-body" ref={bodyRef}>
              {messages.map((m, i) => {
                if (m.type === 'day') return <div key={i} className="chat-day">{m.text}</div>;
                if (m.typing) return (
                  <div key={i} className="typing">
                    <span/><span/><span/>
                  </div>
                );
                if (m.img) return (
                  <React.Fragment key={i}>
                    <div className="msg-img">
                      <Ph tone={m.img.tone} style={{fontSize: 11}}>{m.img.label}</Ph>
                    </div>
                    <div className={`msg-time ${m.dir === 'out' ? 'out' : ''}`}>{m.time}</div>
                  </React.Fragment>
                );
                return (
                  <React.Fragment key={i}>
                    <div className={`msg-bubble msg-${m.dir}`}>{m.text}</div>
                    <div className={`msg-time ${m.dir === 'out' ? 'out' : ''}`}>{m.time}</div>
                  </React.Fragment>
                );
              })}
            </div>

            <div className="chat-input">
              <button className="icon-btn" style={{width: 36, height: 36, border:'none', background:'var(--sand)'}}><Icon name="paperclip" size={16}/></button>
              <button className="icon-btn" style={{width: 36, height: 36, border:'none', background:'var(--sand)'}}><Icon name="image" size={16}/></button>
              <input
                placeholder={`Message ${active.name}...`}
                value={draft}
                onChange={e => setDraft(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
              />
              <button className="icon-btn" style={{width: 40, height: 40, background:'var(--ink)', color:'#fff', border:'none'}} onClick={send} disabled={sending || !draft.trim()}>
                <Icon name="send" size={15}/>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { BookingsPage, MessagesPage });