/* global React, Icon, initials, fmtDate, fmtTime, fmtDuration, fmtPhone, relTime, api, toast */
const { useState, useEffect, useMemo, useRef } = React;

/* --- Shared hook for API data --- */
function useApi(fetcher, deps = []) {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    let cancelled = false;
    setLoading(true);
    fetcher().then(d => { if (!cancelled) { setData(d); setError(null); } })
      .catch(e => { if (!cancelled) setError(e.message); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, deps);
  return { data, loading, error, refetch: () => {
    setLoading(true);
    fetcher().then(d => { setData(d); setError(null); }).catch(e => setError(e.message)).finally(() => setLoading(false));
  }};
}

/* helper: service label / chip */
function serviceLabel(s) {
  if (!s) return 'Inquiry';
  const m = { 'weekly service': 'Weekly service', 'opening': 'Opening', 'closing': 'Closing',
    'liner replacement': 'Liner replacement', 'equipment service': 'Equipment', 'equipment': 'Equipment' };
  return m[s.toLowerCase()] || s;
}
function serviceChip(s) {
  if (!s) return '';
  const m = { 'weekly service': 'pool', 'opening': 'sage', 'closing': 'sun',
    'liner replacement': 'clay', 'equipment service': 'clay', 'equipment': 'clay', 'inquiry': '' };
  return m[s.toLowerCase()] || '';
}

/* ====================================================================
   Today (landing) — the calm briefing
   ==================================================================== */
const TodayView = ({ onJump, onOpenCall, onOpenThread }) => {
  const { data: stats, loading: loadingStats } = useApi(() => api.stats(), []);
  const { data: appointments } = useApi(() => api.appointments('upcoming'), []);
  const { data: threads } = useApi(() => api.threads(true), []);
  const { data: calls } = useApi(() => api.calls(null, 4), []);

  const now = new Date();
  const dayName = now.toLocaleDateString([], { weekday: 'long' });
  const dateName = now.toLocaleDateString([], { month: 'long', day: 'numeric' });
  const hour = now.getHours();
  const greeting = hour < 12 ? 'Good morning' : hour < 17 ? 'Good afternoon' : 'Good evening';

  const upcomingAppts = (appointments || []).slice(0, 5);
  const needsReplyThreads = threads || [];
  const recentCalls = calls || [];

  return (
    <div>
      <div className="page-head page-head-today">
        <div>
          <div className="eyebrow" style={{marginBottom: 6}}>{dayName} · {dateName}</div>
          <h1>{greeting}, Bill.</h1>
          <div className="subtitle">
            {loadingStats ? 'Loading…' :
              `${stats?.calls_today || 0} calls today. ${upcomingAppts.length} upcoming stops, and ${stats?.needs_reply || 0} messages waiting for a reply.`
            }
          </div>
        </div>
        <div style={{display:"flex", gap:8, flexWrap:"wrap"}}>
          <button className="btn secondary" onClick={() => onJump("assistant")}>
            <Icon name="sparkle" size={16} /> Ask OpenClaw
          </button>
          <button className="btn primary" onClick={() => onJump("appointments")}>
            <Icon name="plus" size={16} /> New appointment
          </button>
        </div>
      </div>

      <div className="today-grid">
        <div className="today-main">

          {/* Stats tiles */}
          <div className="today-stats">
            <div className={`stat-tile ${(stats?.needs_reply || 0) > 0 ? "attention" : ""}`} onClick={() => onJump("messages")}>
              <div className="stat-label"><Icon name="message" size={14} /> Needs reply</div>
              <div className="stat-value">{stats?.needs_reply ?? '—'}</div>
              <div className="stat-sub">conversations</div>
            </div>
            <div className="stat-tile" onClick={() => onJump("calls")}>
              <div className="stat-label"><Icon name="phone" size={14} /> Calls this week</div>
              <div className="stat-value">{stats?.calls_last_7d ?? '—'}</div>
              <div className="stat-sub">
                {stats ? `${stats.calls_last_7d > stats.calls_prev_7d ? '↑' : '↓'} ${Math.abs(stats.calls_last_7d - stats.calls_prev_7d)} vs last week` : ''}
              </div>
            </div>
            <div className="stat-tile" onClick={() => onJump("appointments")}>
              <div className="stat-label"><Icon name="clock" size={14} /> Upcoming visits</div>
              <div className="stat-value">{stats?.appointments_next_7d ?? '—'}</div>
              <div className="stat-sub">next 7 days</div>
            </div>
            <div className="stat-tile" onClick={() => onJump("customers")}>
              <div className="stat-label"><Icon name="users" size={14} /> Customers</div>
              <div className="stat-value">{stats?.unique_customers ?? '—'}</div>
              <div className="stat-sub">{stats?.weekly_clients || 0} weekly</div>
            </div>
          </div>

          {/* Today's route */}
          <div className="card">
            <div className="card-header">
              <h2>Upcoming appointments</h2>
              <span className="chip pool">{upcomingAppts.length} stops</span>
              <button className="btn ghost sm" onClick={() => onJump("appointments")}>Open schedule <Icon name="chev" size={14} /></button>
            </div>
            <div className="route-list">
              {upcomingAppts.length === 0 && <div className="empty-state" style={{padding: "28px 16px"}}>No upcoming appointments.</div>}
              {upcomingAppts.map((a, idx) => (
                <div key={a.id} className={`route-item ${idx === 0 ? "now" : ""}`}>
                  <div className="route-time">
                    {fmtTime(a.scheduled_at)}
                    <small>{idx === 0 ? "Next up" : fmtDate(a.scheduled_at)}</small>
                  </div>
                  <div className="route-body">
                    <div className="route-customer">{a.customer_name || fmtPhone(a.customer_phone)}</div>
                    <div className="route-meta">
                      <span><Icon name="pin" size={12} /> {a.address || '—'}</span>
                    </div>
                    <div className="route-tags">
                      <span className={`chip ${serviceChip(a.service)}`}>{serviceLabel(a.service)}</span>
                    </div>
                  </div>
                  <Icon name="chev" size={16} />
                </div>
              ))}
            </div>
          </div>

        </div>

        {/* Side column */}
        <div className="today-side">
          <div className="card">
            <div className="card-header">
              <h2>Needs reply</h2>
              {needsReplyThreads.length > 0 && <span className="chip clay">{needsReplyThreads.length}</span>}
            </div>
            <div>
              {needsReplyThreads.length === 0 && (
                <div className="empty-state" style={{padding: "28px 16px"}}>Inbox is clear. Nice.</div>
              )}
              {needsReplyThreads.map(t => (
                <div key={t.phone} className="inbox-item unread" onClick={() => onOpenThread(t.phone)}>
                  <div className="avatar sm">{initials(t.customer_name)}</div>
                  <div style={{minWidth: 0}}>
                    <div className="inbox-name">{t.customer_name || fmtPhone(t.phone)}</div>
                    <div className="inbox-preview">{t.last_body}</div>
                  </div>
                  <div className="inbox-time">{relTime(t.last_message_at)}</div>
                </div>
              ))}
              <div style={{padding:"12px 16px", textAlign:"center"}}>
                <button className="btn ghost sm" onClick={() => onJump("messages")}>See all messages <Icon name="chev" size={14} /></button>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <h2>Recent calls</h2>
              <button className="btn ghost sm" onClick={() => onJump("calls")}>All calls <Icon name="chev" size={14} /></button>
            </div>
            <div>
              {recentCalls.map(k => (
                <div key={k.call_id} className="inbox-item" onClick={() => onOpenCall(k.call_id)}>
                  <div className={`avatar sm ${k.name ? "" : "clay"}`}>{initials(k.name || 'Unknown')}</div>
                  <div style={{minWidth: 0}}>
                    <div className="inbox-name">{k.name || 'Unknown'}</div>
                    <div className="inbox-preview">{serviceLabel(k.service)} · {fmtDuration(k.duration_s)}</div>
                  </div>
                  <div className="inbox-time">{relTime(k.started_at)}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.TodayView = TodayView;
window.useApi = useApi;
window.serviceLabel = serviceLabel;
window.serviceChip = serviceChip;