// Dropdown panel — menu bar drop-down for Taskify
const { useState: ddS, useEffect: ddE, useMemo: ddM, useRef: ddR } = React;

const TaskRow = ({ task, project, focused, onFocus, onToggle, onOpen, dense }) => {
  const { TaskCheck, ProjectDot, fmtTimeShort, relDay } = window.TaskifyUI;
  const overdue = !task.completed && new Date(task.due) < window.TaskifyUI.TODAY_DATE;
  const dueLabel = task.due ? `${relDay(task.due)} · ${fmtTimeShort(task.due)}` : null;
  return (
    <div
      className={"task-row" + (focused ? " focused" : "") + (task.completed ? " completed" : "") + (dense ? " dense" : "")}
      onMouseEnter={onFocus}
      onClick={onOpen}
    >
      <TaskCheck
        done={task.completed}
        priority={task.priority}
        onClick={(e) => { e.stopPropagation(); onToggle(); }}
      />
      <div className="task-row-body">
        <div className="task-row-title">{task.title}</div>
        <div className="task-row-meta">
          <span className="meta-project">
            <ProjectDot project={project} />
            <span>{project.name}</span>
          </span>
          {dueLabel && (
            <span className={"meta-due" + (overdue ? " overdue" : "")}>
              <Icon name="clock" size={11} />
              {dueLabel}
            </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.recurrence && <Icon name="repeat" size={11} color="var(--gray-2)" />}
        </div>
      </div>
      {focused && (
        <div className="task-row-keys">
          <Kbd>↵</Kbd>
        </div>
      )}
    </div>
  );
};

const TabBar = ({ tab, setTab, counts }) => {
  const tabs = [
    { id: "today",    label: "Today",    icon: "circleDot",  badge: counts.today },
    { id: "upcoming", label: "Upcoming", icon: "arrowRight", badge: counts.upcoming },
    { id: "calendar", label: "Calendar", icon: "calendar",   badge: null },
  ];
  return (
    <div className="tabbar">
      {tabs.map(t => (
        <button
          key={t.id}
          className={"tab" + (tab === t.id ? " active" : "")}
          onClick={() => setTab(t.id)}
        >
          <span>{t.label}</span>
          {t.badge != null && <span className="tab-badge">{t.badge}</span>}
        </button>
      ))}
    </div>
  );
};

const TodayTab = ({ tasks, projects, focusIdx, setFocusIdx, onToggle, onOpen, dense }) => {
  const projectMap = ddM(() => Object.fromEntries(projects.map(p => [p.id, p])), [projects]);
  const overdueOrToday = tasks.filter(t => {
    if (t.completed) return false;
    const dd = window.TaskifyUI.dayDiff(t.due);
    return dd <= 0;
  }).sort((a, b) => new Date(a.due) - new Date(b.due));
  const completedToday = tasks.filter(t => t.completed && window.TaskifyUI.dayDiff(t.due) === 0);

  if (overdueOrToday.length === 0 && completedToday.length === 0) {
    return (
      <div className="empty-state">
        <div className="empty-illus">
          <Icon name="check" size={32} color="var(--accent)" strokeWidth={2.2} />
        </div>
        <div className="empty-title">All clear for today</div>
        <div className="empty-sub">Press <Kbd>⌘</Kbd><Kbd>N</Kbd> to add the next thing</div>
      </div>
    );
  }

  return (
    <div className="tab-body">
      <div className="section-label">
        <span>Today · {window.TaskifyUI.fmtDateLong(new Date().toISOString())}</span>
        <span className="section-count">{overdueOrToday.length}</span>
      </div>
      {overdueOrToday.map((t, i) => (
        <TaskRow
          key={t.id} task={t} project={projectMap[t.project]}
          focused={focusIdx === i}
          onFocus={() => setFocusIdx(i)}
          onToggle={() => onToggle(t.id)}
          onOpen={() => onOpen(t.id)}
          dense={dense}
        />
      ))}
      {completedToday.length > 0 && (
        <>
          <div className="section-label muted">
            <span>Completed</span>
            <span className="section-count">{completedToday.length}</span>
          </div>
          {completedToday.map((t, i) => (
            <TaskRow
              key={t.id} task={t} project={projectMap[t.project]}
              focused={false}
              onFocus={() => {}}
              onToggle={() => onToggle(t.id)}
              onOpen={() => onOpen(t.id)}
              dense={dense}
            />
          ))}
        </>
      )}
    </div>
  );
};

const UpcomingTab = ({ tasks, projects, onToggle, onOpen, dense }) => {
  const projectMap = ddM(() => Object.fromEntries(projects.map(p => [p.id, p])), [projects]);
  const upcoming = tasks
    .filter(t => !t.completed && window.TaskifyUI.dayDiff(t.due) > 0)
    .sort((a, b) => new Date(a.due) - new Date(b.due));
  // Group by day offset
  const groups = {};
  upcoming.forEach(t => {
    const k = window.TaskifyUI.relDay(t.due);
    (groups[k] = groups[k] || []).push(t);
  });
  return (
    <div className="tab-body">
      {Object.entries(groups).map(([label, items]) => (
        <React.Fragment key={label}>
          <div className="section-label">
            <span>{label}</span>
            <span className="section-count">{items.length}</span>
          </div>
          {items.map(t => (
            <TaskRow
              key={t.id} task={t} project={projectMap[t.project]}
              focused={false}
              onFocus={() => {}}
              onToggle={() => onToggle(t.id)}
              onOpen={() => onOpen(t.id)}
              dense={dense}
            />
          ))}
        </React.Fragment>
      ))}
    </div>
  );
};

const CalendarTab = ({ events, tasks, projects }) => {
  const projectMap = ddM(() => 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);

  // Build timeline 7am — 9pm
  const startHour = 7, endHour = 21;
  const hours = endHour - startHour;
  const nowMin = (window.TaskifyUI.TODAY_DATE.getHours() - startHour) * 60 + window.TaskifyUI.TODAY_DATE.getMinutes();

  // Items with positions
  const items = [
    ...todayEvents.map(e => {
      const start = new Date(e.start), end = new Date(e.end);
      const top = ((start.getHours() - startHour) * 60 + start.getMinutes());
      const height = (end - start) / 60000;
      return { kind: "event", item: e, top, height };
    }),
    ...todayTasks.map(t => {
      const start = new Date(t.due);
      const top = ((start.getHours() - startHour) * 60 + start.getMinutes());
      return { kind: "task", item: t, top, height: 22 };
    }),
  ];

  return (
    <div className="tab-body cal-tab">
      <div className="cal-headline">
        <div>
          <div className="cal-date">{window.TaskifyUI.fmtDateLong(window.TaskifyUI.TODAY_DATE.toISOString())}</div>
          <div className="cal-sub">{todayEvents.length} events · {todayTasks.length} tasks</div>
        </div>
        <div className="cal-sources">
          <Icon name="google"  size={14} />
          <Icon name="apple"   size={14} color="var(--fg)" />
          <Icon name="outlook" size={14} color="#0078D4" />
        </div>
      </div>
      <div className="cal-timeline" style={{ height: hours * 28 }}>
        <div className="cal-hours">
          {Array.from({ length: hours + 1 }, (_, i) => (
            <div key={i} className="cal-hour" style={{ top: i * 60 * (28/60) }}>
              {((startHour + i) % 12 || 12)} {(startHour + i) >= 12 ? "PM" : "AM"}
            </div>
          ))}
        </div>
        <div className="cal-grid">
          {Array.from({ length: hours }, (_, i) => (
            <div key={i} className="cal-grid-row" style={{ top: i * 60 * (28/60) }} />
          ))}
          {/* Now line */}
          {nowMin >= 0 && nowMin <= hours * 60 && (
            <div className="cal-now" style={{ top: nowMin * (28/60) }}>
              <span className="cal-now-dot" />
            </div>
          )}
          {items.map((it, i) => {
            if (it.kind === "event") {
              const e = it.item;
              return (
                <div
                  key={"e" + e.id}
                  className="cal-event"
                  style={{
                    top: it.top * (28/60),
                    height: Math.max(20, it.height * (28/60)),
                    background: `linear-gradient(180deg, ${e.color}33, ${e.color}22)`,
                    borderLeft: `2.5px solid ${e.color}`,
                  }}
                >
                  <div className="cal-event-title">{e.title}</div>
                  <div className="cal-event-meta">
                    <Icon name={e.source} size={10} color={e.color} />
                    {window.TaskifyUI.fmtTimeShort(e.start)} – {window.TaskifyUI.fmtTimeShort(e.end)}
                  </div>
                </div>
              );
            } else {
              const t = it.item;
              const p = projectMap[t.project];
              return (
                <div
                  key={"t" + t.id}
                  className="cal-task"
                  style={{ top: it.top * (28/60) }}
                >
                  <span className="cal-task-dot" style={{ background: window.TaskifyUI.projectColor(p.hue, 65) }} />
                  <span className="cal-task-title">{t.title}</span>
                  <span className="cal-task-time">{window.TaskifyUI.fmtTimeShort(t.due)}</span>
                </div>
              );
            }
          })}
        </div>
      </div>
    </div>
  );
};

const Dropdown = ({
  tasks, projects, events, tab, setTab, focusIdx, setFocusIdx,
  onToggle, onOpen, onQuickAdd, onFullscreen, onClose,
  width, dense, showCalendar,
}) => {
  const { Kbd } = window.TaskifyUI;
  const todayCount   = tasks.filter(t => !t.completed && window.TaskifyUI.dayDiff(t.due) <= 0).length;
  const upcomingCount = tasks.filter(t => !t.completed && window.TaskifyUI.dayDiff(t.due) > 0).length;

  return (
    <div
      className={"dropdown" + (dense ? " dense" : "")}
      style={{ width }}
      onClick={(e) => e.stopPropagation()}
    >
      <div className="dropdown-glass" />

      {/* Header */}
      <div className="dd-header">
        <div className="dd-header-left">
          <span className="dd-brand">Taskify</span>
          <span className="dd-sub">{todayCount} due today</span>
        </div>
        <div className="dd-header-actions">
          <button className="iconbtn" onClick={onQuickAdd} title="Quick add (⌘N)">
            <Icon name="plus" size={14} />
          </button>
          <button className="iconbtn" onClick={onFullscreen} title="Open workspace (⌘⇧F)">
            <Icon name="expand" size={13} />
          </button>
          <button className="iconbtn" onClick={onClose} title="Close (Esc)">
            <Icon name="x" size={13} />
          </button>
        </div>
      </div>

      {/* Search */}
      <div className="dd-search">
        <Icon name="search" size={13} color="var(--gray-2)" />
        <input placeholder="Search tasks, projects, tags…" />
        <Kbd>⌘</Kbd><Kbd>K</Kbd>
      </div>

      {/* Tabs */}
      {showCalendar ? (
        <TabBar tab={tab} setTab={setTab} counts={{ today: todayCount, upcoming: upcomingCount }} />
      ) : (
        <TabBar tab={tab === "calendar" ? "today" : tab} setTab={setTab} counts={{ today: todayCount, upcoming: upcomingCount }} />
      )}

      {/* Body */}
      <div className="dd-body">
        {tab === "today" && (
          <TodayTab tasks={tasks} projects={projects}
            focusIdx={focusIdx} setFocusIdx={setFocusIdx}
            onToggle={onToggle} onOpen={onOpen} dense={dense} />
        )}
        {tab === "upcoming" && (
          <UpcomingTab tasks={tasks} projects={projects}
            onToggle={onToggle} onOpen={onOpen} dense={dense} />
        )}
        {tab === "calendar" && showCalendar && (
          <CalendarTab events={events} tasks={tasks} projects={projects} />
        )}
      </div>

      {/* Footer hints */}
      <div className="dd-footer">
        <span className="hint"><Kbd>↑</Kbd><Kbd>↓</Kbd> navigate</span>
        <span className="hint"><Kbd>↵</Kbd> open</span>
        <span className="hint"><Kbd>␣</Kbd> complete</span>
        <span className="hint right"><Kbd>⌘</Kbd><Kbd>?</Kbd> shortcuts</span>
      </div>
    </div>
  );
};

window.Dropdown = Dropdown;