Blame for src/components/workspace/StudentWorkspace.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { BookOpen, Brain, Moon, Target, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { useAuth } from "@/lib/auth/useAuth";
import { hasLiveSession } from "@/lib/api/mode";
import { getPublicDemoMode } from "@/lib/env";
import { deleteDocument, listDocuments, reclassifyDocument } from "@/lib/api/documents";
import { getStudentDashboard } from "@/lib/api/dashboard";
import type { StudentDashboard } from "@/lib/api/dashboard";
import type { ApiDocument } from "@/lib/api/types";
import { WorkspaceTopBar } from "./WorkspaceTopBar";
import { SourcesPanel } from "./SourcesPanel";
import type { SourceDoc } from "./SourcesPanel";
import { AskDocDoeChat } from "./AskDocDoeChat";
import { RightPanel } from "./RightPanel";
import { ExamPathModule } from "./ExamPathModule";
import { isReadyStudySource } from "./SourceTrust";
import type { MaterialType } from "./workspaceTypes";
import { StudyVideoWizard } from "@/components/dashboard/StudyVideoWizard";
import { getOnboardingProfile, isOnboardingCompleted, type StudentStudyProfile } from "@/lib/onboarding";

const isLiveFrontendMode = getPublicDemoMode() === "live";

function mapToSourceDoc(doc: ApiDocument): SourceDoc {
  return {
    id: doc.id,
    title: doc.title,
    status: doc.status,
    subject: doc.subject ?? "",
    syllabus: doc.syllabus,
    file_type: doc.file_type ?? "",
    chunk_count: doc.chunk_count,
    material_type: (doc.material_type ?? "unknown") as MaterialType,
    source_type: doc.source_type ?? null,
  };
}

function hasSyllabusTerm(syllabus: string | null | undefined, term: string | undefined) {
  if (!term) return true;
  if (!syllabus) return false;
  const syllabusTokens = new Set(syllabus.toLowerCase().split(/[\s,./-]+/).filter(Boolean));
  return term
    .toLowerCase()
    .split(/[\s,./-]+/)
    .filter(Boolean)
    .every((token) => syllabusTokens.has(token));
}

function matchesProfileContext(doc: SourceDoc, profile: StudentStudyProfile | null) {
  if (!profile || profile.onboardingSkipped) return true;
  return hasSyllabusTerm(doc.syllabus, profile.board) && hasSyllabusTerm(doc.syllabus, profile.classLevel);
}

export function StudentWorkspace() {
  const router = useRouter();
  const { user, isLoading: isAuthLoading } = useAuth();
  const [subject, setSubject] = useState("All subjects");
  const [documents, setDocuments] = useState<SourceDoc[]>([]);
  const [activeDocId, setActiveDocId] = useState<string | null>(null);
  const [docRefreshToken, setDocRefreshToken] = useState(0);
  const [docError, setDocError] = useState<string | null>(null);
  const [isLoadingDocs, setIsLoadingDocs] = useState(false);
  const [prefillPrompt, setPrefillPrompt] = useState<string | undefined>(undefined);
  const [focusMode, setFocusMode] = useState(false);
  const [dashboard, setDashboard] = useState<StudentDashboard | null>(null);
  const [studyProfile, setStudyProfile] = useState<StudentStudyProfile | null>(null);
  const [profileLoaded, setProfileLoaded] = useState(false);
  const [isStudyVideoWizardOpen, setIsStudyVideoWizardOpen] = useState(false);

  // Mobile drawer state
  const [mobilePanel, setMobilePanel] = useState<"sources" | "brain" | null>(null);

  // Auth guard
  useEffect(() => {
    if (!isAuthLoading && isLiveFrontendMode && !hasLiveSession()) {
      router.replace("/login?next=%2Fdashboard");
    }
  }, [isAuthLoading, router]);

  useEffect(() => {
    const id = window.setTimeout(() => {
      const stored = isOnboardingCompleted() ? getOnboardingProfile() : null;
      setStudyProfile(stored);
      if (stored?.subjects?.[0]) setSubject(stored.subjects[0]);
      setProfileLoaded(true);
    }, 0);
    return () => window.clearTimeout(id);
  }, []);

  // Fetch documents
  useEffect(() => {
    const id = window.setTimeout(() => {
      setDocError(null);
      setIsLoadingDocs(true);
      listDocuments()
        .then((docs) => {
          const mapped = docs.map(mapToSourceDoc);
          setDocuments(mapped);
          setActiveDocId((prev) => {
            if (prev) return prev;
            const firstReady = mapped.find((d) => d.status === "ready");
            return firstReady?.id ?? null;
          });
        })
        .catch(() => {
          setDocError("Your sources could not be loaded right now. Try again in a moment.");
        })
        .finally(() => {
          setIsLoadingDocs(false);
        });
    }, 0);
    return () => window.clearTimeout(id);
  }, [docRefreshToken]);

  // Fetch aggregated dashboard snapshot (graceful — failure leaves panel minimal)
  useEffect(() => {
    let cancelled = false;
    getStudentDashboard()
      .then((data) => {
        if (!cancelled) setDashboard(data);
      })
      .catch(() => {
        if (!cancelled) setDashboard(null);
      });
    return () => {
      cancelled = true;
    };
  }, [docRefreshToken]);

  // Close mobile drawer on escape
  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") setMobilePanel(null);
    }
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, []);

  const activeDoc = documents.find((d) => d.id === activeDocId) ?? null;
  const userName = user?.name ?? "";
  const hasDocuments = documents.length > 0;
  const examActionsDisabled = !activeDoc || !isReadyStudySource(activeDoc);
  const pyqPaperCount = documents.filter(
    (doc) =>
      doc.material_type === "question_paper" &&
      (!activeDoc?.subject || doc.subject === activeDoc.subject) &&
      (doc.id === activeDoc?.id || matchesProfileContext(doc, studyProfile)),
  ).length;

  const handleDocumentSelect = useCallback((doc: SourceDoc | null) => {
    setActiveDocId(doc?.id ?? null);
    if (doc?.subject?.trim()) {
      setSubject(doc.subject);
    }
    setMobilePanel(null);
  }, []);

  const handleRefreshDocuments = useCallback(() => {
    setDocRefreshToken((t) => t + 1);
  }, []);

  const handleReclassifySource = useCallback(
    async (materialType: MaterialType) => {
      if (!activeDoc) return;
      setDocError(null);
      try {
        await reclassifyDocument(activeDoc.id, materialType);
        handleRefreshDocuments();
      } catch {
        setDocError("Could not update this source type. Try again.");
      }
    },
    [activeDoc, handleRefreshDocuments],
  );

  const handleRemoveSource = useCallback(async () => {
    if (!activeDoc) return;
    setDocError(null);
    try {
      await deleteDocument(activeDoc.id);
      setActiveDocId(null);
      handleRefreshDocuments();
    } catch {
      setDocError("Could not remove this source. Try again.");
    }
  }, [activeDoc, handleRefreshDocuments]);

  const handleCardAction = useCallback(
    (prompt: string) => {
      if (activeDoc && !isReadyStudySource(activeDoc)) {
        setMobilePanel(null);
        return;
      }
      const resolved = prompt
        .replace(/\{source\}/g, activeDoc?.title ?? subject)
        .replace(/\{subject\}/g, activeDoc?.subject ?? subject);
      setPrefillPrompt(resolved);
      setMobilePanel(null);
    },
    [activeDoc, subject],
  );

  const handleReviewWeakArea = useCallback(
    (topic: string) => {
      setPrefillPrompt(
        `I'm weak in "${topic}". Explain it simply, create a few important practice questions, and give me a quick way to master it.`,
      );
      setMobilePanel(null);
    },
    [],
  );

  const handleOpenStudyVideoWizard = useCallback(() => {
    setMobilePanel(null);
    setIsStudyVideoWizardOpen(true);
  }, []);


  const handleSearch = useCallback((query: string) => {
    setPrefillPrompt(query);
  }, []);

  return (
    <div className="flex h-[100dvh] w-full min-w-0 flex-col overflow-hidden bg-[#050505]">

      {/* Top bar */}

      <WorkspaceTopBar

        subject={subject}

        subjects={studyProfile?.subjects ?? []}

        userName={userName}

        onSubjectChange={setSubject}

        onSearch={handleSearch}

        onToggleSources={() => setMobilePanel((p) => (p === "sources" ? null : "sources"))}

        onToggleStudyBrain={hasDocuments ? () => setMobilePanel((p) => (p === "brain" ? null : "brain")) : undefined}

        focusMode={focusMode}

        onToggleFocus={() => setFocusMode((v) => !v)}

        sourceTitle={activeDoc?.title}

      />



      {/* Source load error */}

      {docError && (

        <div className="mx-2 flex items-center gap-3 rounded-2xl border border-red-400/15 bg-red-500/[0.07] px-4 py-2.5 md:mx-2.5">

          <span className="text-[12px] font-semibold text-red-300/80">{docError}</span>

          <button

            type="button"

            onClick={handleRefreshDocuments}

            className="shrink-0 rounded-lg border border-red-400/20 bg-red-500/[0.1] px-2.5 py-1 text-[11px] font-bold text-red-200 transition hover:bg-red-500/[0.2]"

          >

            Retry

          </button>

        </div>

      )}



      {profileLoaded ? (

        <ExamPathModule

          profile={studyProfile}

          onSetup={() => router.push("/onboarding?edit=1")}

          onUpload={() => router.push("/upload")}

          onGenerate={() =>

            handleCardAction(

              "Build my study path from the selected material. Rank repeated topics, weak areas, and what deserves my next hour.",

            )

          }

        />

      ) : null}



      {/* Main workspace */}

      <div className="relative flex min-h-0 min-w-0 flex-1 gap-0 overflow-hidden px-2 pb-1 pt-2 md:gap-2.5 md:p-2.5">

        {/* Desktop Sources panel — hidden in focus mode */}

        {!focusMode && (

          <SourcesPanel

            className="hidden w-[230px] shrink-0 lg:flex xl:w-[260px]"

            subject={activeDoc?.subject || subject}

            documents={documents}

            activeDocumentId={activeDocId}

            onDocumentSelect={handleDocumentSelect}

            onRefresh={handleRefreshDocuments}

            isLoading={isLoadingDocs}

            onUploadClick={() => router.push("/upload")}

          />

        )}



        {/* Center — Chat */}

        <AskDocDoeChat

          className="h-full min-w-0 max-w-full flex-1"

          subject={activeDoc?.subject || subject}

          userName={userName}

          selectedSource={activeDoc}

          prefillPrompt={prefillPrompt}

          onPrefillConsumed={() => setPrefillPrompt(undefined)}

          dashboard={dashboard}

          showFirstUploadState={!isLoadingDocs && !hasDocuments}

          onOpenUpload={() => router.push("/upload")}

          onClassifySource={handleReclassifySource}

          onRemoveSource={handleRemoveSource}

          onCompleteProfile={() => router.push("/onboarding?edit=1")}

          onOpenStudyVideoWizard={handleOpenStudyVideoWizard}

        />



        {/* Desktop Right panel — hidden in focus mode */}

        {!focusMode && hasDocuments && (

          <RightPanel

            className="hidden w-[250px] shrink-0 lg:flex xl:w-[280px] 2xl:w-[300px]"

            subject={activeDoc?.subject || subject}

            selectedSource={activeDoc}

            onCardAction={handleCardAction}

            dashboard={dashboard}

            onReviewWeakArea={handleReviewWeakArea}

            onUploadClick={() => router.push("/upload")}

            pyqPaperCount={pyqPaperCount}

            onOpenStudyVideoWizard={handleOpenStudyVideoWizard}

          />

        )}



        {/* ── Mobile Drawer Overlay ── */}

        {mobilePanel !== null && (

          <div

            className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden"

            onClick={() => setMobilePanel(null)}

            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") setMobilePanel(null); }}

            role="button"

            tabIndex={0}

            aria-label="Close panel"

          />

        )}



        {/* ── Mobile Sources Drawer (left) ── */}

        <div

          className={cn(

            "fixed inset-y-0 left-0 z-50 w-[92vw] max-w-[360px] transition-transform duration-300 ease-out lg:hidden",

            mobilePanel === "sources" ? "translate-x-0" : "-translate-x-full pointer-events-none",

          )}

        >

          <div className="flex h-full min-w-0 flex-col bg-[#0B0B0C] shadow-[4px_0_40px_rgba(0,0,0,0.6)]">

            <div className="flex h-12 shrink-0 items-center justify-between border-b border-white/[0.07] px-4">

              <div className="flex items-center gap-2">

                <BookOpen className="size-4 text-white/50" strokeWidth={2} />

                <span className="text-[13px] font-bold text-white">Sources</span>

                {documents.length > 0 && (

                  <span className="rounded-full bg-white/[0.08] px-1.5 py-0.5 text-[10px] font-bold text-white/55">

                    {documents.length}

                  </span>

                )}

              </div>

              <button

                type="button"

                onClick={() => setMobilePanel(null)}

                aria-label="Close sources panel"

                className="touch-ripple grid size-9 place-items-center rounded-lg border border-white/8 text-white/50 transition hover:text-white"

              >

                <X className="size-4" strokeWidth={2} />

              </button>

            </div>

            <SourcesPanel

              className="min-h-0 flex-1"

              subject={activeDoc?.subject || subject}

              documents={documents}

              activeDocumentId={activeDocId}

              onDocumentSelect={handleDocumentSelect}

              onRefresh={handleRefreshDocuments}

              isLoading={isLoadingDocs}

              onUploadClick={() => router.push("/upload")}

            />

          </div>

        </div>



        {/* ── Mobile Study Brain Drawer (right) ── */}

        <div

          className={cn(

            "fixed inset-y-0 right-0 z-50 w-[92vw] max-w-[380px] transition-transform duration-300 ease-out lg:hidden",

            mobilePanel === "brain" ? "translate-x-0" : "translate-x-full pointer-events-none",

          )}

        >

          <div className="flex h-full min-w-0 flex-col bg-[#0B0B0C] shadow-[-4px_0_40px_rgba(0,0,0,0.6)]">

            <div className="flex h-12 shrink-0 items-center justify-between border-b border-white/[0.07] px-4">

              <div className="flex items-center gap-2">

                <Brain className="size-4 text-white/50" strokeWidth={2} />

                <span className="text-[13px] font-bold text-white">Study actions</span>

              </div>

              <button

                type="button"

                onClick={() => setMobilePanel(null)}

                aria-label="Close study brain panel"

                className="touch-ripple grid size-9 place-items-center rounded-lg border border-white/8 text-white/50 transition hover:text-white"

              >

                <X className="size-4" strokeWidth={2} />

              </button>

            </div>

            <RightPanel

              className="min-h-0 flex-1"

              subject={activeDoc?.subject || subject}

              selectedSource={activeDoc}

              onCardAction={handleCardAction}

              dashboard={dashboard}

              onReviewWeakArea={handleReviewWeakArea}

              onUploadClick={() => router.push("/upload")}

              pyqPaperCount={pyqPaperCount}

              onOpenStudyVideoWizard={handleOpenStudyVideoWizard}

            />

          </div>

        </div>

      </div>



      {/* Mobile bottom nav — hidden on desktop */}

      <div className="mobile-nav flex min-h-[56px] shrink-0 border-t border-white/[0.06] bg-[#0B0B0C]/95 lg:hidden">

        {hasDocuments ? (

          <button

            type="button"

            onClick={() => setMobilePanel((p) => (p === "sources" ? null : "sources"))}

            aria-label="Toggle sources panel"

            className={cn(

              "touch-ripple flex h-[56px] flex-1 flex-col items-center justify-center gap-[3px] text-[10px] font-semibold transition",

              mobilePanel === "sources" ? "text-white" : "text-white/45 active:text-white/70",

            )}

          >

            <BookOpen

              className="size-[18px]"

              strokeWidth={mobilePanel === "sources" ? 2.2 : 1.8}

            />

            <span>Sources</span>

          </button>

        ) : null}



        <button

          type="button"

          onClick={() =>

            handleCardAction(
              "Create important practice questions from {source} for {subject}, based only on available source evidence. Do not claim PYQ patterns unless question papers are available.",
            )
          }
          disabled={examActionsDisabled}

          aria-label="Generate likely exam questions"

          className="touch-ripple flex h-[56px] flex-1 flex-col items-center justify-center gap-[3px] text-[10px] font-semibold text-white/45 transition active:text-white/70 disabled:cursor-not-allowed disabled:opacity-30"

        >

          <Target className="size-[18px]" strokeWidth={1.8} />

          <span>Likely Q&apos;s</span>

        </button>



        <button

          type="button"

          onClick={() =>

            handleCardAction(
              "Create a last-night study plan for {source} ({subject}). Include scoring keywords, key definitions, practice questions, memory tricks, and a timed plan for fast revision tonight.",
            )
          }

          disabled={examActionsDisabled}

          aria-label="Generate last-night study plan"

          className="touch-ripple flex h-[56px] flex-1 flex-col items-center justify-center gap-[3px] text-[10px] font-semibold text-white/45 transition active:text-white/70 disabled:cursor-not-allowed disabled:opacity-30"

        >

          <Moon className="size-[18px]" strokeWidth={1.8} />

          <span>Tonight</span>

        </button>



        <button

          type="button"

          onClick={() => setMobilePanel((p) => (p === "brain" ? null : "brain"))}

          aria-label="Toggle study actions panel"

          className={cn(

            "touch-ripple flex h-[56px] flex-1 flex-col items-center justify-center gap-[3px] text-[10px] font-semibold transition",

            mobilePanel === "brain" ? "text-white" : "text-white/45 active:text-white/70",

          )}

        >

          <Brain

            className="size-[18px]"

            strokeWidth={mobilePanel === "brain" ? 2.2 : 1.8}

          />

          <span>Actions</span>

        </button>

      </div>



      <StudyVideoWizard

        isOpen={isStudyVideoWizardOpen}

        source={

          activeDoc ?? {

            id: "",

            title: "Choose a source",

            subject,

            status: "ready",

            material_type: "unknown",

          }

        }

        onClose={() => setIsStudyVideoWizardOpen(false)}

        onUploadClick={() => {

          setIsStudyVideoWizardOpen(false);

          router.push("/upload");

        }}

      />

    </div>
  );
}