// widgets/calendar.jsx — live Google Calendar (or any ICS) feed
//
// Config (in layout.yml):
//   - type: calendar
//     config:
//       endpoint: /api/calendar
//       source: primary       # maps to env var CALENDAR_PRIMARY_ICS
//       limit: 8
//
// Set the ICS URL via env:
//   - dev: wrangler.toml [vars] CALENDAR_PRIMARY_ICS = "https://..."
//   - prod: CF Pages dashboard → Settings → Environment variables

const CALENDAR_MOCK = [
  { title: 'Design Review',  start: nowOffsetISO( 1.5), location: 'Zoom',     allDay: false },
  { title: 'Project Sync',   start: nowOffsetISO( 4.0), location: 'Office',   allDay: false },
  { title: 'Deep Work',      start: nowOffsetISO( 6.5), location: '',         allDay: false },
  { title: 'Gym',            start: nowOffsetISO( 9.0), location: 'Anytime',  allDay: false },
];

function nowOffsetISO(hoursFromNow) {
  return new Date(Date.now() + hoursFromNow * 3600_000).toISOString();
}

function CalendarWidget({ config }) {
  const size = useWidgetSize();
  const endpoint = config?.endpoint || '/api/calendar';
  const source = config?.source || 'primary';
  const limit = config?.limit ?? (size === 'compact' ? 3 : 8);
  const url = `${endpoint}?source=${encodeURIComponent(source)}&limit=${limit}`;

  const { data, loading, error } = useFetch(url, {
    ttl: 10 * 60_000,
    fallback: CALENDAR_MOCK,
  });

  const isErrorObj = data && !Array.isArray(data) && data.error;
  const events = Array.isArray(data) ? data : CALENDAR_MOCK;
  const showingMock = error || isErrorObj || !data;
  const errMsg = isErrorObj ? data.error : (error ? String(error.message) : null);

  const action = <span className="muted" style={{fontSize: 11}}>{events.length} upcoming</span>;

  return (
    <Panel
      title="Calendar"
      hint={showingMock ? `(mock — ${errMsg || 'unreachable'})` : null}
      action={action}
    >
      <div className="agenda">
        {events.map((e, i) => (
          <div key={i} className="agenda-item">
            <div className="agenda-time">{formatEventTime(e)}</div>
            <div className="agenda-dot work"></div>
            <div className="agenda-content">
              <div className="agenda-title">{e.title}</div>
              <div className="agenda-meta">{e.location || (e.allDay ? 'All day' : '')}</div>
            </div>
          </div>
        ))}
        {loading && events.length === 0 && <div className="muted" style={{padding: 12}}>Loading…</div>}
        {!loading && events.length === 0 && <div className="muted" style={{padding: 12}}>Nothing upcoming.</div>}
      </div>
    </Panel>
  );
}

function formatEventTime(e) {
  const d = new Date(e.start);
  if (isNaN(d)) return '';
  if (e.allDay) {
    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
  }
  // Today → just time; otherwise day + time
  const now = new Date();
  const sameDay = d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate();
  const time = d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
  if (sameDay) return time;
  const day = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
  return `${day} ${time}`;
}

registerWidget('calendar', CalendarWidget);