// app.jsx — main app composition

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "wheelStyle": "natural",
  "showGallery": true,
  "showLegend": true,
  "todayOverride": ""
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [selectedTripId, setSelectedTripId] = useState(null);
  // Identity persists across reloads via localStorage
  const [currentUserId, setCurrentUserId] = useState(() => window.AarshjulAPI.getCurrentUserId());
  const [showLoginModal, setShowLoginModal] = useState(() => !window.AarshjulAPI.getCurrentUserId());
  const [loginModalMode, setLoginModalMode] = useState('login');
  const [showRsvpPrompt, setShowRsvpPrompt] = useState(false);
  const [showCalendarPrompt, setShowCalendarPrompt] = useState(false);
  const [members, setMembers] = useState(() => window.AarshjulAPI.getAllMembers());
  // Members may grow during session (after invite); refresh from local source
  const [rsvps, setRsvps] = useState({});
  const [choreAssignments, setChoreAssignments] = useState({});
  const [expenses, setExpenses] = useState({});
  const [choreNotes, setChoreNotes] = useState({});

  // Fetch shared state from backend on login / mount
  useEffect(() => {
    if (!currentUserId) return;
    window.AarshjulAPI.fetchState().then((s) => {
      if (!s) return;
      if (s.rsvps)      setRsvps(s.rsvps);
      if (s.chores)     setChoreAssignments(s.chores);
      if (s.choreNotes) setChoreNotes(s.choreNotes);
      if (s.expenses)   setExpenses(s.expenses);
    });
  }, [currentUserId]);

  // "Today" — fixed to a date during the year so the wheel feels alive
  // (real "today" would be 2026-05-04 = days before forårsturen; that works.)
  const today = useMemo(() => {
    if (t.todayOverride) return new Date(t.todayOverride + 'T12:00:00');
    return new Date('2026-05-04T12:00:00');
  }, [t.todayOverride]);

  // Default selection: next upcoming trip
  const upcomingTrip = useMemo(() => {
    return window.TRIPS
      .map((trip) => ({ ...trip, daysUntil: window.daysBetween(today, trip.start) }))
      .find((trip) => trip.daysUntil >= -3) || window.TRIPS[0];
  }, [today]);

  const selectedTrip = window.TRIPS.find((tr) => tr.id === selectedTripId) || upcomingTrip;

  const handleRsvp = (memberId, status) => {
    setRsvps((prev) => {
      const next = { ...prev, [selectedTrip.id]: { ...prev[selectedTrip.id], [memberId]: status } };
      window.AarshjulAPI.pushState({ rsvps: { [selectedTrip.id]: { [memberId]: status } } });
      return next;
    });
  };

  const handleChoreToggle = (choreId, memberId, action = 'add') => {
    setChoreAssignments((prev) => {
      const tripData = prev[selectedTrip.id] || {};
      const raw = tripData[choreId];
      const current = Array.isArray(raw) ? raw : (raw ? [raw] : []);
      let next;
      if (action === 'add') {
        if (current.includes(memberId)) next = current;
        else next = [...current, memberId].slice(0, 3);
      } else {
        next = current.filter((id) => id !== memberId);
      }
      const nextState = { ...prev, [selectedTrip.id]: { ...tripData, [choreId]: next } };
      window.AarshjulAPI.pushState({ chores: { [selectedTrip.id]: { [choreId]: next } } });
      return nextState;
    });
    // Clear note if last person leaves
    if (action === 'remove') {
      setChoreAssignments((prev) => {
        const arr = prev[selectedTrip.id]?.[choreId];
        if (Array.isArray(arr) && arr.length === 0) {
          setChoreNotes((notes) => {
            const next = { ...notes, [selectedTrip.id]: { ...notes[selectedTrip.id], [choreId]: '' } };
            window.AarshjulAPI.pushState({ choreNotes: { [selectedTrip.id]: { [choreId]: '' } } });
            return next;
          });
        }
        return prev;
      });
    }
  };

  const handleChoreNote = (choreId, note) => {
    setChoreNotes((prev) => {
      const next = { ...prev, [selectedTrip.id]: { ...prev[selectedTrip.id], [choreId]: note } };
      window.AarshjulAPI.pushState({ choreNotes: { [selectedTrip.id]: { [choreId]: note } } });
      return next;
    });
  };

  const handleLoginSuccess = (member) => {
    setCurrentUserId(member.id);
    setShowLoginModal(false);
    setMembers(window.AarshjulAPI.getAllMembers());
    // After fresh login: prompt for calendar add (gmail = will auto-add later, others = .ics)
    if (loginModalMode === 'login') {
      setTimeout(() => setShowCalendarPrompt(true), 250);
    }
  };

  const handleLogout = () => {
    window.AarshjulAPI.logout();
    setCurrentUserId(null);
    setLoginModalMode('login');
    setShowLoginModal(true);
  };

  const handleRsvpAnswer = (status) => {
    handleRsvp(currentUserId, status);
    setShowRsvpPrompt(false);
    if (status === 'yes') {
      setSelectedTripId(upcomingTrip.id);
    }
  };

  const tripRsvps = rsvps[selectedTrip.id] || {};
  const tripChores = choreAssignments[selectedTrip.id] || {};
  const tripNotes = choreNotes[selectedTrip.id] || {};
  const tripExpenses = expenses[selectedTrip.id] || [];
  const attendingIds = Object.entries(tripRsvps)
    .filter(([, v]) => v === 'yes')
    .map(([id]) => id);

  const handleExpenseAdd = (exp) => {
    setExpenses((prev) => {
      const next = { ...prev, [selectedTrip.id]: [...(prev[selectedTrip.id] || []), exp] };
      window.AarshjulAPI.pushState({ expenses: { [selectedTrip.id]: next[selectedTrip.id] } });
      return next;
    });
  };
  const handleExpenseRemove = (id) => {
    setExpenses((prev) => {
      const next = { ...prev, [selectedTrip.id]: (prev[selectedTrip.id] || []).filter((e) => e.id !== id) };
      window.AarshjulAPI.pushState({ expenses: { [selectedTrip.id]: next[selectedTrip.id] } });
      return next;
    });
  };

  const todayDateStr = window.fmtDate(window.toLocalIso(today));

  return (
    <div className="app">
      {/* Masthead */}
      <header className="masthead">
        <div className="masthead-brand">
          <div className="masthead-mark"><span></span></div>
          <div className="masthead-title">
            <h1>Årshjulet</h1>
            <div className="masthead-sub">De Dekadente Drenge · Asserbo Plantage</div>
          </div>
        </div>
        <div className="masthead-meta">
          <div>{todayDateStr}</div>
          {currentUserId ? (
            <button className="user-picker user-picker-btn"
                    onClick={() => { setLoginModalMode('switch'); setShowLoginModal(true); }}
                    style={{ marginTop: 8 }}
                    title="Skift identitet">
              <Avatar member={members.find((m) => m.id === currentUserId)} size={22}/>
              <span className="user-picker-name">
                {members.find((m) => m.id === currentUserId)?.name}
              </span>
              <span className="user-picker-caret">▾</span>
            </button>
          ) : (
            <button className="user-picker user-picker-btn user-picker-empty"
                    onClick={() => { setLoginModalMode('login'); setShowLoginModal(true); }}
                    style={{ marginTop: 8 }}>
              <span>Log ind</span>
            </button>
          )}
        </div>
      </header>

      {/* Main grid */}
      <div className="main-grid">
        <div className="wheel-col">
          <YearWheel
            trips={window.TRIPS}
            today={today}
            selectedId={selectedTrip.id}
            onSelect={setSelectedTripId}
            variant={t.wheelStyle}
          />

          {t.showLegend && (
            <div className="wheel-legend">
              {window.TRIPS.map((trip, i) => (
                <button key={trip.id}
                        className={`wheel-legend-item ${selectedTrip.id === trip.id ? 'is-active' : ''}`}
                        onClick={() => setSelectedTripId(trip.id)}>
                  <div className="wheel-legend-num">№ {String(i + 1).padStart(2, '0')}</div>
                  <div className="wheel-legend-name">{trip.name.replace('-turen', '').replace('turen', '')}</div>
                  <div className="wheel-legend-date">{window.fmtDateRange(trip.start, trip.end)}</div>
                </button>
              ))}
            </div>
          )}
        </div>

        <div className="detail-col">
          <TripDetail
            trip={selectedTrip}
            rsvps={tripRsvps}
            chores={window.choresForTrip(selectedTrip)}
            choreAssignments={tripChores}
            choreNotes={tripNotes}
            currentUserId={currentUserId || 'jonathan'}
            onRsvp={handleRsvp}
            onChoreToggle={handleChoreToggle}
            onChoreNote={handleChoreNote}
          />
          <ExpensesSection
            trip={selectedTrip}
            expenses={tripExpenses}
            attendingIds={attendingIds}
            currentUserId={currentUserId}
            onAdd={handleExpenseAdd}
            onRemove={handleExpenseRemove}
          />
        </div>
      </div>

      {/* Gallery */}
      {t.showGallery && <Gallery pastTrips={window.PAST_TRIPS}/>}

      {/* Footer */}
      <footer className="foot">
        <div>De Dekadente Drenge · Anno MMXXVI</div>
        <div><em>Ad infinitum, ad Asserbo</em></div>
        <div>Vedtaget i sommerhuset 2018</div>
      </footer>

      {/* Tweaks */}
      <TweaksPanel title="Årshjul · Tweaks">
        <TweakSection label="Hjulets udseende"/>
        <TweakRadio label="Stil" value={t.wheelStyle}
                    options={[
                      { value: 'natural',    label: 'Natur' },
                      { value: 'parchment',  label: 'Pergament' },
                      { value: 'monochrome', label: 'Mono' },
                    ]}
                    onChange={(v) => setTweak('wheelStyle', v)}/>
        <TweakToggle label="Vis legende-grid" value={t.showLegend}
                     onChange={(v) => setTweak('showLegend', v)}/>
        <TweakToggle label="Vis arkivet" value={t.showGallery}
                     onChange={(v) => setTweak('showGallery', v)}/>

        <TweakSection label="Demo"/>
        <TweakText label="'I dag' (YYYY-MM-DD)" value={t.todayOverride}
                   placeholder="2026-05-04"
                   onChange={(v) => setTweak('todayOverride', v)}/>
        <TweakButton label="Log ud (vis login igen)" secondary
                     onClick={handleLogout}/>
      </TweaksPanel>

      <LoginModal
        open={showLoginModal}
        mode={loginModalMode}
        onSuccess={handleLoginSuccess}
        onClose={() => loginModalMode === 'switch' && setShowLoginModal(false)}/>

      <CalendarAddPrompt
        open={showCalendarPrompt}
        member={members.find((m) => m.id === currentUserId)}
        trips={window.TRIPS}
        onClose={() => setShowCalendarPrompt(false)}/>

      <RsvpPromptModal
        open={showRsvpPrompt}
        trip={upcomingTrip}
        member={members.find((m) => m.id === currentUserId)}
        onAnswer={handleRsvpAnswer}
        onClose={() => setShowRsvpPrompt(false)}/>
    </div>
  );
}

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