import { useCollection, useIdentity } from '@deplixo/sdk';
import { Icon } from './components/icons.jsx';
import Onboarding from './components/Onboarding.jsx';
import Home from './components/Home.jsx';
import Tasks from './components/Tasks.jsx';
import Schedule from './components/Schedule.jsx';
import Lists from './components/Lists.jsx';
import Assistant from './components/Assistant.jsx';
import Settings from './components/Settings.jsx';
import Pro from './components/Pro.jsx';
import ProFeatures from './components/ProFeatures.jsx';
import { parseDateStr, isSameDay, formatTime } from './components/utils.js';

const DEFAULT_PREFS = {
  theme: 'light',
  accent: '#5b3fd1',
  avatarUrl: '',
  displayName: '',
  onboarded: false,
  isPro: false,
  assistantName: '',
  background: '',
};

function applyTheme(prefs) {
  if (typeof document === 'undefined') return;
  const root = document.documentElement;
  root.setAttribute('data-theme', prefs.theme || 'light');
  if (prefs.accent) {
    root.style.setProperty('--primary', prefs.accent);
    // Soft tint derived from accent via color-mix (modern browsers)
    root.style.setProperty('--primary-tint', `color-mix(in srgb, ${prefs.accent} 14%, transparent)`);
    root.style.setProperty('--primary-dark', `color-mix(in srgb, ${prefs.accent} 80%, black)`);
  }
  // Pro custom background — applied to body so it shows behind the app shell.
  if (prefs.isPro && prefs.background) {
    document.body.style.backgroundImage = prefs.background;
    document.body.style.backgroundAttachment = 'fixed';
    document.body.style.backgroundSize = 'cover';
  } else {
    document.body.style.backgroundImage = '';
    document.body.style.backgroundAttachment = '';
    document.body.style.backgroundSize = '';
  }
}

function App() {
  const { user, loading: idLoading } = useIdentity();

  // Per-user collections (filtered by author.id).
  const tasksCol = useCollection('tasks');
  const eventsCol = useCollection('events');
  const remindersCol = useCollection('reminders');
  const shoppingCol = useCollection('shopping');
  const datesCol = useCollection('important_dates');
  const prefsCol = useCollection('preferences');
  const subscriptionsCol = useCollection('subscriptions');

  const [tab, setTab] = useState('home');
  const [showSettings, setShowSettings] = useState(false);
  const [showPro, setShowPro] = useState(false);
  const [showProFeatures, setShowProFeatures] = useState(false);

  const myId = user?.id;
  const mine = (arr) => (arr || []).filter(x => x.author?.id === myId);

  const tasks = mine(tasksCol.items);
  const events = mine(eventsCol.items);
  const reminders = mine(remindersCol.items);
  const shopping = mine(shoppingCol.items);
  const dates = mine(datesCol.items);

  const myPrefsItem = mine(prefsCol.items)[0];
  const prefs = { ...DEFAULT_PREFS, ...(myPrefsItem?.value || {}) };

  // Most recent active subscription for this user.
  const mySubscriptionItem = mine(subscriptionsCol.items)
    .slice()
    .sort((a, b) => (b.value?.startedAt || '').localeCompare(a.value?.startedAt || ''))[0];
  const subscription = mySubscriptionItem?.value || null;

  useEffect(() => { applyTheme(prefs); }, [prefs.theme, prefs.accent, prefs.background, prefs.isPro]);

  const updatePrefs = async (patch) => {
    const next = { ...prefs, ...patch };
    if (myPrefsItem) await prefsCol.update(myPrefsItem.id, next);
    else await prefsCol.add(next);
  };

  const saveSubscription = async (sub) => {
    if (mySubscriptionItem) await subscriptionsCol.update(mySubscriptionItem.id, sub);
    else await subscriptionsCol.add(sub);
  };

  // --- CRUD helpers ---
  const toggle = async (col, item) => {
    await col.update(item.id, { ...item.value, done: !item.value?.done });
  };

  // Add batches (used by assistant)
  const addMany = async (col, items) => {
    for (const it of items) await col.add(it);
  };

  // Plan My Day — simple heuristic
  const planMyDay = () => {
    const today = new Date();
    const todayEvents = events
      .filter(e => isSameDay(parseDateStr(e.value?.date), today))
      .sort((a,b) => (a.value?.startTime || '').localeCompare(b.value?.startTime || ''));
    const todayTasks = tasks.filter(t => !t.value?.done).slice(0, 4);

    let plan = "Here's a suggested plan for today:\n\n";
    if (todayEvents.length === 0 && todayTasks.length === 0) {
      plan = "Your day looks wide open! A great time to catch up on things you've been putting off, or take a well-deserved break. ✨";
    } else {
      todayEvents.forEach(e => {
        const s = formatTime(e.value?.startTime) || 'anytime';
        const en = e.value?.endTime ? `–${formatTime(e.value.endTime)}` : '';
        plan += `• ${s}${en} — ${e.value?.title}\n`;
      });
      if (todayTasks.length) {
        plan += `\nTry to fit in:\n`;
        todayTasks.forEach(t => { plan += `• ${t.value?.title}\n`; });
      }
    }
    // Jump to assistant and show the plan as a message
    setPlanMessage(plan);
    setTab('assistant');
  };

  // Communicate a plan message into the assistant via a key reset
  const [planMessage, setPlanMessage] = useState(null);

  // Quick-add: open assistant with empty input (same UX)
  const quickAdd = () => setTab('assistant');

  if (idLoading) {
    return <div style={{padding:'2rem', textAlign:'center', color:'var(--text-muted)'}}>Loading…</div>;
  }

  if (!prefs.onboarded) {
    return (
      <Onboarding
        prefs={prefs}
        updatePrefs={updatePrefs}
        onFinish={() => updatePrefs({ onboarded: true })}
      />
    );
  }

  if (showProFeatures) {
    return (
      <div className="app">
        <main className="app-main">
          <ProFeatures
            prefs={prefs}
            updatePrefs={updatePrefs}
            events={events}
            onAddEvents={(items) => addMany(eventsCol, items)}
            onAddTasks={(items) => addMany(tasksCol, items)}
            onBack={() => setShowProFeatures(false)}
          />
        </main>
      </div>
    );
  }

  if (showPro) {
    return (
      <div className="app">
        <main className="app-main">
          <Pro
            onClose={() => setShowPro(false)}
            isPro={!!prefs.isPro}
            subscription={subscription}
            onSaveSubscription={saveSubscription}
            onStartTrial={() => updatePrefs({ isPro: true })}
          />
        </main>
      </div>
    );
  }

  if (showSettings) {
    return (
      <div className="app">
        <main className="app-main">
          <Settings
            user={user}
            prefs={prefs}
            updatePrefs={updatePrefs}
            onShowPro={() => { setShowSettings(false); setShowPro(true); }}
            onShowProFeatures={() => { setShowSettings(false); setShowProFeatures(true); }}
            onBack={() => setShowSettings(false)}
          />
        </main>
      </div>
    );
  }

  const displayUser = { ...user, name: prefs.displayName || user?.name || 'friend' };
  // Only Pro users can override the assistant name; others always see "Luma".
  const effectiveAssistantName = (prefs.isPro && prefs.assistantName?.trim()) || 'Luma';

  return (
    <div className="app">
      <header className="app-header">
        <div className="brand">
          <span className="brand-name">Luma</span>
          <span className="brand-tagline">Your Life, Organized.</span>
        </div>
        <button
          className="avatar-btn"
          onClick={() => setShowSettings(true)}
          data-testid="header-settings-btn"
          aria-label="Open settings"
        >
          {prefs.avatarUrl
            ? <img src={prefs.avatarUrl} alt="" />
            : (displayUser.name || '?').charAt(0).toUpperCase()}
        </button>
      </header>

      <main className="app-main">
        {tab === 'home' && (
          <Home
            user={displayUser}
            tasks={tasks}
            events={events}
            reminders={reminders}
            onToggleTask={(t) => toggle(tasksCol, t)}
            onToggleReminder={(r) => toggle(remindersCol, r)}
            onGoAssistant={() => { setPlanMessage(null); setTab('assistant'); }}
            onPlanDay={planMyDay}
            onQuickAdd={quickAdd}
          />
        )}
        {tab === 'schedule' && (
          <Schedule
            events={events}
            reminders={reminders}
            onAdd={(v) => eventsCol.add(v)}
            onUpdate={(id, v) => eventsCol.update(id, v)}
            onRemove={(id) => eventsCol.remove(id)}
            onToggleReminder={(r) => toggle(remindersCol, r)}
          />
        )}
        {tab === 'tasks' && (
          <Tasks
            tasks={tasks}
            onAdd={(v) => tasksCol.add(v)}
            onUpdate={(id, v) => tasksCol.update(id, v)}
            onRemove={(id) => tasksCol.remove(id)}
            onToggle={(t) => toggle(tasksCol, t)}
          />
        )}
        {tab === 'lists' && (
          <Lists
            shopping={shopping}
            dates={dates}
            reminders={reminders}
            onAddShopping={(v) => shoppingCol.add(v)}
            onToggleShopping={(s) => toggle(shoppingCol, s)}
            onRemoveShopping={(id) => shoppingCol.remove(id)}
            onAddDate={(v) => datesCol.add(v)}
            onRemoveDate={(id) => datesCol.remove(id)}
            onAddReminder={(v) => remindersCol.add(v)}
            onToggleReminder={(r) => toggle(remindersCol, r)}
            onRemoveReminder={(id) => remindersCol.remove(id)}
          />
        )}
        {tab === 'assistant' && (
          <Assistant
            key={planMessage || 'default'}
            user={displayUser}
            assistantName={effectiveAssistantName}
            initialMessage={planMessage}
            tasks={tasks}
            events={events}
            onAddTasks={(items) => addMany(tasksCol, items)}
            onAddEvents={(items) => addMany(eventsCol, items)}
            onAddReminders={(items) => addMany(remindersCol, items)}
            onAddShopping={(items) => addMany(shoppingCol, items)}
            onAddDates={(items) => addMany(datesCol, items)}
          />
        )}
      </main>

      <nav className="bottom-nav" aria-label="Primary">
        <button className={`nav-btn ${tab==='home'?'active':''}`} onClick={() => setTab('home')} data-testid="nav-home" aria-current={tab==='home' ? 'page' : undefined}>
          <Icon.Home /><span className="nav-label">Home</span>
        </button>
        <button className={`nav-btn ${tab==='schedule'?'active':''}`} onClick={() => setTab('schedule')} data-testid="nav-schedule" aria-current={tab==='schedule' ? 'page' : undefined}>
          <Icon.Calendar /><span className="nav-label">Schedule</span>
        </button>
        <button className={`nav-btn ${tab==='tasks'?'active':''}`} onClick={() => setTab('tasks')} data-testid="nav-tasks" aria-current={tab==='tasks' ? 'page' : undefined}>
          <Icon.CheckCircle /><span className="nav-label">Tasks</span>
        </button>
        <button className={`nav-btn ${tab==='lists'?'active':''}`} onClick={() => setTab('lists')} data-testid="nav-lists" aria-current={tab==='lists' ? 'page' : undefined}>
          <Icon.Cart /><span className="nav-label">Lists</span>
        </button>
        <button className={`nav-btn ${tab==='assistant'?'active':''}`} onClick={() => setTab('assistant')} data-testid="nav-assistant" aria-current={tab==='assistant' ? 'page' : undefined}>
          <Icon.Sparkle /><span className="nav-label">Assistant</span>
        </button>
      </nav>
    </div>
  );
}

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