// DEPLOY_CONFIG: {"triggers": [{"name": "meeting_time_confirmed_email_participants", "on": "collection.add", "collection": "meeting_times", "actions": [{"type": "email", "to": "{{participants_emails}}", "subject": "Meeting time confirmed", "body": "The meeting time has been confirmed for {{confirmed_time_localized}}. Each recipient should see this time in their own local time zone."}]}]}
import { useEffect, useMemo, useState } from 'react';
import { Timeline } from './components/Timeline.jsx';
import { MemberManager } from './components/MemberManager.jsx';
import { OverlapFinder } from './components/OverlapFinder.jsx';
import { useAI, useAuth, useCollection, usePresence } from '@deplixo/sdk';

function App() {
  const [activeTab, setActiveTab] = useState('timeline');
  const [selectedGroupId, setSelectedGroupId] = useState('');
  const [shareFeedback, setShareFeedback] = useState('');
  const { items: members, loading: membersLoading, add, update, remove } = useCollection('members', { personal: true });
  const { items: meetingGroups, loading: groupsLoading, add: addGroup, update: updateGroup, remove: removeGroup } = useCollection('meeting_groups', { personal: true });
  const { items: meetings, loading: meetingsLoading, add: addMeeting, update: updateMeeting, remove: removeMeeting } = useCollection('meetings', { personal: true });
  const { user, loading: authLoading, login, logout } = useAuth();
  const { users: onlineUsers, update: updatePresence } = usePresence({ status: 'online' });
  const { generate, loading: aiLoading, error: aiError } = useAI();
  const [meetingSuggestion, setMeetingSuggestion] = useState(null);
  const [suggestionFeedback, setSuggestionFeedback] = useState('');
  const [suggestionLoading, setSuggestionLoading] = useState(false);

  const tabs = [
    { id: 'timeline', label: '⏱ Timeline', icon: '⏱' },
    { id: 'members', label: '👥 Members', icon: '👥' },
    { id: 'overlap', label: '✦ Find Time', icon: '✦' },
    { id: 'calendar', label: '🗓 Calendar', icon: '🗓' },
  ];

  const getSchedulerShareLink = (groupId = '') => {
    const url = new URL(window.location.href);
    url.searchParams.set('view', 'overlap');
    if (groupId) {
      url.searchParams.set('group', groupId);
    } else {
      url.searchParams.delete('group');
    }
    return url.toString();
  };

  const syncStateFromUrl = () => {
    if (typeof window === 'undefined') return;
    const params = new URLSearchParams(window.location.search);
    const view = params.get('view');
    const group = params.get('group') || '';

    if (view && ['timeline', 'members', 'overlap', 'calendar'].includes(view)) {
      setActiveTab(view);
    }

    setSelectedGroupId(group);
  };

  const handleAuthAction = async () => {
    if (user) {
      await logout();
      return;
    }

    await login('google');
  };

  const isAuthenticated = !!user;
  const isLoading = authLoading || membersLoading || groupsLoading || meetingsLoading;

  const selectedGroup = useMemo(() => {
    return meetingGroups?.find(group => group.id === selectedGroupId) || null;
  }, [meetingGroups, selectedGroupId]);

  const selectedGroupShareLink = useMemo(() => getSchedulerShareLink(selectedGroupId), [selectedGroupId]);

  const onlineMemberIds = useMemo(() => {
    return new Set((onlineUsers || []).map(u => u.id));
  }, [onlineUsers]);

  const onlineMembers = useMemo(() => {
    return (members || []).filter(member => {
      if (member?.id && onlineMemberIds.has(member.id)) return true;
      if (member?.userId && onlineMemberIds.has(member.userId)) return true;
      return false;
    });
  }, [members, onlineMemberIds]);

  useEffect(() => {
    if (!isAuthenticated || !user) return;
    updatePresence({
      id: user.id,
      name: user.name || 'Signed in user',
      avatar: user.avatar || '',
      status: 'online',
      activeTab,
      groupId: selectedGroupId,
      updatedAt: new Date().toISOString(),
    });
  }, [isAuthenticated, user, activeTab, selectedGroupId, updatePresence]);

  useEffect(() => {
    if (typeof window === 'undefined') return undefined;

    const markActive = () => {
      if (!user) return;
      updatePresence({
        id: user.id,
        name: user.name || 'Signed in user',
        avatar: user.avatar || '',
        status: 'online',
        activeTab,
        groupId: selectedGroupId,
        updatedAt: new Date().toISOString(),
      });
    };

    const events = ['focus', 'visibilitychange', 'mousemove', 'keydown', 'click', 'touchstart'];
    events.forEach(eventName => window.addEventListener(eventName, markActive, { passive: true }));
    const intervalId = window.setInterval(markActive, 30000);

    return () => {
      events.forEach(eventName => window.removeEventListener(eventName, markActive));
      window.clearInterval(intervalId);
    };
  }, [user, activeTab, selectedGroupId, updatePresence]);

  const handleSelectGroup = (groupId) => {
    setSelectedGroupId(groupId);
    const url = new URL(window.location.href);
    url.searchParams.set('view', 'overlap');
    if (groupId) {
      url.searchParams.set('group', groupId);
    } else {
      url.searchParams.delete('group');
    }
    window.history.replaceState({}, '', url.toString());
  };

  const handleCopyShareLink = async () => {
    const shareLink = selectedGroupId ? selectedGroupShareLink : getSchedulerShareLink('');
    try {
      await navigator.clipboard.writeText(shareLink);
      setShareFeedback('Scheduler link copied to clipboard');
    } catch {
      setShareFeedback('Copy failed — share this link manually');
    }
    window.clearTimeout(handleCopyShareLink._timer);
    handleCopyShareLink._timer = window.setTimeout(() => setShareFeedback(''), 2500);
  };

  const handleSaveGroup = async (groupData) => {
    const payload = {
      ...groupData,
      memberIds: Array.isArray(groupData.memberIds) ? groupData.memberIds : [],
      minDuration: Number(groupData.minDuration) || 1,
      displayTimezone: groupData.displayTimezone || 'UTC',
      updatedAt: new Date().toISOString(),
    };

    if (groupData.id) {
      await updateGroup(groupData.id, payload);
      return groupData.id;
    }

    const created = await addGroup({
      ...payload,
      createdAt: new Date().toISOString(),
    });
    return created?.id || '';
  };

  const handleDeleteGroup = async (groupId) => {
    await removeGroup(groupId);
    if (selectedGroupId === groupId) {
      setSelectedGroupId('');
      const url = new URL(window.location.href);
      url.searchParams.delete('group');
      window.history.replaceState({}, '', url.toString());
    }
  };

  const handleSaveMeeting = async (meetingData) => {
    const payload = {
      ...meetingData,
      memberIds: Array.isArray(meetingData.memberIds) ? meetingData.memberIds : [],
      timezone: meetingData.timezone || 'UTC',
      startAt: meetingData.startAt || new Date().toISOString(),
      endAt: meetingData.endAt || new Date(Date.now() + 60 * 60 * 1000).toISOString(),
      updatedAt: new Date().toISOString(),
    };

    if (meetingData.id) {
      await updateMeeting(meetingData.id, payload);
      return meetingData.id;
    }

    const created = await addMeeting({
      ...payload,
      createdAt: new Date().toISOString(),
    });
    return created?.id || '';
  };

  const handleDeleteMeeting = async (meetingId) => {
    await removeMeeting(meetingId);
  };

  const buildSuggestedMeetingPrompt = (group, groupMembers, existingMeetings) => {
    const memberLines = (groupMembers || []).map(member => {
      const hours = `${member?.workingHoursStart ?? 9}:00-${member?.workingHoursEnd ?? 17}:00`;
      return `- ${member?.name || 'Unknown'} | timezone: ${member?.timezone || 'UTC'} | working hours: ${hours}`;
    }).join('\n');

    const meetingLines = (existingMeetings || []).slice(0, 40).map(meeting => {
      return `- ${meeting?.title || 'Untitled'} | start: ${meeting?.startAt || ''} | end: ${meeting?.endAt || ''} | timezone: ${meeting?.timezone || 'UTC'}`;
    }).join('\n');

    return {
      system: 'You are a scheduling assistant. Propose the best meeting time based on member working hours, existing meetings, and the requested duration. Return JSON only.',
      user: `Meeting group: ${group?.name || 'Selected group'}\nMinimum duration (minutes): ${Number(group?.minDuration) || 60}\nDisplay timezone: ${group?.displayTimezone || 'UTC'}\n\nMembers:\n${memberLines || '- No members selected'}\n\nExisting meetings:\n${meetingLines || '- None'}\n\nReturn JSON with this exact shape: {"startAt":"ISO string","endAt":"ISO string","timezone":"IANA/UTC timezone string","confidence":"high|medium|low","reason":"short explanation","memberAvailability":"short summary"}. Choose the earliest high-quality slot within the next 14 days if possible. Prefer times that maximize overlap and avoid conflicts.`,
    };
  };

  const handleGenerateMeetingSuggestion = async () => {
    const groupMembers = selectedGroup
      ? (members || []).filter(member => (selectedGroup.memberIds || []).includes(member.id) || (selectedGroup.memberIds || []).includes(member.userId))
      : (members || []);

    const durationMinutes = Number(selectedGroup?.minDuration) || 60;
    if (!groupMembers.length) {
      setMeetingSuggestion(null);
      setSuggestionFeedback('Select a meeting group with members before asking for an AI suggestion.');
      return;
    }

    setSuggestionLoading(true);
    setSuggestionFeedback('');
    try {
      const response = await generate(buildSuggestedMeetingPrompt(selectedGroup, groupMembers, meetings || []));
      const parsed = typeof response === 'string' ? JSON.parse(response) : response;
      if (!parsed?.startAt || !parsed?.endAt) {
        setMeetingSuggestion(null);
        setSuggestionFeedback('AI suggestion was incomplete. Try again.');
      } else {
        setMeetingSuggestion({
          ...parsed,
          durationMinutes,
          groupId: selectedGroupId,
        });
      }
    } catch {
      setMeetingSuggestion(null);
      setSuggestionFeedback('AI suggestion failed. Please try again.');
    } finally {
      setSuggestionLoading(false);
    }
  };

  const handleApplySuggestion = () => {
    if (!meetingSuggestion) return;
    window.dispatchEvent(new CustomEvent('synczone-open-meeting-draft', { detail: meetingSuggestion }));
    setActiveTab('calendar');
  };

  if (typeof window !== 'undefined') {
    const expectedView = new URLSearchParams(window.location.search).get('view');
    const expectedGroup = new URLSearchParams(window.location.search).get('group') || '';
    if (expectedView || expectedGroup) {
      queueMicrotask(syncStateFromUrl);
    }
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-inner">
          <h1 className="app-title">
            <span className="title-icon">◈</span>
            SyncZone
          </h1>
          <p className="app-subtitle">Distributed Team Scheduler</p>
          <div className="presence-summary" aria-label="Online team members">
            <span className="presence-label">Online now</span>
            <div className="presence-pills">
              {onlineMembers.length ? (
                onlineMembers.map(member => (
                  <span key={member.id} className="presence-pill online" title={member.name}>
                    <span className="presence-dot online" />
                    <span className="presence-name">{member.name}</span>
                  </span>
                ))
              ) : (
                <span className="presence-empty">No teammates online</span>
              )}
            </div>
          </div>
        </div>

        <div className="auth-area">
          {authLoading ? (
            <div className="auth-loading">Checking sign-in…</div>
          ) : isAuthenticated ? (
            <div className="auth-user-chip">
              {user?.avatar ? (
                <img className="auth-user-avatar" src={user.avatar} alt={user?.name || 'Signed in user'} />
              ) : (
                <div className="auth-user-avatar auth-user-avatar-fallback">{(user?.name || 'U').slice(0, 1).toUpperCase()}</div>
              )}
              <div className="auth-user-meta">
                <span className="auth-user-name">{user?.name || 'Signed in'}</span>
                <span className="auth-user-status">Authenticated</span>
              </div>
              <button className="auth-btn secondary" onClick={handleAuthAction}>Sign out</button>
            </div>
          ) : (
            <button className="auth-btn primary" onClick={handleAuthAction}>Sign in with Google</button>
          )}
        </div>
      </header>

      <nav className="tab-nav">
        {tabs.map(tab => {
          const disabled = tab.id === 'members' && !isAuthenticated;
          return (
            <button
              key={tab.id}
              className={`tab-btn ${activeTab === tab.id ? 'active' : ''} ${disabled ? 'disabled' : ''}`}
              onClick={() => !disabled && setActiveTab(tab.id)}
              disabled={disabled}
            >
              <span className="tab-icon">{tab.icon}</span>
              <span className="tab-label">{tab.label}</span>
            </button>
          );
        })}
      </nav>

      <main className="app-main">
        {isLoading ? (
          <div className="loading-state">
            <div className="skeleton-bar"></div>
            <div className="skeleton-bar short"></div>
            <div className="skeleton-bar"></div>
          </div>
        ) : (
          <>
            {activeTab === 'timeline' && <Timeline members={members} />}
            {activeTab === 'members' && (
              isAuthenticated ? (
                <MemberManager
                  members={members}
                  onAdd={add}
                  onUpdate={update}
                  onRemove={remove}
                  currentUser={user}
                />
              ) : (
                <div className="auth-gate-card">
                  <h2>Sign in required</h2>
                  <p>Use Google sign-in to manage your team members and access the authenticated workspace.</p>
                  <button className="auth-btn primary" onClick={handleAuthAction}>Sign in with Google</button>
                </div>
              )
            )}
            {activeTab === 'overlap' && (
              <div className="overlap-finder">
                <div className="overlap-header">
                  <h2 className="section-title">Find Time</h2>
                  <p>Share this scheduler link with your team so everyone can open the same meeting group and planning view.</p>
                </div>

                <div className="share-panel">
                  <div className="share-link-row">
                    <input className="share-link-input" value={selectedGroupShareLink} readOnly aria-label="Shareable scheduler link" />
                    <button className="auth-btn primary" onClick={handleCopyShareLink}>Copy link</button>
                  </div>
                  {shareFeedback ? <div className="share-feedback">{shareFeedback}</div> : null}
                </div>

                <OverlapFinder
                  members={members}
                  currentUser={user}
                  meetingGroups={meetingGroups}
                  selectedGroup={selectedGroup}
                  selectedGroupId={selectedGroupId}
                  onSelectGroup={handleSelectGroup}
                  onSaveGroup={handleSaveGroup}
                  onDeleteGroup={handleDeleteGroup}
                />
              </div>
            )}
            {activeTab === 'calendar' && (
              <CalendarView
                meetings={meetings}
                members={members}
                meetingGroups={meetingGroups}
                currentUser={user}
                selectedGroupId={selectedGroupId}
                onSelectGroup={handleSelectGroup}
                onSaveMeeting={handleSaveMeeting}
                onDeleteMeeting={handleDeleteMeeting}
                meetingSuggestion={meetingSuggestion}
                onGenerateSuggestion={handleGenerateMeetingSuggestion}
                onApplySuggestion={handleApplySuggestion}
                aiLoading={suggestionLoading || aiLoading}
                aiError={aiError}
                suggestionFeedback={suggestionFeedback}
              />
            )}
          </>
        )}
      </main>
    </div>
  );
}


function GoogleAuthGate({ user, loading, onSignIn, onSignOut, children }) {
  if (loading) {
    return (
      <div className="auth-gate-card">
        <div className="auth-loading">Checking sign-in…</div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="auth-gate-card">
        <h2>Sign in required</h2>
        <p>Use Google sign-in to access team management and the authenticated workspace.</p>
        <button className="auth-btn primary" onClick={onSignIn}>Sign in with Google</button>
      </div>
    );
  }

  return (
    <>
      {children}
    </>
  );
}


function CalendarView({ meetings, members, meetingGroups, currentUser, selectedGroupId, onSelectGroup, onSaveMeeting, onDeleteMeeting, meetingSuggestion, onGenerateSuggestion, onApplySuggestion, aiLoading, aiError, suggestionFeedback }) {
  const [calendarMonth, setCalendarMonth] = useState(() => new Date());
  const [draftMeeting, setDraftMeeting] = useState(null);
  const [expandedMeetingId, setExpandedMeetingId] = useState('');

  useEffect(() => {
    const openDraft = (event) => {
      const detail = event?.detail;
      if (!detail) return;
      setDraftMeeting({
        id: '',
        title: detail.title || 'AI-suggested meeting',
        notes: detail.reason || '',
        memberIds: Array.isArray(detail.memberIds) ? detail.memberIds : [],
        timezone: detail.timezone || 'UTC',
        startAt: detail.startAt || new Date().toISOString(),
        endAt: detail.endAt || new Date(Date.now() + 60 * 60 * 1000).toISOString(),
        groupId: detail.groupId || selectedGroupId || '',
      });
    };

    window.addEventListener('synczone-open-meeting-draft', openDraft);
    return () => window.removeEventListener('synczone-open-meeting-draft', openDraft);
  }, [selectedGroupId]);

  const monthStart = useMemo(() => {
    return new Date(calendarMonth.getFullYear(), calendarMonth.getMonth(), 1);
  }, [calendarMonth]);

  const monthEnd = useMemo(() => {
    return new Date(calendarMonth.getFullYear(), calendarMonth.getMonth() + 1, 0);
  }, [calendarMonth]);

  const calendarDays = useMemo(() => {
    const start = new Date(monthStart);
    start.setDate(start.getDate() - start.getDay());
    const days = [];
    for (let i = 0; i < 42; i += 1) {
      const day = new Date(start);
      day.setDate(start.getDate() + i);
      days.push(day);
    }
    return days;
  }, [monthStart]);

  const visibleMeetings = useMemo(() => {
    return (meetings || [])
      .filter(meeting => {
        if (!meeting?.startAt) return false;
        const start = new Date(meeting.startAt);
        return start >= monthStart && start <= new Date(monthEnd.getFullYear(), monthEnd.getMonth(), monthEnd.getDate(), 23, 59, 59, 999);
      })
      .sort((a, b) => new Date(a.startAt).getTime() - new Date(b.startAt).getTime());
  }, [meetings, monthStart, monthEnd]);

  const selectedGroup = useMemo(() => {
    return meetingGroups?.find(group => group.id === selectedGroupId) || null;
  }, [meetingGroups, selectedGroupId]);

  const selectedGroupMembers = useMemo(() => {
    const selectedIds = new Set((selectedGroup?.memberIds || []).filter(Boolean));
    if (!selectedIds.size) return members || [];
    return (members || []).filter(member => selectedIds.has(member.id) || selectedIds.has(member.userId));
  }, [members, selectedGroup]);

  const goMonth = (delta) => {
    setCalendarMonth(prev => new Date(prev.getFullYear(), prev.getMonth() + delta, 1));
  };

  const handleSave = async (meetingData) => {
    if (!onSaveMeeting) return;
    const savedId = await onSaveMeeting(meetingData);
    if (savedId) {
      setDraftMeeting(null);
      setExpandedMeetingId(savedId);
    }
  };

  const eventsByDate = useMemo(() => {
    const map = new Map();
    (visibleMeetings || []).forEach(meeting => {
      const key = formatDateKey(meeting.startAt);
      if (!map.has(key)) map.set(key, []);
      map.get(key).push(meeting);
    });
    return map;
  }, [visibleMeetings]);

  const suggestionDuration = meetingSuggestion?.startAt && meetingSuggestion?.endAt
    ? Math.max(15, Math.round((new Date(meetingSuggestion.endAt).getTime() - new Date(meetingSuggestion.startAt).getTime()) / 60000))
    : Number(selectedGroup?.minDuration) || 60;

  const suggestionStartLabel = meetingSuggestion?.startAt
    ? formatMeetingDateTime(meetingSuggestion.startAt, meetingSuggestion?.timezone || selectedGroup?.displayTimezone || 'UTC')
    : '';

  const suggestionEndLabel = meetingSuggestion?.endAt
    ? formatMeetingDateTime(meetingSuggestion.endAt, meetingSuggestion?.timezone || selectedGroup?.displayTimezone || 'UTC')
    : '';

  return (
    <div className="calendar-view">
      <div className="calendar-header">
        <div>
          <h2 className="section-title">Calendar</h2>
          <p className="calendar-subtitle">Time zone-aware meeting planning with local rendering for each member.</p>
        </div>
        <div className="calendar-nav-actions">
          <button className="btn-secondary" onClick={() => goMonth(-1)}>Previous</button>
          <button className="btn-secondary" onClick={() => setCalendarMonth(new Date())}>Today</button>
          <button className="btn-secondary" onClick={() => goMonth(1)}>Next</button>
        </div>
      </div>

      <div className="calendar-toolbar">
        <div className="calendar-month-label">{formatMonthLabel(calendarMonth)}</div>
        <button className="btn-primary" onClick={() => setDraftMeeting({ id: '', title: '', notes: '', memberIds: selectedGroupMembers.map(member => member.id).filter(Boolean), timezone: 'UTC', startAt: new Date().toISOString(), endAt: new Date(Date.now() + 60 * 60 * 1000).toISOString(), groupId: selectedGroupId })}>+ New meeting</button>
      </div>

      <div className="calendar-ai-panel">
        <div className="calendar-ai-header">
          <div>
            <h3 className="calendar-ai-title">AI meeting suggestion</h3>
            <p className="calendar-ai-subtitle">Generate an optimal time from existing members, selected group settings, and current calendar conflicts.</p>
          </div>
          <button className="btn-primary" onClick={onGenerateSuggestion} disabled={aiLoading || !selectedGroupMembers.length}>
            {aiLoading ? 'Analyzing…' : 'Suggest best time'}
          </button>
        </div>

        {aiError ? <div className="calendar-ai-error">{aiError}</div> : null}
        {suggestionFeedback ? <div className="calendar-ai-feedback">{suggestionFeedback}</div> : null}

        {meetingSuggestion ? (
          <div className="calendar-ai-result">
            <div className="calendar-ai-result-top">
              <div>
                <div className="calendar-ai-result-label">Suggested slot</div>
                <div className="calendar-ai-result-time">{suggestionStartLabel} → {suggestionEndLabel}</div>
                <div className="calendar-ai-result-meta">{meetingSuggestion.timezone || selectedGroup?.displayTimezone || 'UTC'} · {suggestionDuration} min · confidence {meetingSuggestion.confidence || 'medium'}</div>
              </div>
              <div className="calendar-ai-actions">
                <button className="btn-secondary" onClick={onApplySuggestion}>Use this slot</button>
              </div>
            </div>
            <div className="calendar-ai-reason">{meetingSuggestion.reason || 'Best available time based on current constraints.'}</div>
            <div className="calendar-ai-summary">{meetingSuggestion.memberAvailability || ''}</div>
          </div>
        ) : null}
      </div>

      <div className="calendar-grid-wrap">
        <div className="calendar-weekdays">
          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
            <div key={day} className="calendar-weekday">{day}</div>
          ))}
        </div>

        <div className="calendar-grid">
          {calendarDays.map(day => {
            const key = formatDateKey(day);
            const dayMeetings = eventsByDate.get(key) || [];
            const isCurrentMonth = day.getMonth() === calendarMonth.getMonth();
            const isToday = formatDateKey(day) === formatDateKey(new Date());
            return (
              <div key={key} className={`calendar-day ${isCurrentMonth ? '' : 'muted'} ${isToday ? 'today' : ''}`}>
                <div className="calendar-day-top">
                  <span className="calendar-day-number">{day.getDate()}</span>
                  {dayMeetings.length ? <span className="calendar-day-count">{dayMeetings.length}</span> : null}
                </div>
                <div className="calendar-day-events">
                  {dayMeetings.slice(0, 3).map(meeting => (
                    <button key={meeting.id} className="calendar-event" onClick={() => setExpandedMeetingId(prev => prev === meeting.id ? '' : meeting.id)}>
                      <span className="calendar-event-time">{formatMeetingTime(meeting.startAt, selectedGroup?.displayTimezone || meeting.timezone || 'UTC')}</span>
                      <span className="calendar-event-title">{meeting.title || 'Untitled meeting'}</span>
                    </button>
                  ))}
                  {dayMeetings.length > 3 ? <div className="calendar-more">+{dayMeetings.length - 3} more</div> : null}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="calendar-list">
        <div className="calendar-list-header">
          <h3 className="calendar-list-title">Upcoming meetings</h3>
          <span className="calendar-list-count">{visibleMeetings.length} total</span>
        </div>
        {visibleMeetings.length ? visibleMeetings.map(meeting => (
          <div key={meeting.id} className={`calendar-list-item ${expandedMeetingId === meeting.id ? 'expanded' : ''}`}>
            <button className="calendar-list-main" onClick={() => setExpandedMeetingId(prev => prev === meeting.id ? '' : meeting.id)}>
              <div className="calendar-list-timeblock">
                <div className="calendar-list-time">{formatMeetingDateTime(meeting.startAt, selectedGroup?.displayTimezone || meeting.timezone || 'UTC')}</div>
                <div className="calendar-list-zone">{selectedGroup?.displayTimezone || meeting.timezone || 'UTC'}</div>
              </div>
              <div className="calendar-list-meta">
                <div className="calendar-list-title-row">
                  <span className="calendar-list-title-text">{meeting.title || 'Untitled meeting'}</span>
                  {meeting.groupId && selectedGroupId && meeting.groupId === selectedGroupId ? <span className="calendar-list-badge">Current group</span> : null}
                </div>
                <div className="calendar-list-subtitle">{meeting.notes || 'No notes added'}</div>
              </div>
            </button>
            {expandedMeetingId === meeting.id ? (
              <div className="calendar-details">
                <div className="calendar-detail-row">
                  <span>Start</span>
                  <strong>{formatMeetingDateTime(meeting.startAt, selectedGroup?.displayTimezone || meeting.timezone || 'UTC')}</strong>
                </div>
                <div className="calendar-detail-row">
                  <span>End</span>
                  <strong>{formatMeetingDateTime(meeting.endAt, selectedGroup?.displayTimezone || meeting.timezone || 'UTC')}</strong>
                </div>
                <div className="calendar-detail-row">
                  <span>Members</span>
                  <strong>{(meeting.memberIds || []).length || 'All available'}</strong>
                </div>
                <div className="calendar-participants">
                  {(meeting.memberIds || []).map(memberId => {
                    const member = (members || []).find(item => item.id === memberId || item.userId === memberId);
                    if (!member) return null;
                    return (
                      <span key={memberId} className="calendar-participant">{member.name}</span>
                    );
                  })}
                </div>
                <div className="calendar-detail-actions">
                  <button className="btn-secondary" onClick={() => setDraftMeeting(meeting)}>Edit</button>
                  <button className="btn-secondary danger" onClick={() => onDeleteMeeting?.(meeting.id)}>Delete</button>
                </div>
              </div>
            ) : null}
          </div>
        )) : (
          <div className="empty-state">
            <div className="empty-icon">🗓</div>
            <h2>No meetings yet</h2>
            <p>Create a meeting to see it appear in this calendar grid and list with time zone-aware rendering.</p>
          </div>
        )}
      </div>

      {draftMeeting ? (
        <div className="member-form-overlay">
          <MeetingForm
            meeting={draftMeeting}
            members={selectedGroupMembers}
            onSave={handleSave}
            onCancel={() => setDraftMeeting(null)}
            currentUser={currentUser}
          />
        </div>
      ) : null}
    </div>
  );
}


function MeetingForm({ meeting, members, onSave, onCancel }) {
  const [formState, setFormState] = useState(() => ({
    id: meeting?.id || '',
    title: meeting?.title || '',
    notes: meeting?.notes || '',
    memberIds: Array.isArray(meeting?.memberIds) ? meeting.memberIds : [],
    timezone: meeting?.timezone || 'UTC',
    startAt: meeting?.startAt || new Date().toISOString(),
    endAt: meeting?.endAt || new Date(Date.now() + 60 * 60 * 1000).toISOString(),
    groupId: meeting?.groupId || '',
  }));

  useEffect(() => {
    setFormState({
      id: meeting?.id || '',
      title: meeting?.title || '',
      notes: meeting?.notes || '',
      memberIds: Array.isArray(meeting?.memberIds) ? meeting.memberIds : [],
      timezone: meeting?.timezone || 'UTC',
      startAt: meeting?.startAt || new Date().toISOString(),
      endAt: meeting?.endAt || new Date(Date.now() + 60 * 60 * 1000).toISOString(),
      groupId: meeting?.groupId || '',
    });
  }, [meeting]);

  const toggleMember = (memberId) => {
    setFormState(prev => {
      const exists = prev.memberIds.includes(memberId);
      return {
        ...prev,
        memberIds: exists ? prev.memberIds.filter(id => id !== memberId) : [...prev.memberIds, memberId],
      };
    });
  };

  const submit = async (event) => {
    event.preventDefault();
    await onSave?.(formState);
  };

  return (
    <form className="member-form" onSubmit={submit}>
      <h3 className="form-title">{formState.id ? 'Edit meeting' : 'New meeting'}</h3>
      <div className="form-row">
        <div className="form-group">
          <label className="form-label">Title</label>
          <input className="form-input" value={formState.title} onChange={event => setFormState(prev => ({ ...prev, title: event.target.value }))} placeholder="Team sync" />
        </div>
        <div className="form-group">
          <label className="form-label">Time zone</label>
          <input className="form-input" value={formState.timezone} onChange={event => setFormState(prev => ({ ...prev, timezone: event.target.value }))} placeholder="UTC" />
        </div>
      </div>
      <div className="form-row">
        <div className="form-group">
          <label className="form-label">Start</label>
          <input className="form-input" type="datetime-local" value={toLocalDateTimeValue(formState.startAt)} onChange={event => setFormState(prev => ({ ...prev, startAt: toIsoFromLocalInput(event.target.value, prev.timezone) }))} />
        </div>
        <div className="form-group">
          <label className="form-label">End</label>
          <input className="form-input" type="datetime-local" value={toLocalDateTimeValue(formState.endAt)} onChange={event => setFormState(prev => ({ ...prev, endAt: toIsoFromLocalInput(event.target.value, prev.timezone) }))} />
        </div>
      </div>
      <div className="form-group">
        <label className="form-label">Participants</label>
        <div className="group-member-picker">
          {(members || []).map(member => (
            <label key={member.id} className="group-member-option">
              <input type="checkbox" checked={formState.memberIds.includes(member.id)} onChange={() => toggleMember(member.id)} />
              <span>{member.name}</span>
            </label>
          ))}
        </div>
      </div>
      <div className="form-group">
        <label className="form-label">Notes</label>
        <textarea className="form-input" rows="3" value={formState.notes} onChange={event => setFormState(prev => ({ ...prev, notes: event.target.value }))} placeholder="Agenda, links, or reminders" />
      </div>
      <div className="form-actions">
        <button type="button" className="btn-secondary" onClick={onCancel}>Cancel</button>
        <button type="submit" className="btn-primary">Save meeting</button>
      </div>
    </form>
  );
}


function formatDateKey(value) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '';
  return date.toISOString().slice(0, 10);
}

function formatMonthLabel(date) {
  if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '';
  return date.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
}

function formatMeetingTime(value, timezone) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '--:--';
  try {
    return new Intl.DateTimeFormat(undefined, {
      hour: 'numeric',
      minute: '2-digit',
      timeZone: timezone || 'UTC',
    }).format(date);
  } catch {
    return new Intl.DateTimeFormat(undefined, {
      hour: 'numeric',
      minute: '2-digit',
    }).format(date);
  }
}

function formatMeetingDateTime(value, timezone) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '--';
  try {
    return new Intl.DateTimeFormat(undefined, {
      weekday: 'short',
      month: 'short',
      day: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
      timeZone: timezone || 'UTC',
    }).format(date);
  } catch {
    return new Intl.DateTimeFormat(undefined, {
      weekday: 'short',
      month: 'short',
      day: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(date);
  }
}

function toLocalDateTimeValue(value) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '';
  const pad = n => String(n).padStart(2, '0');
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
}

function toIsoFromLocalInput(value, timezone) {
  if (!value) return new Date().toISOString();
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return new Date().toISOString();
  return date.toISOString();
}


function AIMeetingSuggestionCard({ suggestion, loading, error, feedback, onGenerate, onApply, disabled }) {
  return (
    <div className="calendar-ai-panel">
      <div className="calendar-ai-header">
        <div>
          <h3 className="calendar-ai-title">AI meeting suggestion</h3>
          <p className="calendar-ai-subtitle">Generate an optimal time from existing members, selected group settings, and current calendar conflicts.</p>
        </div>
        <button className="btn-primary" onClick={onGenerate} disabled={loading || disabled}>
          {loading ? 'Analyzing…' : 'Suggest best time'}
        </button>
      </div>

      {error ? <div className="calendar-ai-error">{error}</div> : null}
      {feedback ? <div className="calendar-ai-feedback">{feedback}</div> : null}

      {suggestion ? (
        <div className="calendar-ai-result">
          <div className="calendar-ai-result-top">
            <div>
              <div className="calendar-ai-result-label">Suggested slot</div>
              <div className="calendar-ai-result-time">{suggestion.startLabel} → {suggestion.endLabel}</div>
              <div className="calendar-ai-result-meta">{suggestion.timezone} · {suggestion.durationMinutes} min · confidence {suggestion.confidence}</div>
            </div>
            <div className="calendar-ai-actions">
              <button className="btn-secondary" onClick={onApply}>Use this slot</button>
            </div>
          </div>
          <div className="calendar-ai-reason">{suggestion.reason}</div>
          <div className="calendar-ai-summary">{suggestion.memberAvailability}</div>
        </div>
      ) : null}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);