// today.jsx — головна сторінка «На сьогодні»

function TodayPage({ tasks, onOpenTask, onToggle }) {
  const today = window.TODAY.day;
  const weekDays = window.WEEK_DAYS;
  const objects = window.DATA.OBJECTS;

  // Задачі «сьогодні» — це задачі сьогоднішнього дня + усе прострочене (тягне увагу).
  const todayTasks = tasks.filter(t => t.day === today || t.status === "late");

  // Задачі тижня — все інше у тижні (без сьогоднішніх і прострочених).
  const weekTasks = tasks
    .filter(t => t.day !== today && t.status !== "late")
    .sort((a, b) => a.day.localeCompare(b.day));

  // KPI
  const liveCount = todayTasks.filter(t => t.status === "live").length;
  const lateCount = tasks.filter(t => t.status === "late").length;
  const doneCount = todayTasks.filter(t => t.status === "done").length;
  const totalToday = todayTasks.length;
  const weekActive = tasks.filter(t => t.status !== "done").length;

  // Сортування: late → live → todo → done
  const order = { late: 0, live: 1, todo: 2, done: 3 };
  const sortedToday = [...todayTasks].sort((a, b) => order[a.status] - order[b.status]);

  // Активні об'єкти
  const activeObjects = objects.filter(o => o.progress < 100).slice(0, 4);

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">На сьогодні</h1>
        <div className="page-sub">
          <span>{totalToday} {plural(totalToday, "задача", "задачі", "задач")}</span>
          {lateCount > 0 && <>
            <span className="dot"></span>
            <span style={{color: "var(--late)"}}>{lateCount} {plural(lateCount, "прострочена", "прострочені", "прострочених")}</span>
          </>}
          {liveCount > 0 && <>
            <span className="dot"></span>
            <span>{liveCount} у роботі</span>
          </>}
        </div>
      </div>

      {/* KPI */}
      <div className="kpi-row">
        <div className="kpi">
          <div className="kpi-label">До виконання</div>
          <div className="kpi-value">{totalToday - doneCount}</div>
          <div className="kpi-sub">{doneCount} виконано · {totalToday} всього</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">У роботі зараз</div>
          <div className="kpi-value">{liveCount}</div>
          <div className="kpi-sub">{liveCount > 0 ? "відкрити трекер" : "немає активних"}</div>
        </div>
        <div className={`kpi ${lateCount > 0 ? "is-warn" : ""}`}>
          <div className="kpi-label">Прострочено</div>
          <div className="kpi-value">{lateCount}</div>
          <div className="kpi-sub">{lateCount > 0 ? "потребує уваги" : "усе вчасно"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Цей тиждень</div>
          <div className="kpi-value">{weekActive}</div>
          <div className="kpi-sub">{tasks.filter(t => t.status === "done").length} виконано</div>
        </div>
      </div>

      {/* СЬОГОДНІ */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Сьогодні</h2>
          <span className="section-sub">{totalToday} {plural(totalToday, "задача", "задачі", "задач")}</span>
          <a className="section-action" href="#">Усі задачі →</a>
        </div>
        <div className="task-list">
          {sortedToday.length > 0
            ? sortedToday.map(t => (
                <TaskRow key={t.id} task={t} onOpen={onOpenTask} onToggle={onToggle} dateLabel={dateLabel(t.day, today, true)} />
              ))
            : <div className="empty">На сьогодні задач немає.</div>
          }
        </div>
      </section>

      {/* НА ЦЬОМУ ТИЖНІ — плоский перелік з датою справа */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Найближчі дні</h2>
          <span className="section-sub">{weekTasks.length} {plural(weekTasks.length, "задача", "задачі", "задач")} · до 29 травня</span>
          <a className="section-action" href="#">Розклад →</a>
        </div>
        <div className="task-list">
          {weekTasks.length > 0
            ? weekTasks.map(t => (
                <TaskRow key={t.id} task={t} onOpen={onOpenTask} onToggle={onToggle} dateLabel={dateLabel(t.day, today, false)} />
              ))
            : <div className="empty">На цьому тижні задач немає.</div>
          }
        </div>
      </section>

      {/* ОБ'ЄКТИ */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Об'єкти у роботі</h2>
          <span className="section-sub">{activeObjects.length}</span>
          <a className="section-action" href="#">Усі об'єкти →</a>
        </div>
        <div className="obj-list">
          {activeObjects.map(o => (
            <div key={o.id} className="obj-row">
              <div className="obj-code">{o.code}</div>
              <div>
                <div className="obj-name">{o.name}</div>
                <div className="obj-client">{o.client} · {o.address}</div>
              </div>
              <div className="obj-stage">
                <div>{o.stageShort} · {o.grade}</div>
                <div className="obj-stage-val">Дедлайн {o.deadline}</div>
              </div>
              <div className="progress">
                <div className="progress-bar">
                  <div className="progress-fill" style={{ width: o.progress + "%" }}></div>
                </div>
                <div className="progress-meta">
                  <span>{o.revision}</span>
                  <span>{o.progress}%</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

// dateLabel: повертає короткий ярлик дати для рядка задачі
//  - hideForToday: коли true, для today повертає null (бо й так в секції «Сьогодні»)
function dateLabel(day, today, hideForToday) {
  if (day === today) return hideForToday ? null : "Сьогодні";
  const d = parseInt(day, 10);
  const t = parseInt(today, 10);
  const delta = d - t;
  const dayMap = { "25": "пн", "26": "вт", "27": "ср", "28": "чт", "29": "пт" };
  const short = dayMap[day] || "";
  if (delta === -1) return `Вчора · ${day} трв`;
  if (delta === 1) return `Завтра · ${day} трв`;
  if (delta < 0) return `${day} трв · ${Math.abs(delta)} д. тому`;
  return `${short ? short + " · " : ""}${day} трв`;
}

function plural(n, one, few, many) {
  const m10 = n % 10;
  const m100 = n % 100;
  if (m10 === 1 && m100 !== 11) return one;
  if (m10 >= 2 && m10 <= 4 && (m100 < 12 || m100 > 14)) return few;
  return many;
}

window.TodayPage = TodayPage;
window.plural = plural;
window.dateLabel = dateLabel;