// Main Taskify app — composes everything

const { useState: aS, useEffect: aE, useMemo: aM, useCallback: aC } = React;

const ACCENTS = {
  blue:   "#3478F6",
  indigo: "#5E5CE6",
  purple: "#BF5AF2",
  pink:   "#FF375F",
  red:    "#FF453A",
  orange: "#FF9F0A",
  green:  "#30D158",
  teal:   "#40C8E0",
};

const App = () => {
  const { PROJECTS, TASKS, EVENTS } = window.TASKIFY_DATA;
  window.TaskifyUI.TODAY_DATE = window.TASKIFY_DATA.TODAY;

  // Tweaks (persisted)
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "theme": "dark",
    "accent": "#3478F6",
    "quickAddStyle": "spotlight",
    "showCalendar": true,
    "dropdownWidth": 420,
    "density": "comfortable",
    "emptyState": false,
    "fullscreenVariant": "detail",
    "wallpaperTint": "amber"
  }/*EDITMODE-END*/);

  const accent = t.accent || ACCENTS.blue;

  // App state
  const [view, setView] = aS("desktop");   // "desktop" | "fullscreen"
  const [ddOpen, setDdOpen] = aS(true);
  const [tab, setTab] = aS("today");
  const [focusIdx, setFocusIdx] = aS(0);
  const [tasks, setTasks] = aS(TASKS);
  const [selected, setSelected] = aS("t1");
  const [activeProject, setActiveProject] = aS("today");
  const [quickAddOpen, setQuickAddOpen] = aS(false);
  const [shortcutsOpen, setShortcutsOpen] = aS(false);
  const [showCmdHint, setShowCmdHint] = aS(false);

  const displayedTasks = t.emptyState
    ? tasks.map(x => ({ ...x, completed: true }))
    : tasks;

  // Compute today count for menubar badge
  const todayCount = displayedTasks.filter(x =>
    !x.completed && window.TaskifyUI.dayDiff(x.due) <= 0
  ).length;

  // Toggle task
  const toggleTask = aC((id) => {
    setTasks(prev => prev.map(x => x.id === id ? { ...x, completed: !x.completed } : x));
  }, []);

  // Add task
  const addTask = aC(({ title, project, priority, due }) => {
    const id = "new-" + Math.random().toString(36).slice(2, 7);
    const dueDt = new Date(window.TASKIFY_DATA.TODAY);
    if (due === "tomorrow") dueDt.setDate(dueDt.getDate() + 1);
    dueDt.setHours(17, 0, 0, 0);
    setTasks(prev => [{
      id, title, project, priority, due: dueDt.toISOString(),
      estimate: 30, tags: [], subtasks: [], links: [], notes: "", recurrence: null, completed: false,
    }, ...prev]);
    setQuickAddOpen(false);
  }, []);

  // Keyboard shortcuts
  aE(() => {
    const handler = (e) => {
      const inField = ["INPUT", "TEXTAREA"].includes(document.activeElement?.tagName);

      if (e.key === "Meta" || e.key === "Control") setShowCmdHint(true);

      if ((e.metaKey || e.ctrlKey) && e.key === "n") {
        e.preventDefault(); setQuickAddOpen(true);
      } else if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === "T" || e.key === "t")) {
        e.preventDefault(); setDdOpen(d => !d);
      } else if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === "F" || e.key === "f")) {
        e.preventDefault(); setView(v => v === "fullscreen" ? "desktop" : "fullscreen");
      } else if ((e.metaKey || e.ctrlKey) && e.key === "?") {
        e.preventDefault(); setShortcutsOpen(s => !s);
      } else if (e.key === "Escape") {
        if (quickAddOpen) setQuickAddOpen(false);
        else if (shortcutsOpen) setShortcutsOpen(false);
        else if (view === "fullscreen") setView("desktop");
        else if (ddOpen) setDdOpen(false);
      } else if (!inField && !quickAddOpen && !shortcutsOpen) {
        if (e.key === "1") setTab("today");
        else if (e.key === "2") setTab("upcoming");
        else if (e.key === "3" && t.showCalendar) setTab("calendar");
      }
    };
    const up = (e) => {
      if (e.key === "Meta" || e.key === "Control") setShowCmdHint(false);
    };
    window.addEventListener("keydown", handler);
    window.addEventListener("keyup", up);
    return () => {
      window.removeEventListener("keydown", handler);
      window.removeEventListener("keyup", up);
    };
  }, [ddOpen, view, quickAddOpen, shortcutsOpen, t.showCalendar]);

  // ===== Render =====

  // Set theme + accent + wallpaper as CSS vars on root
  aE(() => {
    document.documentElement.dataset.theme = t.theme;
    document.documentElement.dataset.wp    = t.wallpaperTint;
    document.documentElement.style.setProperty("--accent",      accent);
    document.documentElement.style.setProperty("--accent-soft", accent + "22");
    document.documentElement.style.setProperty("--accent-glow", accent + "55");
  }, [t.theme, t.wallpaperTint, accent]);

  return (
    <div className={"taskify-root showcmd-" + (showCmdHint ? "on" : "off")}>
      <Desktop.Wallpaper dark={t.theme === "dark"} />

      <div className="desktop-layer">
        <Desktop.MenuBar
          onOpenDropdown={() => setDdOpen(d => !d)}
          onOpenQuickAdd={() => setQuickAddOpen(true)}
          dropdownOpen={ddOpen}
          accent={accent}
          todayCount={todayCount}
        />

        {/* Backdrop to close dropdown */}
        {ddOpen && view === "desktop" && (
          <div className="dd-anchor" onClick={() => setDdOpen(false)}>
            <Dropdown
              tasks={displayedTasks}
              projects={PROJECTS}
              events={EVENTS}
              tab={tab} setTab={setTab}
              focusIdx={focusIdx} setFocusIdx={setFocusIdx}
              onToggle={toggleTask}
              onOpen={(id) => { setSelected(id); setView("fullscreen"); setDdOpen(false); }}
              onQuickAdd={() => setQuickAddOpen(true)}
              onFullscreen={() => { setView("fullscreen"); setDdOpen(false); }}
              onClose={() => setDdOpen(false)}
              width={t.dropdownWidth}
              dense={t.density === "dense"}
              showCalendar={t.showCalendar}
            />
          </div>
        )}

        {view === "fullscreen" && (
          <div className="fs-shell">
            <Fullscreen
              tasks={displayedTasks}
              projects={PROJECTS}
              events={EVENTS}
              activeProject={activeProject}
              setActiveProject={setActiveProject}
              selected={selected}
              setSelected={setSelected}
              onToggle={toggleTask}
              onUpdate={() => {}}
              onQuickAdd={() => setQuickAddOpen(true)}
              variant={t.fullscreenVariant}
              accent={accent}
            />
            <button className="exit-fs" onClick={() => setView("desktop")} title="Back (Esc)">
              <Icon name="x" size={12} /> Exit workspace
            </button>
          </div>
        )}

        {/* Hint badge near taskify menu bar item when no overlays */}
        {!ddOpen && !quickAddOpen && view === "desktop" && (
          <div className="onboard-pointer">
            <div className="op-arrow" />
            <div className="op-text">
              Click Taskify or press <Kbd>⌘</Kbd><Kbd>⇧</Kbd><Kbd>T</Kbd>
            </div>
          </div>
        )}

        <Desktop.Dock />
      </div>

      {/* Quick-add overlay */}
      {quickAddOpen && t.quickAddStyle === "spotlight" && (
        <QuickAdd.SpotlightQuickAdd
          projects={PROJECTS}
          defaultProject={activeProject !== "today" && activeProject !== "upcoming" && activeProject !== "all" ? activeProject : "inbox"}
          onSave={addTask}
          onCancel={() => setQuickAddOpen(false)}
          accent={accent}
        />
      )}
      {quickAddOpen && t.quickAddStyle === "floating" && (
        <QuickAdd.FloatingQuickAdd
          projects={PROJECTS}
          defaultProject="inbox"
          onSave={addTask}
          onCancel={() => setQuickAddOpen(false)}
          accent={accent}
          anchorRight={140}
        />
      )}
      {quickAddOpen && t.quickAddStyle === "inline" && (
        <div className="qa-backdrop subtle" onClick={() => setQuickAddOpen(false)}>
          <div className="qa-inline-wrap" onClick={(e) => e.stopPropagation()}>
            <QuickAdd.InlineQuickAdd
              projects={PROJECTS}
              defaultProject="inbox"
              onSave={addTask}
              onCancel={() => setQuickAddOpen(false)}
              accent={accent}
            />
          </div>
        </div>
      )}

      {shortcutsOpen && <Shortcuts onClose={() => setShortcutsOpen(false)} />}

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Appearance">
          <TweakRadio
            label="Theme"
            value={t.theme}
            options={[{ label: "Light", value: "light" }, { label: "Dark", value: "dark" }]}
            onChange={(v) => setTweak("theme", v)}
          />
          <TweakColor
            label="Accent"
            value={t.accent}
            options={Object.values(ACCENTS)}
            onChange={(v) => setTweak("accent", v)}
          />
          <TweakRadio
            label="Wallpaper"
            value={t.wallpaperTint}
            options={[
              { label: "Amber",  value: "amber"  },
              { label: "Ocean",  value: "ocean"  },
              { label: "Forest", value: "forest" },
            ]}
            onChange={(v) => setTweak("wallpaperTint", v)}
          />
        </TweakSection>

        <TweakSection label="Dropdown">
          <TweakSlider
            label="Width" unit="px"
            min={340} max={520} step={10}
            value={t.dropdownWidth}
            onChange={(v) => setTweak("dropdownWidth", v)}
          />
          <TweakRadio
            label="Density"
            value={t.density}
            options={[
              { label: "Comfortable", value: "comfortable" },
              { label: "Dense",       value: "dense" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
          <TweakToggle
            label="Calendar tab"
            value={t.showCalendar}
            onChange={(v) => setTweak("showCalendar", v)}
          />
          <TweakToggle
            label="Show empty state"
            value={t.emptyState}
            onChange={(v) => setTweak("emptyState", v)}
          />
        </TweakSection>

        <TweakSection label="Quick add">
          <TweakRadio
            label="Style"
            value={t.quickAddStyle}
            options={[
              { label: "Spotlight", value: "spotlight" },
              { label: "Floating",  value: "floating"  },
              { label: "Inline",    value: "inline"    },
            ]}
            onChange={(v) => setTweak("quickAddStyle", v)}
          />
          <TweakButton label="Trigger quick add (⌘N)" onClick={() => setQuickAddOpen(true)} />
        </TweakSection>

        <TweakSection label="Workspace">
          <TweakRadio
            label="Right pane"
            value={t.fullscreenVariant}
            options={[
              { label: "Detail",  value: "detail"  },
              { label: "Agenda",  value: "agenda"  },
              { label: "Split",   value: "split"   },
            ]}
            onChange={(v) => setTweak("fullscreenVariant", v)}
          />
          <TweakButton
            label={view === "fullscreen" ? "Exit workspace" : "Open workspace (⌘⇧F)"}
            onClick={() => setView(v => v === "fullscreen" ? "desktop" : "fullscreen")}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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