// Fullscreen 3-pane workspace
const { useState: fsS, useMemo: fsM, useEffect: fsE } = React;

const Sidebar = ({ projects, activeProject, setActiveProject, smartLists, tasks, accent }) => {
  const counts = fsM(() => {
    const c = {};
    projects.forEach(p => { c[p.id] = tasks.filter(t => t.project === p.id && !t.completed).length; });
    c.today    = tasks.filter(t => !t.completed && window.TaskifyUI.dayDiff(t.due) <= 0).length;
    c.upcoming = tasks.filter(t => !t.completed && window.TaskifyUI.dayDiff(t.due) > 0).length;
    c.inbox    = tasks.filter(t => t.project === "inbox" && !t.completed).length;
    c.all      = tasks.filter(t => !t.completed).length;
    return c;
  }, [projects, tasks]);

  const SmartItem = ({ id, label, icon, count, color }) => (
    <button
      className={"side-item" + (activeProject === id ? " active" : "")}
      onClick={() => setActiveProject(id)}
      style={activeProject === id ? { background: `color-mix(in oklch, ${accent} 20%, transparent)` } : null}
    >
      <Icon name={icon} size={15} color={color || "var(--gray-2)"} />
      <span className="side-label">{label}</span>
      {count != null && <span className="side-count">{count}</span>}
    </button>
  );

  return (
    <aside className="fs-sidebar">
      <div className="sidebar-glass" />

      <div className="side-header">
        <span className="taskify-glyph" style={{ background: accent, width: 18, height: 18 }}>
          <span className="taskify-glyph-tick" />
        </span>
        <span className="side-brand">Taskify</span>
        <div className="side-header-actions">
          <button className="iconbtn small"><Icon name="bell" size={13} /></button>
          <button className="iconbtn small"><Icon name="settings" size={13} /></button>
        </div>
      </div>

      <div className="side-section">
        <SmartItem id="today"    label="Today"     icon="circleDot" count={counts.today}    color={accent} />
        <SmartItem id="upcoming" label="Upcoming"  icon="calendar"  count={counts.upcoming} />
        <SmartItem id="inbox"    label="Inbox"     icon="inbox"     count={counts.inbox} />
        <SmartItem id="all"      label="Anytime"   icon="tray"      count={counts.all} />
      </div>

      <div className="side-section">
        <div className="side-section-title">
          <span>Projects</span>
          <button className="iconbtn small"><Icon name="plus" size={12} /></button>
        </div>
        {projects.filter(p => p.id !== "inbox").map(p => (
          <button
            key={p.id}
            className={"side-item" + (activeProject === p.id ? " active" : "")}
            onClick={() => setActiveProject(p.id)}
            style={activeProject === p.id ? { background: `color-mix(in oklch, ${accent} 20%, transparent)` } : null}
          >
            <ProjectDot project={p} size={10} />
            <span className="side-label">{p.name}</span>
            <span className="side-count">{counts[p.id]}</span>
          </button>
        ))}
      </div>

      <div className="side-section">
        <div className="side-section-title">
          <span>Calendars</span>
          <button className="iconbtn small"><Icon name="plus" size={12} /></button>
        </div>
        <div className="cal-source">
          <Icon name="google" size={14} />
          <span>Google · martin@</span>
          <span className="cal-status online" />
        </div>
        <div className="cal-source">
          <Icon name="apple" size={14} color="var(--fg)" />
          <span>iCloud · Personal</span>
          <span className="cal-status online" />
        </div>
        <div className="cal-source">
          <Icon name="outlook" size={14} color="#0078D4" />
          <span>Outlook · Work</span>
          <span className="cal-status online" />
        </div>
      </div>
    </aside>
  );
};

const TaskList = ({ tasks, projects, activeProject, selected, setSelected, onToggle, onQuickAdd, accent }) => {
  const filtered = fsM(() => {
    let f;
    if (activeProject === "today")    f = tasks.filter(t => !t.completed && window.TaskifyUI.dayDiff(t.due) <= 0);
    else if (activeProject === "upcoming") f = tasks.filter(t => !t.completed && window.TaskifyUI.dayDiff(t.due) > 0);
    else if (activeProject === "all") f = tasks;
    else if (activeProject === "inbox") f = tasks.filter(t => t.project === "inbox");
    else f = tasks.filter(t => t.project === activeProject);
    return f.sort((a, b) => Number(a.completed) - Number(b.completed) || new Date(a.due) - new Date(b.due));
  }, [tasks, activeProject]);

  const projectMap = fsM(() => Object.fromEntries(projects.map(p => [p.id, p])), [projects]);
  const projectObj = projects.find(p => p.id === activeProject);
  const title = projectObj?.name || ({
    today: "Today", upcoming: "Upcoming", all: "Anytime", inbox: "Inbox"
  }[activeProject]);

  // Group by date when in time-based views
  const isTimeView = activeProject === "today" || activeProject === "upcoming" || activeProject === "all";
  let groups;
  if (isTimeView) {
    groups = {};
    filtered.forEach(t => {
      const k = t.completed ? "Completed" : window.TaskifyUI.relDay(t.due);
      (groups[k] = groups[k] || []).push(t);
    });
  }

  return (
    <section className="fs-list">
      <header className="list-header">
        <div className="list-title-row">
          <h1>{title}</h1>
          {activeProject === "today" && (
            <span className="list-date">{window.TaskifyUI.fmtDateLong(window.TaskifyUI.TODAY_DATE.toISOString())}</span>
          )}
        </div>
        <div className="list-actions">
          <button className="pillbtn"><Icon name="arrowUp" size={11} /> Sort</button>
          <button className="pillbtn"><Icon name="tag" size={11} /> Filter</button>
          <button className="pillbtn primary" style={{ background: accent }} onClick={onQuickAdd}>
            <Icon name="plus" size={12} color="white" /> New task <Kbd light>⌘N</Kbd>
          </button>
        </div>
      </header>

      <div className="list-body">
        {!isTimeView ? (
          filtered.map(t => (
            <FullRow key={t.id} task={t} project={projectMap[t.project]}
              selected={selected === t.id}
              onSelect={() => setSelected(t.id)}
              onToggle={() => onToggle(t.id)} />
          ))
        ) : (
          Object.entries(groups).map(([label, items]) => (
            <React.Fragment key={label}>
              <div className="group-header">
                <span>{label}</span>
                <span className="group-count">{items.length}</span>
              </div>
              {items.map(t => (
                <FullRow key={t.id} task={t} project={projectMap[t.project]}
                  selected={selected === t.id}
                  onSelect={() => setSelected(t.id)}
                  onToggle={() => onToggle(t.id)} />
              ))}
            </React.Fragment>
          ))
        )}
        {filtered.length === 0 && (
          <div className="empty-state">
            <div className="empty-illus"><Icon name="check" size={28} color="var(--accent)" /></div>
            <div className="empty-title">Nothing here</div>
            <div className="empty-sub">Add a task with <Kbd>⌘N</Kbd></div>
          </div>
        )}
      </div>
    </section>
  );
};

const FullRow = ({ task, project, selected, onSelect, onToggle }) => {
  const { TaskCheck, ProjectDot, fmtTime, relDay } = window.TaskifyUI;
  return (
    <div
      className={"full-row" + (selected ? " selected" : "") + (task.completed ? " completed" : "")}
      onClick={onSelect}
    >
      <TaskCheck done={task.completed} priority={task.priority} onClick={(e) => { e.stopPropagation(); onToggle(); }} />
      <div className="full-row-body">
        <div className="full-row-title">
          {task.title}
          {task.priority === "high" && <Icon name="flag" size={11} color="var(--red)" style={{ marginLeft: 6 }} />}
        </div>
        {task.notes && <div className="full-row-notes">{task.notes}</div>}
        <div className="full-row-meta">
          <span className="meta-project"><ProjectDot project={project} /> {project.name}</span>
          <span className="meta-due"><Icon name="clock" size={11} /> {relDay(task.due)} · {fmtTime(task.due)}</span>
          {task.estimate && <span className="meta-est">{task.estimate}m</span>}
          {task.subtasks.length > 0 && <span className="meta-sub"><Icon name="check" size={11} /> {task.subtasks.filter(s => s.done).length}/{task.subtasks.length}</span>}
          {task.tags.map(t => <Tag key={t}>#{t}</Tag>)}
          {task.recurrence && <span className="meta-rec"><Icon name="repeat" size={11} /></span>}
        </div>
      </div>
    </div>
  );
};

const Detail = ({ task, project, projects, onToggle, onUpdate, onClose }) => {
  if (!task) {
    return (
      <section className="fs-detail empty">
        <div className="detail-glass" />
        <div className="empty-state">
          <div className="empty-illus large"><Icon name="circleDot" size={36} color="var(--gray-2)" /></div>
          <div className="empty-title">Select a task</div>
          <div className="empty-sub">Or press <Kbd>⌘</Kbd><Kbd>N</Kbd> to make one</div>
        </div>
      </section>
    );
  }

  return (
    <section className="fs-detail">
      <div className="detail-glass" />

      <header className="detail-header">
        <div className="detail-breadcrumb">
          <ProjectDot project={project} />
          <span>{project.name}</span>
        </div>
        <div className="detail-actions">
          <button className="iconbtn small"><Icon name="bell" size={13} /></button>
          <button className="iconbtn small"><Icon name="paperclip" size={13} /></button>
          <button className="iconbtn small" onClick={onClose}><Icon name="x" size={13} /></button>
        </div>
      </header>

      <div className="detail-body">
        <div className="detail-title-row">
          <TaskCheck done={task.completed} priority={task.priority} onClick={() => onToggle(task.id)} size={22} />
          <h2 className={task.completed ? "strike" : ""}>{task.title}</h2>
        </div>

        <div className="detail-fields">
          <div className="field">
            <label>Due</label>
            <button className="field-btn">
              <Icon name="clock" size={12} />
              {window.TaskifyUI.relDay(task.due)} · {window.TaskifyUI.fmtTime(task.due)}
            </button>
          </div>
          <div className="field">
            <label>Project</label>
            <button className="field-btn">
              <ProjectDot project={project} />
              {project.name}
            </button>
          </div>
          <div className="field">
            <label>Priority</label>
            <button className="field-btn">
              <Icon name="flag" size={12} color={window.TaskifyUI.priorityColor(task.priority)} />
              {task.priority[0].toUpperCase() + task.priority.slice(1)}
            </button>
          </div>
          <div className="field">
            <label>Estimate</label>
            <button className="field-btn">
              <Icon name="clock" size={12} />
              {task.estimate}m
            </button>
          </div>
          {task.recurrence && (
            <div className="field">
              <label>Repeats</label>
              <button className="field-btn">
                <Icon name="repeat" size={12} />
                {task.recurrence.every === "day"  && "Every day"}
                {task.recurrence.every === "week" && "Weekly"}
                {task.recurrence.every === "month"&& "Monthly"}
              </button>
            </div>
          )}
        </div>

        {task.tags.length > 0 && (
          <div className="detail-tags">
            {task.tags.map(t => <Tag key={t}>#{t}</Tag>)}
            <button className="add-tag"><Icon name="plus" size={10} /> Tag</button>
          </div>
        )}

        {task.notes && (
          <div className="detail-section">
            <div className="section-title">Notes</div>
            <p className="detail-notes">{task.notes}</p>
          </div>
        )}

        {task.subtasks.length > 0 && (
          <div className="detail-section">
            <div className="section-title">
              <span>Subtasks</span>
              <span className="section-count">{task.subtasks.filter(s => s.done).length}/{task.subtasks.length}</span>
            </div>
            <div className="subtask-list">
              {task.subtasks.map(s => (
                <label key={s.id} className={"subtask" + (s.done ? " done" : "")}>
                  <span className="subtask-box">
                    {s.done && <Icon name="check" size={9} color="white" strokeWidth={2.6} />}
                  </span>
                  <span>{s.title}</span>
                </label>
              ))}
              <button className="add-sub"><Icon name="plus" size={11} /> Add subtask</button>
            </div>
          </div>
        )}

        {task.links.length > 0 && (
          <div className="detail-section">
            <div className="section-title">Links</div>
            <div className="link-list">
              {task.links.map((l, i) => (
                <a key={i} className="link-row" href={l.url} onClick={(e) => e.preventDefault()}>
                  <Icon name="link" size={11} />
                  {l.label}
                </a>
              ))}
            </div>
          </div>
        )}

        <div className="detail-footer">
          <span>Created Mon May 11</span>
          <span>·</span>
          <span>Last edited 2h ago</span>
        </div>
      </div>
    </section>
  );
};

const TodayPeek = ({ events, tasks, projects, accent }) => {
  const projectMap = fsM(() => Object.fromEntries(projects.map(p => [p.id, p])), [projects]);
  const todayEvents = events.filter(e => window.TaskifyUI.sameDay(e.start, window.TaskifyUI.TODAY_DATE));
  const todayTasks  = tasks.filter(t => !t.completed && window.TaskifyUI.dayDiff(t.due) === 0);

  const startHour = 8, endHour = 20;
  const hours = endHour - startHour;
  const HOUR_PX = 36;
  const nowMin = (window.TaskifyUI.TODAY_DATE.getHours() - startHour) * 60 + window.TaskifyUI.TODAY_DATE.getMinutes();

  return (
    <aside className="fs-peek">
      <div className="peek-glass" />
      <header className="peek-header">
        <div>
          <div className="peek-title">Today</div>
          <div className="peek-sub">{todayEvents.length} events · {todayTasks.length} tasks</div>
        </div>
        <div className="peek-sources">
          <Icon name="google" size={13} />
          <Icon name="apple" size={13} color="var(--fg)" />
          <Icon name="outlook" size={13} color="#0078D4" />
        </div>
      </header>
      <div className="peek-timeline" style={{ height: hours * HOUR_PX }}>
        <div className="peek-hours">
          {Array.from({ length: hours + 1 }, (_, i) => (
            <div key={i} className="peek-hour" style={{ top: i * HOUR_PX }}>
              {((startHour + i) % 12 || 12)}{(startHour + i) >= 12 ? "p" : "a"}
            </div>
          ))}
        </div>
        <div className="peek-grid">
          {Array.from({ length: hours }, (_, i) => (
            <div key={i} className="peek-grid-row" style={{ top: i * HOUR_PX }} />
          ))}
          {nowMin >= 0 && nowMin <= hours * 60 && (
            <div className="peek-now" style={{ top: nowMin * (HOUR_PX/60) }}>
              <span className="peek-now-dot" />
            </div>
          )}
          {todayEvents.map(e => {
            const start = new Date(e.start), end = new Date(e.end);
            const top = ((start.getHours() - startHour) * 60 + start.getMinutes()) * (HOUR_PX/60);
            const h = Math.max(28, ((end - start) / 60000) * (HOUR_PX/60));
            return (
              <div key={e.id} className="peek-event" style={{
                top, height: h,
                background: `linear-gradient(180deg, ${e.color}38, ${e.color}26)`,
                borderLeft: `2.5px solid ${e.color}`,
              }}>
                <div className="peek-event-title">{e.title}</div>
                <div className="peek-event-meta">
                  <Icon name={e.source} size={9} color={e.color} />
                  {window.TaskifyUI.fmtTimeShort(e.start)} · {e.location}
                </div>
              </div>
            );
          })}
          {todayTasks.map(t => {
            const start = new Date(t.due);
            const top = ((start.getHours() - startHour) * 60 + start.getMinutes()) * (HOUR_PX/60);
            const p = projectMap[t.project];
            return (
              <div key={t.id} className="peek-task" style={{ top }}>
                <span className="peek-task-dot" style={{ background: window.TaskifyUI.projectColor(p.hue, 65) }} />
                <span className="peek-task-title">{t.title}</span>
                <span className="peek-task-time">{window.TaskifyUI.fmtTimeShort(t.due)}</span>
              </div>
            );
          })}
        </div>
      </div>
    </aside>
  );
};

const Fullscreen = ({
  tasks, projects, events,
  activeProject, setActiveProject,
  selected, setSelected,
  onToggle, onUpdate, onQuickAdd,
  variant, accent,
}) => {
  const selectedTask = tasks.find(t => t.id === selected);
  const projectMap = fsM(() => Object.fromEntries(projects.map(p => [p.id, p])), [projects]);
  const projectObj = selectedTask ? projectMap[selectedTask.project] : null;

  return (
    <div className={"fullscreen variant-" + variant}>
      <Sidebar projects={projects} tasks={tasks}
        activeProject={activeProject} setActiveProject={setActiveProject}
        accent={accent} />
      <TaskList tasks={tasks} projects={projects}
        activeProject={activeProject}
        selected={selected} setSelected={setSelected}
        onToggle={onToggle} onQuickAdd={onQuickAdd}
        accent={accent} />
      {variant === "detail" && (
        <Detail task={selectedTask} project={projectObj} projects={projects}
          onToggle={onToggle} onUpdate={onUpdate}
          onClose={() => setSelected(null)} />
      )}
      {variant === "agenda" && (
        <TodayPeek events={events} tasks={tasks} projects={projects} accent={accent} />
      )}
      {variant === "split" && (
        <div className="fs-split">
          <Detail task={selectedTask} project={projectObj} projects={projects}
            onToggle={onToggle} onUpdate={onUpdate}
            onClose={() => setSelected(null)} />
          <TodayPeek events={events} tasks={tasks} projects={projects} accent={accent} />
        </div>
      )}
    </div>
  );
};

window.Fullscreen = Fullscreen;