// web/screens/archive.jsx — экран «Архив» серий.
// Реальные серии с archivedAt != null, фильтры по типу/году/поиску,
// группировка по месяцу, модал подтверждения удаления.

const MONTHS_RU = ["январь", "февраль", "март", "апрель", "май", "июнь",
                   "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь"];

function ArchiveScreen({ setRoute }) {
  const [archiveState, reload] = useAsync(() => api.feed.shoots("true"), []);
  const [confirmDelete, setConfirmDelete] = React.useState(null);
  const [query, setQuery] = React.useState("");
  const [kindFilter, setKindFilter] = React.useState("all");
  const [sortBy, setSortBy] = React.useState("date-desc");
  const [_, toast] = useToasts();

  const all = archiveState.data || [];
  const totalPhotos = all.reduce((n, s) => n + (s.Photos || 0), 0);

  const byKind = (s) => {
    if (kindFilter === "all") return true;
    if (kindFilter === "editorial") return s.IsEditorial;
    return s.ContentType === kindFilter;
  };
  const byQuery = (s) => {
    if (!query.trim()) return true;
    const q = query.trim().toLowerCase();
    return ((s.Title || "") + " " + (s.ID || "")).toLowerCase().includes(q);
  };
  const sortFn = (a, b) => {
    if (sortBy === "date-desc") return a.ArchivedAt < b.ArchivedAt ? 1 : -1;
    if (sortBy === "date-asc")  return a.ArchivedAt > b.ArchivedAt ? 1 : -1;
    if (sortBy === "count")     return (b.Photos || 0) - (a.Photos || 0);
    return 0;
  };

  const filtered = all.filter(byKind).filter(byQuery).slice().sort(sortFn);

  // Группировка по месяцу архивации.
  const byMonth = {};
  for (const s of filtered) {
    const d = new Date(s.ArchivedAt || s.CreatedAt);
    const key = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0");
    if (!byMonth[key]) byMonth[key] = { label: MONTHS_RU[d.getMonth()] + " " + d.getFullYear(), items: [] };
    byMonth[key].items.push(s);
  }
  const monthsInOrder = Object.keys(byMonth).sort().reverse();

  const handleDelete = async (s) => {
    try {
      await api.feed.deleteShoot(s.ID);
      toast(`«${s.Title || s.ID}» удалено`, "info");
      setConfirmDelete(null);
      reload();
    } catch (e) {
      toast("Не удалось удалить: " + e.message, "error");
    }
  };

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Архив</h1>
          <div className="page-sub">
            {all.length} серий · {totalPhotos} файлов всего
          </div>
        </div>
        <div className="page-actions">
          <button className="btn" onClick={() => setRoute("shoots")}>← Мои съёмки</button>
        </div>
      </div>

      {/* Filter strip */}
      <div className="archive-filters" style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 14 }}>
        <input className="input" value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Поиск по серии…"
               style={{ flex: 1, maxWidth: 320, padding: "5px 10px", fontSize: 13 }}/>

        <div style={{ display: "flex", gap: 6 }}>
          {[
            { id: "all",       label: "Все" },
            { id: "photo",     label: "Фото",      icon: "image" },
            { id: "video",     label: "Видео",     icon: "film" },
            { id: "vector",    label: "Vector",    icon: "layers" },
            { id: "editorial", label: "Editorial", icon: "edit" },
          ].map((c) => (
            <button key={c.id} onClick={() => setKindFilter(c.id)}
                    className={"chip" + (kindFilter === c.id ? " active" : "")}>
              {c.icon && <Icon name={c.icon} size={12} stroke={1.8}/>}
              <span>{c.label}</span>
            </button>
          ))}
        </div>

        <div style={{ width: 1, height: 22, background: "var(--line)" }}/>
        <select value={sortBy} onChange={(e) => setSortBy(e.target.value)}
                className="input"
                style={{ padding: "5px 24px 5px 10px", fontSize: 12.5, cursor: "pointer" }}>
          <option value="date-desc">Новые сверху</option>
          <option value="date-asc">Старые сверху</option>
          <option value="count">По количеству фото</option>
        </select>
      </div>

      {archiveState.loading && (
        <div className="muted" style={{ padding: 24 }}><Spinner/> загружаем архив…</div>
      )}

      {!archiveState.loading && all.length === 0 && (
        <div style={{
          marginTop: 32, padding: "48px 24px", textAlign: "center",
          color: "var(--ink-3)", background: "var(--surface)",
          border: "1px dashed var(--line-2)", borderRadius: "var(--r-lg)",
        }}>
          <Icon name="archive" size={26} className="muted-2" style={{ marginBottom: 8 }}/>
          <div style={{ fontWeight: 500, fontSize: 14, color: "var(--ink-2)" }}>
            Архив пуст
          </div>
          <div style={{ marginTop: 4, fontSize: 12.5 }}>
            Готовые серии можно отправить в архив со страницы «Мои съёмки».
          </div>
        </div>
      )}

      {!archiveState.loading && all.length > 0 && filtered.length === 0 && (
        <div style={{
          marginTop: 32, padding: "48px 24px", textAlign: "center",
          color: "var(--ink-3)", background: "var(--surface)",
          border: "1px dashed var(--line-2)", borderRadius: "var(--r-lg)",
        }}>
          <Icon name="archive" size={26} className="muted-2" style={{ marginBottom: 8 }}/>
          <div style={{ fontWeight: 500, fontSize: 14, color: "var(--ink-2)" }}>
            Ничего не нашли
          </div>
          <div style={{ marginTop: 4, fontSize: 12.5 }}>
            Сбросьте фильтры или поищите по другому слову.
          </div>
        </div>
      )}

      {monthsInOrder.map((mk) => (
        <div key={mk} className="archive-month">
          <div className="archive-month-head">
            <span className="archive-month-title">{byMonth[mk].label}</span>
            <span className="archive-month-meta">
              {byMonth[mk].items.length} серий · {byMonth[mk].items.reduce((n, s) => n + (s.Photos || 0), 0)} файлов
            </span>
            <div style={{ flex: 1, height: 1, background: "var(--line)" }}/>
          </div>
          <div className="archive-grid">
            {byMonth[mk].items.map((s) => (
              <div key={s.ID} className="archive-card"
                   onClick={() => setRoute("series", s.ID)}
                   style={{ cursor: "pointer" }}>
                <div className="archive-card-thumb">
                  {s.Cover
                    ? <img src={"/v1/preview?photoID=" + (s.CoverPhotoID || 0) + "&path=" + encodeURIComponent(s.Cover) + "&size=M"}
                           alt={s.Title || ""} loading="lazy"
                           style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                    : <div className="archive-purged">
                        <Icon name="archive" size={20} className="muted-2"/>
                      </div>}
                  {s.ContentType !== "photo" && (
                    <span className={"archive-kind-flag " + s.ContentType}>
                      <Icon name={s.ContentType === "video" ? "film" : "layers"} size={9} stroke={2}/>
                      {s.ContentType === "video" ? "видео" : "vector"}
                    </span>
                  )}
                  {s.IsEditorial && (
                    <span className="archive-kind-flag editorial">
                      <Icon name="edit" size={9} stroke={2}/> editorial
                    </span>
                  )}
                </div>
                <div className="archive-card-body">
                  <div className="archive-card-title">{s.Title || `Серия ${s.ID}`}</div>
                  <div className="archive-card-sub">
                    <span className="mono">
                      {new Date(s.ArchivedAt || s.CreatedAt).toLocaleDateString("ru-RU", {
                        day: "2-digit", month: "short", year: "numeric",
                      })}
                    </span>
                    <span className="archive-sep">·</span>
                    <span>{s.Photos || 0} файлов</span>
                  </div>
                  <div className="archive-card-actions">
                    <button className="archive-restore"
                            title="Вернуть из архива (тексты/ключи целы; для перевыкладки CSV/EXIF)"
                            onClick={async (e) => {
                              e.stopPropagation();
                              try {
                                await api.shoot.Unarchive(s.ID);
                                toast("Серия «" + (s.Title || s.ID) + "» возвращена из архива → Готово", "info");
                                reload();
                              } catch (err) {
                                toast("Не удалось вернуть из архива: " + err.message, "error");
                              }
                            }}>
                      <Icon name="archive" size={10} stroke={2}/> Вернуть
                    </button>
                    <button className="archive-delete"
                            title="Удалить из архива насовсем"
                            onClick={(e) => { e.stopPropagation(); setConfirmDelete(s); }}>
                      <Icon name="x" size={10} stroke={2}/>
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}

      {all.length > 0 && (
        <div style={{
          marginTop: 18, padding: "10px 14px",
          background: "var(--surface-2)", border: "1px solid var(--line)",
          borderRadius: "var(--r-lg)",
          display: "flex", alignItems: "flex-start", gap: 10,
          fontSize: 12, color: "var(--ink-3)", lineHeight: 1.5,
        }}>
          <Icon name="alert" size={12} stroke={2} className="muted-2" style={{ marginTop: 2 }}/>
          <span>
            <b style={{ color: "var(--ink-2)" }}>Что хранится в архиве:</b> заголовки, описания,
            ключевые слова, анализ, CSV — навсегда.{" "}
            <b style={{ color: "var(--ink-2)" }}>Что чистится:</b> копии 512px удаляются через 30 дней
            после ухода серии в архив. Для переобработки сервис берёт исходник с Я.Диска.
          </span>
        </div>
      )}

      {confirmDelete && (
        <div className="modal-overlay" onClick={() => setConfirmDelete(null)}>
          <div className="modal-card" onClick={(e) => e.stopPropagation()}>
            <div className="modal-icon warn">
              <Icon name="x" size={20} stroke={1.8}/>
            </div>
            <h3 className="modal-title">Удалить серию насовсем?</h3>
            <div className="modal-sub">
              <div style={{ fontSize: 13.5, color: "var(--ink-2)", marginBottom: 8 }}>
                «{confirmDelete.Title || `Серия ${confirmDelete.ID}`}»
              </div>
              <div>
                Удалится <b>навсегда</b>: заголовки, описания, ключи, анализ, CSV — всё, что
                Pika сохранила про эту серию. Восстановить будет нельзя — только переобработать
                заново из <span className="mono">_Pikasrv/</span>, если исходники ещё там.
              </div>
            </div>
            <div className="modal-actions">
              <button className="btn" onClick={() => setConfirmDelete(null)}>
                Оставить как есть
              </button>
              <button className="btn btn-danger" onClick={() => handleDelete(confirmDelete)}>
                <Icon name="x" size={12} stroke={2}/> Удалить насовсем
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.ArchiveScreen = ArchiveScreen;