/* @component-map
 * App — Main container, routes between setup and main app views
 * SetupScreen — Initial setup flow for user identity and reference date
 * MainApp — Primary app view with seat display, actions, holidays
 * Header — App title and theme button
 * BirthdayBanner — Shows birthday celebration banner on Sept 18
 * SeatCard — Displays who has front seat today with streak and swap info
 * ActionButtons — Swap and dispute buttons
 * BirthdayCountdown — Mini card showing days until birthday
 * HolidaySection — Upcoming holidays list with add custom holiday
 * ThemeModal — Theme picker modal
 * DisputeModal — Dispute declaration modal with logic explanation
 * AddHolidayModal — Modal to add custom holidays
 * @end-component-map */

import { useCollection } from '@deplixo/sdk';

const THEMES = [
  { id: 'theme-pastel', label: '🌸 Blossom', bg: '#fff0f6', accent: '#ff6b9d', text: '#2d1b2e' },
  { id: 'theme-retro', label: '👾 Retro', bg: '#0a0a1a', accent: '#00ff9f', text: '#ffffff' },
  { id: 'theme-luxury', label: '✨ Luxe', bg: '#1a1408', accent: '#d4af37', text: '#f5f0e8' },
  { id: 'theme-nature', label: '🌿 Nature', bg: '#e8f5e9', accent: '#2e7d32', text: '#1b3a1c' },
  { id: 'theme-neon', label: '⚡ Neon', bg: '#0d0d0d', accent: '#ff073a', text: '#ffffff' },
  { id: 'theme-lemon', label: '🍋 Lemon', bg: '#fffde7', accent: '#f9a825', text: '#3e2a00' },
  { id: 'theme-sky', label: '🩵 Sky', bg: '#e3f2fd', accent: '#1976d2', text: '#0d1b2a' },
  { id: 'theme-peach', label: '🍑 Peach', bg: '#fff3e0', accent: '#e64a19', text: '#3e1000' },
  { id: 'theme-lavender', label: '💜 Lavender', bg: '#f3e5f5', accent: '#7b1fa2', text: '#1a0030' },
  { id: 'theme-mint', label: '🌿 Mint', bg: '#e0f7fa', accent: '#00838f', text: '#00252a' },
];

const US_HOLIDAYS_STATIC = [
  { name: "New Year's Day", month: 1, day: 1 },
  { name: "Valentine's Day", month: 2, day: 14 },
  { name: "St. Patrick's Day", month: 3, day: 17 },
  { name: "Easter", dynamic: true, fnName: 'getEaster' },
  { name: "Mother's Day", dynamic: true, fnName: 'getMothersDay' },
  { name: "Memorial Day", dynamic: true, fnName: 'getMemorialDay' },
  { name: "Father's Day", dynamic: true, fnName: 'getFathersDay' },
  { name: "Independence Day", month: 7, day: 4 },
  { name: "Labor Day", dynamic: true, fnName: 'getLaborDay' },
  { name: "Halloween", month: 10, day: 31 },
  { name: "Thanksgiving", dynamic: true, fnName: 'getThanksgiving' },
  { name: "Christmas", month: 12, day: 25 },
  { name: "New Year's Eve", month: 12, day: 31 },
];

function getEaster(year) {
  const a = year % 19, b = Math.floor(year / 100), c = year % 100;
  const d = Math.floor(b / 4), e = b % 4, f = Math.floor((b + 8) / 25);
  const g = Math.floor((b - f + 1) / 3), h = (19 * a + b - d - g + 15) % 30;
  const i = Math.floor(c / 4), k = c % 4, l = (32 + 2 * e + 2 * i - h - k) % 7;
  const m = Math.floor((a + 11 * h + 22 * l) / 451);
  const month = Math.floor((h + l - 7 * m + 114) / 31);
  const day = ((h + l - 7 * m + 114) % 31) + 1;
  return new Date(year, month - 1, day);
}

function getNthWeekday(year, month, weekday, n) {
  const d = new Date(year, month - 1, 1);
  let count = 0;
  while (true) {
    if (d.getDay() === weekday) { count++; if (count === n) return new Date(d); }
    d.setDate(d.getDate() + 1);
    if (d.getMonth() !== month - 1) break;
  }
  return null;
}

function getLastWeekday(year, month, weekday) {
  const d = new Date(year, month, 0);
  while (d.getDay() !== weekday) d.setDate(d.getDate() - 1);
  return d;
}

function getMothersDay(y) { return getNthWeekday(y, 5, 0, 2); }
function getMemorialDay(y) { return getLastWeekday(y, 5, 1); }
function getFathersDay(y) { return getNthWeekday(y, 6, 0, 3); }
function getLaborDay(y) { return getNthWeekday(y, 9, 1, 1); }
function getThanksgiving(y) { return getNthWeekday(y, 11, 4, 4); }

const dynamicFns = { getEaster, getMothersDay, getMemorialDay, getFathersDay, getLaborDay, getThanksgiving };

function getToday() {
  const d = new Date();
  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
}

function dateToStr(d) { return d.toISOString().split('T')[0]; }

function daysBetween(a, b) {
  return Math.round((b - a) / (1000 * 60 * 60 * 24));
}

function whoHasSeatOnDate(refDate, refPerson, date) {
  const ref = new Date(refDate);
  const diff = daysBetween(ref, date);
  const isEven = diff % 2 === 0;
  if (isEven) return refPerson;
  return refPerson === 'Madelyn' ? 'Sydney' : 'Madelyn';
}

function getEffectiveSeat(refDate, refPerson, swapStartDate, date) {
  const base = whoHasSeatOnDate(refDate, refPerson, date);
  if (swapStartDate && date >= new Date(swapStartDate)) {
    return base === 'Madelyn' ? 'Sydney' : 'Madelyn';
  }
  return base;
}

function getBirthdayCountdown() {
  const t = getToday();
  let bday = new Date(t.getFullYear(), 8, 18);
  if (bday <= t) bday = new Date(t.getFullYear() + 1, 8, 18);
  return daysBetween(t, bday);
}

function getAllHolidays(customHolidays) {
  const t = getToday();
  const year = t.getFullYear();
  const holidays = [];

  for (const h of US_HOLIDAYS_STATIC) {
    for (let y = year; y <= year + 1; y++) {
      let d = h.dynamic ? dynamicFns[h.fnName](y) : new Date(y, h.month - 1, h.day);
      if (d && d >= t) { holidays.push({ name: h.name, date: d }); break; }
    }
  }

  for (const ch of (customHolidays || [])) {
    const val = ch.value || ch;
    let d = new Date(val.date + 'T00:00:00');
    if (val.repeat === 'annual') {
      let candidate = new Date(year, d.getMonth(), d.getDate());
      if (candidate < t) candidate = new Date(year + 1, d.getMonth(), d.getDate());
      holidays.push({ name: val.name, date: candidate, custom: true, id: ch.id });
    } else {
      if (d >= t) holidays.push({ name: val.name, date: d, custom: true, id: ch.id });
    }
  }

  holidays.sort((a, b) => a.date - b.date);
  return holidays;
}

function SetupScreen({ onFinish }) {
  const [setupUser, setSetupUser] = React.useState(null);
  const [setupRefPerson, setSetupRefPerson] = React.useState(null);
  const [setupDate, setSetupDate] = React.useState('');

  const handleFinish = () => {
    if (!setupUser || !setupRefPerson || !setupDate) {
      alert('Please fill everything in!');
      return;
    }
    onFinish({
      user: setupUser,
      refDate: setupDate,
      refPerson: setupRefPerson,
      streakStart: dateToStr(getToday()),
      swapStartDate: null,
      theme: 'theme-pastel',
    });
  };

  return (
    <div className="setup-screen">
      <div className="app-title">🚗 Shotgun!</div>
      <p>Let&apos;s get you set up</p>
      <div className="setup-card">
        <label className="setup-label">Who are you?</label>
        <div className="name-options">
          <div
            className={`name-opt ${setupUser === 'Madelyn' ? 'selected' : ''}`}
            onClick={() => setSetupUser('Madelyn')}
          >Madelyn</div>
          <div
            className={`name-opt ${setupUser === 'Sydney' ? 'selected' : ''}`}
            onClick={() => setSetupUser('Sydney')}
          >Sydney</div>
        </div>

        <label className="setup-label setup-label-top">Reference date — a day you remember</label>
        <input
          type="date"
          className="setup-date-input"
          value={setupDate}
          onChange={(e) => setSetupDate(e.target.value)}
        />

        <label className="setup-label setup-label-top">Who had the front seat on that date?</label>
        <div className="name-options">
          <div
            className={`name-opt ${setupRefPerson === 'Madelyn' ? 'selected' : ''}`}
            onClick={() => setSetupRefPerson('Madelyn')}
          >Madelyn</div>
          <div
            className={`name-opt ${setupRefPerson === 'Sydney' ? 'selected' : ''}`}
            onClick={() => setSetupRefPerson('Sydney')}
          >Sydney</div>
        </div>

        <button className="btn btn-primary setup-go-btn" onClick={handleFinish}>Let&apos;s go! 🚗</button>
      </div>
    </div>
  );
}

function BirthdayBanner() {
  const t = getToday();
  const isBirthday = t.getMonth() === 8 && t.getDate() === 18;
  if (!isBirthday) return null;

  return (
    <div className="birthday-banner">
      <span className="confetti">🎉</span>
      <h2>Happy Birthday Madelyn &amp; Sydney! 🎂</h2>
      <p className="birthday-sub">Today is YOUR day — both of you!</p>
      <span className="confetti confetti-reverse">🎊</span>
    </div>
  );
}

function Header({ theme, onOpenTheme }) {
  return (
    <div className="header">
      <div className="app-title">🚗 Shotgun!</div>
      <button className="theme-btn" onClick={onOpenTheme}>🎨 Theme</button>
    </div>
  );
}

function SeatCard({ state }) {
  const t = getToday();
  const todayStr = dateToStr(t);
  const seat = getEffectiveSeat(state.refDate, state.refPerson, state.swapStartDate, t);
  const isMe = seat === state.user;

  const tmr = new Date(t);
  tmr.setDate(tmr.getDate() + 1);
  const tomorrowSeat = getEffectiveSeat(state.refDate, state.refPerson, state.swapStartDate, tmr);

  const streakDays = Math.max(0, daysBetween(new Date(state.streakStart), t));

  const hasSwap = !!state.swapStartDate;
  const swapDate = hasSwap ? new Date(state.swapStartDate) : null;

  return (
    <div className="seat-card">
      <div className="whose-label">Front seat today</div>
      <div className="whose-name">{isMe ? `${seat} 🙋` : seat}</div>
      <div className="whose-sub">{isMe ? "That's YOU today!" : `${seat} has shotgun`}</div>
      <div className="tomorrow-pill">Tomorrow: {tomorrowSeat}</div>
      <div className="streak-row">
        <span>🔥 Streak:</span>
        <span className="streak-num">{streakDays}</span>
        <span>days no disputes</span>
      </div>
      {hasSwap && (
        <div className="swap-active-banner">
          🔄 Schedule swapped from {swapDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} onward
        </div>
      )}
    </div>
  );
}

function ActionButtons({ state, onSwap, onOpenDispute }) {
  const todayStr = dateToStr(getToday());
  const isSwapToday = state.swapStartDate && dateToStr(new Date(state.swapStartDate)) === todayStr;

  return (
    <div className="btn-row">
      <button
        className={`btn ${isSwapToday ? 'btn-warning' : 'btn-primary'}`}
        onClick={onSwap}
      >
        {isSwapToday ? '↩️ Undo Swap' : '🔄 Swap Today'}
      </button>
      <button className="btn btn-danger" onClick={onOpenDispute}>⚡ Dispute</button>
    </div>
  );
}

function BirthdayCountdown() {
  const t = getToday();
  const isBirthday = t.getMonth() === 8 && t.getDate() === 18;

  return (
    <div className="mini-card">
      <div className="mini-card-title">🎂 Birthday Countdown</div>
      <div className="mini-card-body">September 18th</div>
      <div className="mini-card-big">
        {isBirthday ? '🎂 TODAY!' : `${getBirthdayCountdown()} days`}
      </div>
    </div>
  );
}

function HolidaySection({ customHolidays, onDeleteHoliday, onOpenAddHoliday }) {
  const holidays = getAllHolidays(customHolidays);
  const t = getToday();

  const next = holidays.length > 0 ? holidays[0] : null;
  const upcoming = holidays.slice(1, 6);

  return (
    <React.Fragment>
      <div className="section-title">🗓️ Upcoming Holidays</div>
      <div className="mini-card">
        {next ? (
          <div>
            <div className="mini-card-title">{next.name}</div>
            <div className="mini-card-big holiday-big-accent">
              {daysBetween(t, next.date) === 0 ? '🎉 TODAY!' : `${daysBetween(t, next.date)} days away`}
            </div>
            <div className="mini-card-body holiday-date-body">
              {next.date.toLocaleDateString('en-US', { month: 'long', day: 'numeric' })}
            </div>
          </div>
        ) : (
          <div className="mini-card-body">No upcoming holidays</div>
        )}
        {upcoming.length > 0 && (
          <ul className="holiday-list">
            {upcoming.map((h, i) => {
              const d = daysBetween(t, h.date);
              const dateStr = h.date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
              return (
                <li key={h.custom ? h.id : `${h.name}-${i}`}>
                  <span>{h.name} <span className="holiday-date-small">{dateStr}</span></span>
                  <span>
                    <span className="holiday-days">{d}d</span>
                    {h.custom && (
                      <button className="holiday-delete" onClick={() => onDeleteHoliday(h.id)}>✕</button>
                    )}
                  </span>
                </li>
              );
            })}
          </ul>
        )}
        <button className="add-holiday-btn" onClick={onOpenAddHoliday}>+ Add Custom Holiday</button>
      </div>
    </React.Fragment>
  );
}

function ThemeModal({ currentTheme, onSelectTheme, onClose }) {
  return (
    <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal">
        <h2>🎨 Choose Theme</h2>
        <div className="theme-grid">
          {THEMES.map(t => (
            <div
              key={t.id}
              className={`theme-option ${currentTheme === t.id ? 'active' : ''}`}
              style={{ background: t.bg, color: t.text, borderColor: currentTheme === t.id ? t.accent : 'transparent' }}
              onClick={() => onSelectTheme(t.id)}
            >
              {t.label}
            </div>
          ))}
        </div>
        <div className="modal-btns">
          <button className="btn btn-secondary modal-full-btn" onClick={onClose}>Done</button>
        </div>
      </div>
    </div>
  );
}

function DisputeModal({ state, onConfirm, onClose }) {
  const t = getToday();
  const base = whoHasSeatOnDate(state.refDate, state.refPerson, t);
  const ref = new Date(state.refDate);
  const diff = daysBetween(ref, t);
  const hasSwap = state.swapStartDate && t >= new Date(state.swapStartDate);

  return (
    <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal">
        <h2>⚡ Declare Dispute</h2>
        <p>This will reset your streak to 0. The math behind today&apos;s seat assignment is shown below so you can settle it together.</p>
        <div className="dispute-info">
          Starting from <strong>{state.refDate}</strong> when <strong>{state.refPerson}</strong> had the seat,
          today is day <strong>{diff}</strong> ({diff % 2 === 0 ? 'even' : 'odd'}) from that reference.
          By alternating, the base seat belongs to <strong>{base}</strong> today.
          {hasSwap && (
            <span><br />⚠️ A schedule swap is active from {state.swapStartDate}, flipping the seat.</span>
          )}
        </div>
        <p className="dispute-reminder">After declaring, ask the other person to tap Dispute on their phone too to reset their streak.</p>
        <div className="modal-btns">
          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
          <button className="btn btn-danger" onClick={onConfirm}>Reset My Streak</button>
        </div>
      </div>
    </div>
  );
}

function AddHolidayModal({ onSave, onClose }) {
  const [name, setName] = React.useState('');
  const [date, setDate] = React.useState('');
  const [repeat, setRepeat] = React.useState('annual');

  const handleSave = () => {
    if (!name.trim() || !date) {
      alert('Please fill in the name and date.');
      return;
    }
    onSave({ name: name.trim(), date, repeat });
  };

  return (
    <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal">
        <h2>🗓️ Add Holiday</h2>
        <label>Holiday Name</label>
        <input type="text" placeholder="e.g. Family Reunion" value={name} onChange={(e) => setName(e.target.value)} />
        <label>Date</label>
        <input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
        <label>Repeats?</label>
        <select value={repeat} onChange={(e) => setRepeat(e.target.value)}>
          <option value="annual">Every year (annual)</option>
          <option value="once">One-time only</option>
        </select>
        <div className="modal-btns">
          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={handleSave}>Add Holiday</button>
        </div>
      </div>
    </div>
  );
}

function MainApp({ state, stateId, onUpdateState, customHolidays, onAddHoliday, onDeleteHoliday }) {
  const [showThemeModal, setShowThemeModal] = React.useState(false);
  const [showDisputeModal, setShowDisputeModal] = React.useState(false);
  const [showHolidayModal, setShowHolidayModal] = React.useState(false);

  const handleSwap = () => {
    const todayStr = dateToStr(getToday());
    if (state.swapStartDate && dateToStr(new Date(state.swapStartDate)) === todayStr) {
      onUpdateState({ ...state, swapStartDate: null });
    } else {
      onUpdateState({ ...state, swapStartDate: todayStr });
    }
  };

  const handleSelectTheme = (themeId) => {
    onUpdateState({ ...state, theme: themeId });
  };

  const handleConfirmDispute = () => {
    onUpdateState({ ...state, streakStart: dateToStr(getToday()) });
    setShowDisputeModal(false);
    setTimeout(() => alert('Streak reset! Remind the other person to tap Dispute on their phone too.'), 100);
  };

  const handleSaveHoliday = (holiday) => {
    onAddHoliday(holiday);
    setShowHolidayModal(false);
  };

  React.useEffect(() => {
    document.body.className = state.theme || 'theme-pastel';
  }, [state.theme]);

  return (
    <div className="app">
      <BirthdayBanner />
      <Header theme={state.theme} onOpenTheme={() => setShowThemeModal(true)} />
      <SeatCard state={state} />
      <ActionButtons state={state} onSwap={handleSwap} onOpenDispute={() => setShowDisputeModal(true)} />
      <BirthdayCountdown />
      <HolidaySection
        customHolidays={customHolidays}
        onDeleteHoliday={onDeleteHoliday}
        onOpenAddHoliday={() => setShowHolidayModal(true)}
      />
      <div className="bottom-spacer" />

      {showThemeModal && (
        <ThemeModal
          currentTheme={state.theme}
          onSelectTheme={handleSelectTheme}
          onClose={() => setShowThemeModal(false)}
        />
      )}
      {showDisputeModal && (
        <DisputeModal
          state={state}
          onConfirm={handleConfirmDispute}
          onClose={() => setShowDisputeModal(false)}
        />
      )}
      {showHolidayModal && (
        <AddHolidayModal
          onSave={handleSaveHoliday}
          onClose={() => setShowHolidayModal(false)}
        />
      )}
    </div>
  );
}

function App() {
  const { items: stateItems, loading: stateLoading, add: addState, update: updateState, collection: stateCollection } = useCollection('shotgun_state', { personal: true });
  const { items: holidayItems, loading: holidaysLoading, add: addHoliday, remove: removeHoliday } = useCollection('shotgun_holidays', { personal: true });

  const currentState = stateItems.length > 0 ? stateItems[0] : null;

  const handleFinishSetup = async (data) => {
    await addState(data);
  };

  const handleUpdateState = async (newData) => {
    if (currentState) {
      await updateState(currentState.id, newData);
    }
  };

  const handleAddHoliday = async (holiday) => {
    await addHoliday(holiday);
  };

  const handleDeleteHoliday = async (id) => {
    await removeHoliday(id);
  };

  if (stateLoading || holidaysLoading) {
    return (
      <div className="setup-screen">
        <div className="app-title">🚗 Shotgun!</div>
        <p>Loading...</p>
      </div>
    );
  }

  if (!currentState) {
    return <SetupScreen onFinish={handleFinishSetup} />;
  }

  const stateValue = currentState.value || currentState;

  return (
    <MainApp
      state={stateValue}
      stateId={currentState.id}
      onUpdateState={handleUpdateState}
      customHolidays={holidayItems}
      onAddHoliday={handleAddHoliday}
      onDeleteHoliday={handleDeleteHoliday}
    />
  );
}

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