// Dashboard/Dashboard.jsx
function Dashboard() {
  const [profile, setProfile] = React.useState(() => {
    try {
      const raw = localStorage.getItem("mta_profile");
      return raw ? JSON.parse(raw) : null;
    } catch {
      return null;
    }
  });

  const [editing, setEditing] = React.useState(false);
  const [local, setLocal] = React.useState(profile ? { ...profile } : {});
  const [showCertificates, setShowCertificates] = React.useState(false);

  // Состояние для курсов
  const [openCourseId, setOpenCourseId] = React.useState(null);
  const [showCourses, setShowCourses] = React.useState(false); // <-- новый флаг

  // Пример данных
  const sampleProgress = React.useMemo(
    () => [
      { course: "Основы блокчейна в медицине", progress: 85 },
      { course: "Кардиология: практические навыки", progress: 40 },
      { course: "Этика и безопасность пациента", progress: 100 }
    ],
    []
  );

  const certificates = React.useMemo(
    () => [
      { id: 1, title: "Этика и безопасность пациента", date: "2026-03-12" },
      { id: 2, title: "Основы блокчейна в медицине", date: "2026-02-05" }
    ],
    []
  );

  // Синхронизация профиля
  React.useEffect(() => {
    const onStorage = () => {
      try {
        const raw = localStorage.getItem("mta_profile");
        setProfile(raw ? JSON.parse(raw) : null);
      } catch {
        setProfile(null);
      }
    };
    window.addEventListener("storage", onStorage);
    return () => window.removeEventListener("storage", onStorage);
  }, []);

  React.useEffect(() => {
    setLocal(profile ? { ...profile } : {});
    if (!profile) window.location.hash = "#/";
  }, [profile]);

  const handleLogout = () => {
    localStorage.removeItem("mta_profile");
    setProfile(null);
    window.location.hash = "#/";
    window.location.reload();
  };

  const save = () => {
    const updated = { ...profile, ...local };
    setProfile(updated);
    localStorage.setItem("mta_profile", JSON.stringify(updated));
    setEditing(false);
  };

  // Обработчик, который передаём в TopBar
  function openCoursesHandler() {
    setOpenCourseId(null);      // показываем список, а не деталь
    setShowCourses(true);       // помечаем, что нужно показать секцию курсов
    // прокрутка к секции курсов
    setTimeout(() => {
      const el = document.getElementById("courses-section");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 50);
  }

  if (!profile) {
    return (
      <div className="dashboard-page">
        <TopBar openCourses={openCoursesHandler} />
        <main style={{ maxWidth: 900, margin: "40px auto", color: "#cbd5e1" }}>
          <h3>Профиль не найден</h3>
          <p>Пожалуйста, зарегистрируйтесь или войдите снова.</p>
        </main>
      </div>
    );
  }

  return (
    <div className="dashboard-page">
      <TopBar
        editing={editing}
        setEditing={setEditing}
        setLocal={setLocal}
        profile={profile}
        showCertificates={showCertificates}
        setShowCertificates={setShowCertificates}
        handleLogout={handleLogout}
        openCourses={openCoursesHandler} // передаём обработчик
      />

      <main className="dashboard-grid">
        <ProfileCard
          profile={profile}
          local={local}
          setLocal={setLocal}
          editing={editing}
          save={save}
          cancel={() => {
            setLocal({ ...profile });
            setEditing(false);
          }}
        />

        <section className="content">
          <ProgressCard progress={sampleProgress} />

          {/* Контейнер курсов с id для прокрутки */}
          <div id="courses-section">
            {/* Если showCourses false — можно скрыть секцию или оставить видимой.
                Здесь мы просто рендерим список/деталь; showCourses используется для прокрутки/фокуса. */}
            {!openCourseId ? (
              <CoursesList onSelect={(id) => { setOpenCourseId(id); setShowCourses(true); }} />
            ) : (
              <CourseDetail courseId={openCourseId} onBack={() => setOpenCourseId(null)} />
            )}
          </div>

          <div style={{ display: "flex", gap: 20, marginTop: 20, flexWrap: "wrap" }}>
            <div style={{ flex: "1 1 420px", minWidth: 320 }}>
              <PlatformSearch
                dataSources={{
                  courses: sampleProgress.map((p) => ({ title: p.course, sub: "Курс" })),
                  certificates,
                  profile
                }}
                onSelect={(r) => {
                  console.log("Выбрано в платформе:", r);
                  alert(`Вы выбрали: ${r.type} — ${r.item.title || r.item.name || r.item.email}`);
                }}
              />
            </div>

            <div style={{ flex: "1 1 320px", minWidth: 280 }}>
              <WebSearch engine="google" />
            </div>
          </div>

          <CertificatesBlock
            certificates={certificates}
            show={showCertificates}
            setShow={setShowCertificates}
          />
        </section>
      </main>
    </div>
  );
}