// Dashboard/Courses/CoursesList.jsx
function CoursesList({ onSelect }) {
  const [courses, setCourses] = React.useState([]);
  const [q, setQ] = React.useState("");
  const [loading, setLoading] = React.useState(true);
  const [selectedTag, setSelectedTag] = React.useState("");
  const [showAll, setShowAll] = React.useState(false);
  const [enrolledMap, setEnrolledMap] = React.useState(() => {
    try {
      const raw = localStorage.getItem("mta_enrolled_courses");
      return raw ? JSON.parse(raw) : {};
    } catch {
      return {};
    }
  });

  React.useEffect(() => {
    let mounted = true;
    fetch("Dashboard/Courses/courses.json")
      .then(r => r.json())
      .then(data => { if (mounted) setCourses(data); })
      .catch(err => { console.error("courses.json load error", err); if (mounted) setCourses([]); })
      .finally(() => { if (mounted) setLoading(false); });

    return () => { mounted = false; };
  }, []);

  React.useEffect(() => {
    try {
      localStorage.setItem("mta_enrolled_courses", JSON.stringify(enrolledMap));
    } catch {}
  }, [enrolledMap]);

  const allTags = React.useMemo(() => {
    const s = new Set();
    courses.forEach(c => (c.tags || []).forEach(t => s.add(t)));
    return Array.from(s).sort();
  }, [courses]);

  const filtered = React.useMemo(() => {
    // Если пользователь нажал "Показать все" — возвращаем все курсы
    if (showAll) return courses;

    const qq = q.trim().toLowerCase();
    return courses.filter(c => {
      if (selectedTag && !(c.tags || []).includes(selectedTag)) return false;
      if (!qq) return true;
      return (
        c.title.toLowerCase().includes(qq) ||
        (c.summary || "").toLowerCase().includes(qq) ||
        (c.tags || []).some(t => t.toLowerCase().includes(qq))
      );
    });
  }, [q, courses, selectedTag, showAll]);

  function toggleEnroll(id) {
    setEnrolledMap(prev => {
      const next = { ...prev };
      if (next[id]) delete next[id];
      else next[id] = { enrolledAt: Date.now(), progress: 0 };
      return next;
    });
  }

  function handleShowAll() {
    // Сбрасываем фильтры и включаем showAll на короткое время
    setQ("");
    setSelectedTag("");
    setShowAll(true);
    // Отключаем подсветку через 1.5 секунды (опционально)
    setTimeout(() => setShowAll(false), 1500);
    // Прокрутка к списку (опционально)
    const el = document.querySelector(".courses-list-block");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  }

  return (
    <div className="courses-list-block">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
        <h4 style={{ margin: 0 }}>Курсы</h4>

        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <input
            className="search-input"
            placeholder="Поиск по курсам..."
            value={q}
            onChange={(e) => { setQ(e.target.value); setShowAll(false); }}
            style={{ width: 220 }}
          />

          <select
            value={selectedTag}
            onChange={(e) => { setSelectedTag(e.target.value); setShowAll(false); }}
            style={{ padding: "6px 8px" }}
          >
            <option value="">Все теги</option>
            {allTags.map(t => <option key={t} value={t}>{t}</option>)}
          </select>

          <button className="btn ghost" onClick={() => { setQ(""); setSelectedTag(""); setShowAll(false); }}>
            Сброс
          </button>

          {/* Новая кнопка "Показать все" */}
          <button
            className="btn"
            onClick={handleShowAll}
            title="Показать все курсы"
            style={{ marginLeft: 6 }}
          >
            Показать все
          </button>
        </div>
      </div>

      {loading ? (
        <div className="muted">Загрузка курсов...</div>
      ) : (
        <div style={{
          display: "grid",
          gap: 12,
          transition: "background .2s ease",
          background: showAll ? "rgba(56,189,248,0.02)" : "transparent",
          padding: showAll ? "8px" : "0",
          borderRadius: showAll ? 8 : 0
        }}>
          {filtered.length === 0 && <div className="muted">Курсы не найдены</div>}
          {filtered.map(c => (
            <CourseCard
              key={c.id}
              course={c}
              onOpen={onSelect}
              onEnroll={toggleEnroll}
              enrolled={!!enrolledMap[c.id]}
            />
          ))}
        </div>
      )}
    </div>
  );
}