web/src/components/ChatArea.tsx

// web/src/components/ChatArea.tsx
import pdfIcon from "../assets/file-icons/pdf.png";
import pptIcon from "../assets/file-icons/ppt.png";
import otherIcon from "../assets/file-icons/other_format.png";

import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";

import { Button } from "./ui/button";
import { Textarea } from "./ui/textarea";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import {
  Send,
  ArrowDown,
  Share2,
  Upload,
  X,
  Trash2,
  File,
  FileText,
  Presentation,
  Image as ImageIcon,
  Bookmark,
  Plus,
  Download,
  Copy,
} from "lucide-react";

import { Message } from "./Message";
import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
import type {
  Message as MessageType,
  LearningMode,
  UploadedFile,
  FileType,
  SpaceType,
  ChatMode,
  SavedChat,
  Workspace,
} from "../App";
import { toast } from "sonner";
import { jsPDF } from "jspdf";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "./ui/dialog";
import { Checkbox } from "./ui/checkbox";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "./ui/alert-dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./ui/select";
import { SmartReview } from "./SmartReview";
import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";

// NEW
import { useObjectUrlCache } from "../lib/useObjectUrlCache";

type ReviewEventType = "send_message" | "review_topic" | "review_all";

interface ChatAreaProps {
  messages: MessageType[];
  onSendMessage: (content: string) => void;
  uploadedFiles: UploadedFile[];
  onFileUpload: (files: File[]) => void;
  onRemoveFile: (index: number) => void;
  onProfileBioUpdate?: (bio: string) => void; // ✅ NEW

  onFileTypeChange: (index: number, type: FileType) => void;
  memoryProgress: number;
  isLoggedIn: boolean;
  learningMode: LearningMode;
  onClearConversation: () => void;
  onSaveChat: () => void;
  onLearningModeChange: (mode: LearningMode) => void;
  spaceType: SpaceType;
  chatMode: ChatMode;
  onChatModeChange: (mode: ChatMode) => void;
  onNextQuestion: () => void;
  onStartQuiz: () => void;
  quizState: {
    currentQuestion: number;
    waitingForAnswer: boolean;
    showNextButton: boolean;
  };
  isTyping: boolean;
  showClearDialog: boolean;
  onConfirmClear: (shouldSave: boolean) => void;
  onCancelClear: () => void;
  savedChats: SavedChat[];
  workspaces: Workspace[];
  currentWorkspaceId: string;
  onSaveFile?: (
    content: string,
    type: "export" | "summary",
    format?: "pdf" | "text",
    workspaceId?: string
  ) => void;
  leftPanelVisible?: boolean;
  currentCourseId?: string;
  onCourseChange?: (courseId: string) => void;
  availableCourses?: Array<{ id: string; name: string }>;
  showReviewBanner?: boolean;

  onReviewActivity?: (event: ReviewEventType) => void;
  currentUserId?: string; // backend user_id
  docType?: string; // backend doc_type (optional)
}

interface PendingFile {
  file: File;
  type: FileType;
}

// File viewer content (image full preview + pdf iframe; others download)
function isImageFile(name: string) {
  const n = name.toLowerCase();
  return [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => n.endsWith(e));
}
function isPdfFile(name: string) {
  return name.toLowerCase().endsWith(".pdf");
}
function isDocFile(name: string) {
  const n = name.toLowerCase();
  return n.endsWith(".doc") || n.endsWith(".docx");
}
function isPptFile(name: string) {
  const n = name.toLowerCase();
  return n.endsWith(".ppt") || n.endsWith(".pptx");
}

function FileViewerContent({ file }: { file: File }) {
  const [url, setUrl] = React.useState<string>("");

  React.useEffect(() => {
    const u = URL.createObjectURL(file);
    setUrl(u);
    return () => URL.revokeObjectURL(u);
  }, [file]);

  if (isImageFile(file.name)) {
    return (
      <div className="w-full">
        <img
          src={url}
          alt={file.name}
          className="w-full h-auto rounded-lg border"
          draggable={false}
        />
      </div>
    );
  }

  if (isPdfFile(file.name)) {
    // Force PDF MIME, in case file.type is empty and the browser blocks preview.
    const pdfBlob = new Blob([file], { type: "application/pdf" });
    const pdfUrl = URL.createObjectURL(pdfBlob);

    return (
      <div className="w-full h-[70vh] border rounded-lg overflow-hidden">
        <object data={pdfUrl} type="application/pdf" className="w-full h-full">
          <div className="p-3 space-y-2">
            <div className="text-sm text-muted-foreground">
              PDF preview is blocked by your browser. Please open it in a new tab or download.
            </div>
            <div className="flex gap-2">
              <a
                href={pdfUrl}
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center justify-center h-9 px-3 rounded-md border hover:bg-muted"
              >
                Open in new tab
              </a>
              <a
                href={pdfUrl}
                download={file.name}
                className="inline-flex items-center justify-center h-9 px-3 rounded-md border hover:bg-muted"
              >
                Download
              </a>
            </div>
          </div>
        </object>
      </div>
    );
  }

  const kind = isDocFile(file.name)
    ? "Word document"
    : isPptFile(file.name)
    ? "PowerPoint"
    : "File";

  return (
    <div className="space-y-3">
      <div className="text-sm text-muted-foreground">
        Preview is not available for this {kind} format in the browser without conversion.
      </div>
      <a
        href={url}
        download={file.name}
        className="inline-flex items-center justify-center h-9 px-3 rounded-md border hover:bg-muted"
      >
        Download to view
      </a>
    </div>
  );
}

export function ChatArea({
  messages,
  onSendMessage,
  uploadedFiles,
  onFileUpload,
  onRemoveFile,
  onFileTypeChange,
  memoryProgress,
  isLoggedIn,
  learningMode,
  onClearConversation,
  onSaveChat,
  onLearningModeChange,
  spaceType,
  chatMode,
  onChatModeChange,
  onNextQuestion,
  onStartQuiz,
  quizState,
  isTyping: isAppTyping,
  showClearDialog,
  onConfirmClear,
  onCancelClear,
  savedChats,
  workspaces,
  currentWorkspaceId,
  onSaveFile,
  leftPanelVisible = false,
  currentCourseId,
  onCourseChange,
  availableCourses = [],
  showReviewBanner = false,
  onReviewActivity,
  onProfileBioUpdate,
  currentUserId,
  docType,
}: ChatAreaProps) {
  const [input, setInput] = useState("");
  const [showScrollButton, setShowScrollButton] = useState(false);
  const [showTopBorder, setShowTopBorder] = useState(false);
  const [isDragging, setIsDragging] = useState(false);

  const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([]);
  const [showTypeDialog, setShowTypeDialog] = useState(false);

  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [fileToDelete, setFileToDelete] = useState<number | null>(null);

  const [selectedFile, setSelectedFile] = useState<{
    file: File;
    index: number;
  } | null>(null);
  const [showFileViewer, setShowFileViewer] = useState(false);

  const [showDownloadDialog, setShowDownloadDialog] = useState(false);
  const [downloadPreview, setDownloadPreview] = useState("");
  const [downloadTab, setDownloadTab] = useState<"chat" | "summary">("chat");
  const [downloadOptions, setDownloadOptions] = useState({
    chat: true,
    summary: false,
  });

  const [showShareDialog, setShowShareDialog] = useState(false);
  const [shareLink, setShareLink] = useState("");
  const [targetWorkspaceId, setTargetWorkspaceId] = useState<string>("");

  // --------------------------
  // Profile Init Flow (Ask mode)
  // --------------------------
  type InitStatus = "idle" | "offered" | "asking" | "generating" | "done";

  type InitQ = {
    id: string;
    title: string;
    placeholder?: string;
  };

  const INIT_QUESTIONS: InitQ[] = [
    {
      id: "course_goal",
      title: "What’s the single most important outcome you want from this course?",
      placeholder: "e.g., understand LLM basics, build a project, prep for an exam, apply to work…",
    },
    {
      id: "background",
      title: "What’s your current background (major, job, or anything relevant)?",
      placeholder: "One sentence is totally fine.",
    },
    {
      id: "ai_experience",
      title: "Have you worked with AI/LLMs before? If yes, at what level?",
      placeholder: "e.g., none / used ChatGPT / built small projects / research…",
    },
    {
      id: "python_level",
      title: "How comfortable are you with Python? (Beginner / Intermediate / Advanced)",
      placeholder: "Type one: Beginner / Intermediate / Advanced",
    },
    {
      id: "preferred_format",
      title: "What helps you learn best? (You can list multiple, separated by commas)",
      placeholder: "Step-by-step, examples, visuals, concise answers, Socratic questions…",
    },
    {
      id: "pace",
      title: "What pace do you prefer from me? (Fast / Steady / Very detailed)",
      placeholder: "Type one: Fast / Steady / Very detailed",
    },
    {
      id: "biggest_pain",
      title: "Where do you typically get stuck when learning technical topics?",
      placeholder: "Concepts, tools, task breakdown, math, confidence, time management…",
    },
    {
      id: "support_pref",
      title: "When you’re unsure, how should I support you?",
      placeholder: "Hints first / guided questions / direct answer / ask then answer…",
    },
  ];

  const [initStatus, setInitStatus] = useState<InitStatus>("idle");
  const [initNeedOffer, setInitNeedOffer] = useState(false);
  const [initStep, setInitStep] = useState(0);
  const [initAnswers, setInitAnswers] = useState<Record<string, any>>({});
  const [generatedBio, setGeneratedBio] = useState<string>("");

  // IMPORTANT: allow typing during "asking"; lock typing only during "generating"
  const initInputLocked = chatMode === "ask" && initStatus === "generating";
  // Use this to block other actions (uploads / drag-drop / etc.) during asking+generating
  const initBlockActions = chatMode === "ask" && (initStatus === "asking" || initStatus === "generating");

  const courses =
    availableCourses.length > 0
      ? availableCourses
      : [
          { id: "course1", name: "Introduction to AI" },
          { id: "course2", name: "Machine Learning" },
          { id: "course3", name: "Data Structures" },
          { id: "course4", name: "Web Development" },
        ];

  // Scroll refs
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Composer measured height (dynamic) to reserve bottom padding for messages
  const composerRef = useRef<HTMLDivElement>(null);
  const [composerHeight, setComposerHeight] = useState<number>(160);

  useLayoutEffect(() => {
    const el = composerRef.current;
    if (!el) return;

    const update = () => setComposerHeight(el.getBoundingClientRect().height);
    update();

    const ro = new ResizeObserver(() => update());
    ro.observe(el);

    return () => ro.disconnect();
  }, []);

  const isInitialMount = useRef(true);
  const previousMessagesLength = useRef(messages.length);

  const scrollToBottom = (behavior: ScrollBehavior = "smooth") => {
    const el = scrollContainerRef.current;
    if (!el) return;

    const top = el.scrollHeight - el.clientHeight;
    if (behavior === "auto") {
      el.scrollTop = top;
      return;
    }

    el.scrollTo({ top, behavior });
  };

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
      previousMessagesLength.current = messages.length;

      const el = scrollContainerRef.current;
      if (el) el.scrollTop = 0;
      return;
    }

    if (messages.length > previousMessagesLength.current) {
      const el = scrollContainerRef.current;
      if (el) {
        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 240;
        if (nearBottom) scrollToBottom("smooth");
      }
    }
    previousMessagesLength.current = messages.length;
  }, [messages]);

  useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = container;
      const isAtBottom = scrollHeight - scrollTop - clientHeight < 120;
      setShowScrollButton(!isAtBottom);
      setShowTopBorder(scrollTop > 0);
    };

    handleScroll();
    container.addEventListener("scroll", handleScroll, { passive: true });
    return () => container.removeEventListener("scroll", handleScroll);
  }, []);

  // Check if we should run profile init flow (Ask mode only)
  useEffect(() => {
    if (!isLoggedIn) return;
    if (chatMode !== "ask") return;
    if (!currentUserId) return;

    // If already completed in this session, do nothing
    if (initStatus !== "idle") return;

    let cancelled = false;

    (async () => {
      try {
        const r = await fetch(`/api/profile/status?user_id=${encodeURIComponent(currentUserId)}`);
        if (!r.ok) return;
        const j = await r.json();
        if (cancelled) return;

        if (j?.need_init) {
          setInitNeedOffer(true);
          setInitStatus("offered");
        }
      } catch {
        // ignore
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [isLoggedIn, chatMode, currentUserId, initStatus]);

  const handleSubmit = async (e: React.FormEvent | React.KeyboardEvent) => {
    e.preventDefault();
    if (!isLoggedIn) return;

    // INIT FLOW: treat input as the answer to the current init question
    if (chatMode === "ask" && initStatus === "asking") {
      const text = input.trim();
      if (!text) return;

      const q = INIT_QUESTIONS[initStep];
      const nextAnswers = { ...initAnswers, [q.id]: text };

      setInitAnswers(nextAnswers);
      setInput("");

      const nextStep = initStep + 1;

      // finished -> generate bio + save to backend
      if (nextStep >= INIT_QUESTIONS.length) {
        setInitStatus("generating");

        try {
          const r = await fetch("/api/profile/init_submit", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              user_id: currentUserId,
              answers: nextAnswers,
              language_preference: "English",
            }),
          });

          if (!r.ok) throw new Error("init_submit failed");
          const j = await r.json();

          setGeneratedBio(j?.bio || "");
          onProfileBioUpdate?.(j?.bio || ""); // ✅ NEW: sync into user profile

          setInitStatus("done");
          setInitNeedOffer(false);

          // reset
          setInitStep(0);
          setInitAnswers({});
        } catch {
          toast.error("Sorry — I couldn’t generate your Bio. Please try again.");
          setInitStatus("asking");
        }

        return;
      }

      // go next question
      setInitStep(nextStep);
      return;
    }

    // ORIGINAL behavior (unchanged)
    const hasText = !!input.trim();
    const hasFiles = uploadedFiles.length > 0;

    if (!hasText && !hasFiles) return;

    if (chatMode === "review") onReviewActivity?.("send_message");

    onSendMessage(input);

    setInput("");
    setPendingFiles([]);

    for (let i = uploadedFiles.length - 1; i >= 0; i--) {
      onRemoveFile(i);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSubmit(e);
    }
  };

  const modeLabels: Record<LearningMode, string> = {
    general: "General",
    concept: "Concept Explainer",
    socratic: "Socratic Tutor",
    exam: "Exam Prep",
    assignment: "Assignment Helper",
    summary: "Quick Summary",
  };

  const handleReviewTopic = (item: {
    title: string;
    previousQuestion: string;
    memoryRetention: number;
    schedule: string;
    status: string;
    weight: number;
    lastReviewed: string;
  }) => {
    onReviewActivity?.("review_topic");

    const userMessage = `Please help me review: ${item.title}`;
    const reviewData = `REVIEW_TOPIC:${item.title}|${item.previousQuestion}|${item.memoryRetention}|${item.schedule}|${item.status}|${item.weight}|${item.lastReviewed}`;
    (window as any).__lastReviewData = reviewData;
    onSendMessage(userMessage);
  };

  const handleReviewAll = () => {
    onReviewActivity?.("review_all");
    (window as any).__lastReviewData = "REVIEW_ALL";
    onSendMessage("Please help me review all topics that need attention.");
  };

  const buildPreviewContent = () => {
    if (!messages.length) return "";
    return messages
      .map((msg) => `${msg.role === "user" ? "You" : "Clare"}: ${msg.content}`)
      .join("\n\n");
  };

  const buildSummaryContent = () => {
    if (!messages.length) return "No messages to summarize.";

    const userMessages = messages.filter((msg) => msg.role === "user");
    const assistantMessages = messages.filter((msg) => msg.role === "assistant");

    let summary = `Chat Summary\n================\n\n`;
    summary += `Total Messages: ${messages.length}\n`;
    summary += `- User Messages: ${userMessages.length}\n`;
    summary += `- Assistant Responses: ${assistantMessages.length}\n\n`;

    summary += `Key Points:\n`;
    userMessages.slice(0, 3).forEach((msg, idx) => {
      const preview = msg.content.substring(0, 80);
      summary += `${idx + 1}. ${preview}${msg.content.length > 80 ? "..." : ""}\n`;
    });

    return summary;
  };

  const handleOpenDownloadDialog = () => {
    setDownloadTab("chat");
    setDownloadOptions({ chat: true, summary: false });
    setDownloadPreview(buildPreviewContent());
    setShowDownloadDialog(true);
  };

  const handleCopyPreview = async () => {
    try {
      await navigator.clipboard.writeText(downloadPreview);
      toast.success("Copied preview");
    } catch {
      toast.error("Copy failed");
    }
  };

  const handleDownloadFile = async () => {
    try {
      let contentToPdf = "";

      if (downloadOptions.chat) contentToPdf += buildPreviewContent();

      if (downloadOptions.summary) {
        if (downloadOptions.chat) contentToPdf += "\n\n================\n\n";
        contentToPdf += buildSummaryContent();
      }

      if (!contentToPdf.trim()) {
        toast.error("Please select at least one option");
        return;
      }

      const pdf = new jsPDF({
        orientation: "portrait",
        unit: "mm",
        format: "a4",
      });

      pdf.setFontSize(14);
      pdf.text("Chat Export", 10, 10);
      pdf.setFontSize(11);

      const pageHeight = pdf.internal.pageSize.getHeight();
      const margin = 10;
      const maxWidth = 190;
      const lineHeight = 5;
      let y = 20;

      const lines = pdf.splitTextToSize(contentToPdf, maxWidth);
      lines.forEach((line: string) => {
        if (y > pageHeight - margin) {
          pdf.addPage();
          y = margin;
        }
        pdf.text(line, margin, y);
        y += lineHeight;
      });

      pdf.save("chat-export.pdf");
      setShowDownloadDialog(false);
      toast.success("PDF downloaded successfully");
    } catch (error) {
      // eslint-disable-next-line no-console
      console.error("PDF generation error:", error);
      toast.error("Failed to generate PDF");
    }
  };

  const isCurrentChatSaved = (): boolean => {
    if (messages.length <= 1) return false;

    return savedChats.some((chat) => {
      if (chat.chatMode !== chatMode) return false;
      if (chat.messages.length !== messages.length) return false;

      return chat.messages.every((savedMsg, idx) => {
        const currentMsg = messages[idx];
        return (
          savedMsg.id === currentMsg.id &&
          savedMsg.role === currentMsg.role &&
          savedMsg.content === currentMsg.content
        );
      });
    });
  };

  const handleSaveClick = () => {
    if (messages.length <= 1) {
      toast.info("No conversation to save");
      return;
    }
    onSaveChat();
  };

  const handleShareClick = () => {
    if (messages.length <= 1) {
      toast.info("No conversation to share");
      return;
    }
    const conversationText = buildPreviewContent();
    const blob = new Blob([conversationText], { type: "text/plain" });
    const url = URL.createObjectURL(blob);
    setShareLink(url);
    setTargetWorkspaceId(currentWorkspaceId);
    setShowShareDialog(true);
  };

  const handleCopyShareLink = async () => {
    try {
      await navigator.clipboard.writeText(shareLink);
      toast.success("Link copied");
    } catch {
      toast.error("Failed to copy link");
    }
  };

  const handleShareSendToWorkspace = () => {
    const content = buildPreviewContent();
    onSaveFile?.(content, "export", "text", targetWorkspaceId);
    setShowShareDialog(false);
    toast.success("Sent to workspace Saved Files");
  };

  const handleClearClick = () => {
    const saved = isCurrentChatSaved();

    if (saved) {
      // keep behavior
      onConfirmClear(false as any);
      return;
    }

    const hasUserMessages = messages.some((m) => m.role === "user");
    if (!hasUserMessages) {
      onClearConversation();
      return;
    }

    onClearConversation();
  };

  // DnD
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (!isLoggedIn) return;
    if (initBlockActions) return; // block drag UI during init
    setIsDragging(true);
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  };

  const MAX_UPLOAD_FILES = 10;

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
    if (!isLoggedIn) return;
    if (initBlockActions) return; // block file drop during init

    const fileList = e.dataTransfer.files;
    const files: File[] = [];
    for (let i = 0; i < fileList.length; i++) {
      const f = fileList.item(i);
      if (f) files.push(f);
    }

    const validFiles = files.filter((file) => {
      const ext = file.name.toLowerCase();
      return [
        ".pdf",
        ".docx",
        ".pptx",
        ".jpg",
        ".jpeg",
        ".png",
        ".gif",
        ".webp",
        ".doc",
        ".ppt",
      ].some((allowed) => ext.endsWith(allowed));
    });

    if (validFiles.length === 0) {
      toast.error("Please upload .pdf, .docx, .pptx, or image files");
      return;
    }

    // limit total files per conversation
    const currentCount = uploadedFiles.length + pendingFiles.length;
    const remaining = MAX_UPLOAD_FILES - currentCount;

    if (remaining <= 0) {
      toast.error(`Each conversation can upload up to ${MAX_UPLOAD_FILES} files.`);
      return;
    }

    const accepted = validFiles.slice(0, remaining);
    const rejected = validFiles.length - accepted.length;

    if (rejected > 0) {
      toast.warning(`Only the first ${accepted.length} file(s) were added (max ${MAX_UPLOAD_FILES}).`);
    }

    // append, do NOT overwrite existing pending
    setPendingFiles((prev) => [
      ...prev,
      ...accepted.map((file) => ({ file, type: "other" as FileType })),
    ]);

    setShowTypeDialog(true);
  };

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (initBlockActions) {
      e.target.value = "";
      return;
    }

    const files = Array.from(e.target.files || []) as File[];

    if (files.length === 0) {
      e.target.value = "";
      return;
    }

    const validFiles = files.filter((file) => {
      const ext = file.name.toLowerCase();
      return [
        ".pdf",
        ".docx",
        ".pptx",
        ".jpg",
        ".jpeg",
        ".png",
        ".gif",
        ".webp",
        ".doc",
        ".ppt",
      ].some((allowed) => ext.endsWith(allowed));
    });

    if (validFiles.length === 0) {
      toast.error("Please upload .pdf, .docx, .pptx, or image files");
      e.target.value = "";
      return;
    }

    // limit total files per conversation
    const currentCount = uploadedFiles.length + pendingFiles.length;
    const remaining = MAX_UPLOAD_FILES - currentCount;

    if (remaining <= 0) {
      toast.error(`Each conversation can upload up to ${MAX_UPLOAD_FILES} files.`);
      e.target.value = "";
      return;
    }

    const accepted = validFiles.slice(0, remaining);
    const rejected = validFiles.length - accepted.length;

    if (rejected > 0) {
      toast.warning(`Only the first ${accepted.length} file(s) were added (max ${MAX_UPLOAD_FILES}).`);
    }

    // append, do NOT overwrite existing pending
    setPendingFiles((prev) => [
      ...prev,
      ...accepted.map((file) => ({ file, type: "other" as FileType })),
    ]);

    setShowTypeDialog(true);
    e.target.value = "";
  };

  const handleConfirmUpload = () => {
    onFileUpload(pendingFiles.map((pf) => pf.file));
    const startIndex = uploadedFiles.length;

    pendingFiles.forEach((pf, idx) => {
      setTimeout(() => {
        onFileTypeChange(startIndex + idx, pf.type);
      }, 0);
    });

    const count = pendingFiles.length;
    setPendingFiles([]);
    setShowTypeDialog(false);
    toast.success(`${count} file(s) uploaded successfully`);
  };

  const handleCancelUpload = () => {
    setPendingFiles([]);
    setShowTypeDialog(false);
  };

  const handlePendingFileTypeChange = (index: number, type: FileType) => {
    setPendingFiles((prev) => prev.map((pf, i) => (i === index ? { ...pf, type } : pf)));
  };

  // File helpers
  const getFileIcon = (filename: string) => {
    const ext = filename.toLowerCase();
    if (ext.endsWith(".pdf")) return FileText;
    if (ext.endsWith(".docx") || ext.endsWith(".doc")) return File;
    if (ext.endsWith(".pptx") || ext.endsWith(".ppt")) return Presentation;
    if ([".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e))) return ImageIcon;
    return File;
  };

  const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  };

  const fileKey = (f: File) => `${f.name}::${f.size}::${f.lastModified}`;

  // useObjectUrlCache: for image thumbnails (uploaded + pending)
  const allThumbFiles = useMemo(() => {
    return [...uploadedFiles.map((u) => u.file), ...pendingFiles.map((p) => p.file)];
  }, [uploadedFiles, pendingFiles]);

  const { getOrCreate } = useObjectUrlCache(allThumbFiles);

  // a compact "chip" UI (the one with left Trash)
  const FileChip = ({
    file,
    index,
    source,
  }: {
    file: File;
    index: number;
    source: "uploaded" | "pending";
  }) => {
    const ext = file.name.toLowerCase();
    const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) => ext.endsWith(e));

    const isPdf = ext.endsWith(".pdf");
    const isPpt = ext.endsWith(".ppt") || ext.endsWith(".pptx");
    const fileIcon = isPdf ? pdfIcon : isPpt ? pptIcon : otherIcon;

    const label = isPdf
      ? "PDF"
      : isPpt
      ? "Presentation"
      : ext.endsWith(".docx") || ext.endsWith(".doc")
      ? "Document"
      : isImage
      ? "Image"
      : "File";

    const thumbUrl = isImage ? getOrCreate(file) : null;

    const handleRemove = () => {
      if (source === "uploaded") onRemoveFile(index);
      else setPendingFiles((prev) => prev.filter((p) => fileKey(p.file) !== fileKey(file)));
    };

    return (
      <div className="flex items-center gap-2 rounded-xl border border-border bg-card px-3 py-2 shadow-sm w-[320px] max-w-full">
        <button
          type="button"
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            handleRemove();
          }}
          className="ml-2 inline-flex h-7 w-7 items-center justify-center rounded-md border border-border bg-card hover:bg-muted"
          title="Remove"
        >
          <Trash2 className="h-4 w-4" />
        </button>

        <div className="min-w-0 flex-1">
          <div className="text-sm font-medium truncate" title={file.name}>
            {file.name}
          </div>
          <div className="text-xs text-muted-foreground">{label}</div>
        </div>

        {/* Thumbnail (image preview or file icon) */}
        <div className="relative h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
          {isImage ? (
            thumbUrl ? (
              <img
                src={thumbUrl}
                alt={file.name}
                className="h-full w-full object-cover"
                draggable={false}
              />
            ) : (
              <div className="h-full w-full flex items-center justify-center">
                <ImageIcon className="h-4 w-4 text-muted-foreground" />
              </div>
            )
          ) : (
            <img
              src={fileIcon}
              alt={file.name}
              className="h-full w-full object-contain p-1"
              draggable={false}
            />
          )}
        </div>
      </div>
    );
  };

  const bottomPad = Math.max(24, composerHeight + 24);

  const initPlaceholder =
    initStatus === "asking"
      ? "Type your answer here and press Enter / Send..."
      : undefined;

  return (
    <div className="relative flex flex-col h-full min-h-0 w-full overflow-hidden">
      {/* Top Bar */}
      <div
        className={`flex-shrink-0 flex items-center justify-between px-4 bg-card z-20 ${
          showTopBorder ? "border-b border-border" : ""
        }`}
        style={{
          height: "4.5rem",
          margin: 0,
          padding: "1rem 1rem",
          boxSizing: "border-box",
        }}
      >
        {/* Course Selector - Left */}
        <div className="flex-shrink-0">
          {(() => {
            const current = workspaces.find((w) => w.id === currentWorkspaceId);
            if (current?.type === "group") {
              if (current.category === "course" && current.courseName) {
                return (
                  <div className="h-9 px-3 inline-flex items-center rounded-md border font-semibold">
                    {current.courseName}
                  </div>
                );
              }
              return null;
            }

            return (
              <Select
                value={currentCourseId || "course1"}
                onValueChange={(val) => onCourseChange && onCourseChange(val)}
              >
                <SelectTrigger className="w-[200px] h-9 font-semibold">
                  <SelectValue placeholder="Select course" />
                </SelectTrigger>
                <SelectContent>
                  {courses.map((course) => (
                    <SelectItem key={course.id} value={course.id}>
                      {course.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            );
          })()}
        </div>

        {/* Tabs - Center */}
        <div className="absolute left-1/2 -translate-x-1/2 flex-shrink-0">
          <Tabs
            value={chatMode}
            onValueChange={(value) => onChatModeChange(value as ChatMode)}
            className="w-auto"
            orientation="horizontal"
          >
            <TabsList className="inline-flex h-8 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground">
              <TabsTrigger value="ask" className="w-[140px] px-3 text-sm">
                Ask
              </TabsTrigger>
              <TabsTrigger value="review" className="w-[140px] px-3 text-sm relative">
                Review
                <span
                  className="absolute top-0 right-0 bg-red-500 rounded-full border-2"
                  style={{
                    width: 10,
                    height: 10,
                    transform: "translate(25%, -25%)",
                    zIndex: 10,
                    borderColor: "var(--muted)",
                  }}
                />
              </TabsTrigger>
              <TabsTrigger value="quiz" className="w-[140px] px-3 text-sm">
                Quiz
              </TabsTrigger>
            </TabsList>
          </Tabs>
        </div>

        {/* Action Buttons - Right */}
        <div className="flex items-center gap-2 flex-shrink-0">
          <Button
            variant="ghost"
            size="icon"
            onClick={handleSaveClick}
            disabled={!isLoggedIn || initBlockActions}
            className={`h-8 w-8 rounded-md hover:bg-muted/50 ${isCurrentChatSaved() ? "text-primary" : ""}`}
            title={isCurrentChatSaved() ? "Unsave" : "Save"}
          >
            <Bookmark className={`h-4 w-4 ${isCurrentChatSaved() ? "fill-primary text-primary" : ""}`} />
          </Button>

          <Button
            variant="ghost"
            size="icon"
            onClick={handleOpenDownloadDialog}
            disabled={!isLoggedIn || initBlockActions}
            className="h-8 w-8 rounded-md hover:bg-muted/50"
            title="Download"
          >
            <Download className="h-4 w-4" />
          </Button>

          <Button
            variant="ghost"
            size="icon"
            onClick={handleShareClick}
            disabled={!isLoggedIn || initBlockActions}
            className="h-8 w-8 rounded-md hover:bg-muted/50"
            title="Share"
          >
            <Share2 className="h-4 w-4" />
          </Button>

          <Button
            variant="outline"
            onClick={handleClearClick}
            disabled={!isLoggedIn || initBlockActions}
            className="h-8 px-3 gap-2 rounded-md border border-border disabled:opacity-60 !bg-[var(--card)] !text-[var(--card-foreground)] hover:!opacity-90 [&_svg]:!text-[var(--card-foreground)] [&_span]:!text-[var(--card-foreground)]"
            title="New Chat"
          >
            <Plus className="h-4 w-4" />
            <span className="text-sm font-medium">New chat</span>
          </Button>
        </div>
      </div>

      {/* Scroll Container */}
      <div
        ref={scrollContainerRef}
        className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
        style={{ overscrollBehavior: "contain" }}
      >
        <div className="py-6" style={{ paddingBottom: bottomPad }}>
          <div className="w-full space-y-6 max-w-4xl mx-auto">
            {messages.map((message) => (
              <React.Fragment key={message.id}>
                <Message
                  message={message}
                  showSenderInfo={spaceType === "group"}
                  isFirstGreeting={
                    (message.id === "1" || message.id === "review-1" || message.id === "quiz-1") &&
                    message.role === "assistant"
                  }
                  showNextButton={message.showNextButton && !isAppTyping}
                  onNextQuestion={onNextQuestion}
                  chatMode={chatMode}
                  currentUserId={currentUserId}
                  learningMode={learningMode}
                  docType={docType}
                />

                {chatMode === "review" && message.id === "review-1" && message.role === "assistant" && (
                  <div className="flex gap-2 justify-start px-4">
                    <div className="w-10 h-10 flex-shrink-0" />
                    <div className="w-full" style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}>
                      <SmartReview onReviewTopic={handleReviewTopic} onReviewAll={handleReviewAll} />
                    </div>
                  </div>
                )}

                {chatMode === "quiz" &&
                  message.id === "quiz-1" &&
                  message.role === "assistant" &&
                  quizState.currentQuestion === 0 &&
                  !quizState.waitingForAnswer &&
                  !isAppTyping && (
                    <div className="flex justify-center py-4">
                      <Button onClick={onStartQuiz} className="bg-red-500 hover:bg-red-600 text-white">
                        Start Quiz
                      </Button>
                    </div>
                  )}
              </React.Fragment>
            ))}

            {/* Profile Init Offer (Ask mode only) */}
            {chatMode === "ask" && initNeedOffer && initStatus === "offered" && (
              <div className="flex gap-2 justify-start px-4">
                <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                </div>

                <div className="w-full" style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}>
                  <div className="rounded-2xl border bg-card px-4 py-3 space-y-3">
                    <div className="font-semibold">Quick intro so I can personalize your experience</div>
                    <div className="text-sm text-muted-foreground leading-relaxed">
                      I’m Clare, your AI teaching assistant. If you’d like, we can answer a few short questions so I can
                      tailor explanations, pacing, and practice to you. Your answers will be summarized into your Profile Bio
                      and used only inside this platform.
                    </div>
                    <div className="flex gap-2">
                      <Button
                        type="button"
                        onClick={() => {
                          setInitStatus("asking");
                          setInitStep(0);
                          setInitAnswers({});
                          setGeneratedBio("");
                          // Keep focus in the composer for immediate typing
                          setTimeout(() => {
                            const ta = document.querySelector("textarea");
                            (ta as HTMLTextAreaElement | null)?.focus?.();
                          }, 0);
                        }}
                      >
                        Yes — let’s start
                      </Button>
                      <Button
                        type="button"
                        variant="outline"
                        onClick={async () => {
                          try {
                            await fetch("/api/profile/dismiss", {
                              method: "POST",
                              headers: { "Content-Type": "application/json" },
                              body: JSON.stringify({ user_id: currentUserId, days: 7 }),
                            });
                          } catch {}
                          setInitNeedOffer(false);
                          setInitStatus("idle");
                        }}
                      >
                        Maybe later
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Current init question bubble */}
            {chatMode === "ask" && initStatus === "asking" && (
              <div className="flex gap-2 justify-start px-4">
                <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                </div>

                <div
                  className="bg-muted rounded-2xl px-4 py-3 w-full"
                  style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}
                >
                  <div className="text-sm font-medium mb-1">
                    {INIT_QUESTIONS[initStep]?.title}
                  </div>
                  <div className="text-xs text-muted-foreground">
                    {INIT_QUESTIONS[initStep]?.placeholder || "Just type your answer and press Send."}
                  </div>
                  <div className="text-xs text-muted-foreground mt-2">
                    Question {initStep + 1} of {INIT_QUESTIONS.length}
                  </div>
                </div>
              </div>
            )}

            {/* Generating bubble */}
            {chatMode === "ask" && initStatus === "generating" && (
              <div className="flex gap-2 justify-start px-4">
                <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                </div>
                <div className="bg-muted rounded-2xl px-4 py-3">
                  <div className="text-sm">Thanks — I’m generating your Profile Bio now…</div>
                </div>
              </div>
            )}

            {/* Done bubble with bio */}
            {chatMode === "ask" && initStatus === "done" && !!generatedBio && (
              <div className="flex gap-2 justify-start px-4">
                <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                </div>

                <div className="w-full" style={{ maxWidth: "min(770px, calc(100% - 2rem))" }}>
                  <div className="bg-muted rounded-2xl px-4 py-3 space-y-2">
                    <div className="text-sm font-medium">
                      Thank you — I’ve saved this to your Profile Bio.
                    </div>
                    <div className="text-sm whitespace-pre-wrap">{generatedBio}</div>
                    <div className="text-xs text-muted-foreground">
                      You can update it anytime. I’ll use this to adapt explanations, pacing, and practice.
                    </div>
                  </div>
                </div>
              </div>
            )}

            {isAppTyping && (
              <div className="flex gap-2 justify-start px-4">
                <div className="w-10 h-10 rounded-full overflow-hidden bg-white flex items-center justify-center flex-shrink-0">
                  <img src={clareAvatar} alt="Clare" className="w-full h-full object-cover" />
                </div>
                <div className="bg-muted rounded-2xl px-4 py-3">
                  <div className="flex gap-1">
                    <div
                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
                      style={{ animationDelay: "0ms" }}
                    />
                    <div
                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
                      style={{ animationDelay: "150ms" }}
                    />
                    <div
                      className="w-2 h-2 rounded-full bg-muted-foreground/50 animate-bounce"
                      style={{ animationDelay: "300ms" }}
                    />
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Scroll-to-bottom button */}
      {showScrollButton && (
        <div
          className="absolute z-30 left-0 right-0 flex justify-center pointer-events-none"
          style={{ bottom: composerHeight + 16 }}
        >
          <Button
            variant="secondary"
            size="icon"
            className="rounded-full shadow-lg hover:shadow-xl transition-shadow bg-background border border-border pointer-events-auto w-10 h-10"
            onClick={() => scrollToBottom("smooth")}
            title="Scroll to bottom"
          >
            <ArrowDown className="h-5 w-5" />
          </Button>
        </div>
      )}

      {/* Composer */}
      <div ref={composerRef} className="flex-shrink-0 bg-background/95 backdrop-blur-sm z-20 border-t border-border">
        <div className="max-w-4xl mx-auto px-4 py-4">
          {/* Uploaded Files Preview */}
          {(uploadedFiles.length > 0 || pendingFiles.length > 0) && (
            <div className="mb-2 flex flex-wrap gap-2 max-h-32 overflow-y-auto">
              {/* uploaded */}
              {uploadedFiles.map((uf, i) => {
                const key = `${uf.file.name}::${uf.file.size}::${uf.file.lastModified}`;

                const nameLower = uf.file.name.toLowerCase();
                const isImage = [".jpg", ".jpeg", ".png", ".gif", ".webp"].some((e) =>
                  nameLower.endsWith(e)
                );

                const isPdf = nameLower.endsWith(".pdf");
                const isPpt = nameLower.endsWith(".ppt") || nameLower.endsWith(".pptx");
                const fileIcon = isPdf ? pdfIcon : isPpt ? pptIcon : otherIcon;

                const thumbUrl = isImage ? getOrCreate(uf.file) : null;

                return (
                  <div
                    key={key}
                    role="button"
                    tabIndex={0}
                    onClick={() => {
                      setSelectedFile({ file: uf.file, index: i });
                      setShowFileViewer(true);
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault();
                        setSelectedFile({ file: uf.file, index: i });
                        setShowFileViewer(true);
                      }
                    }}
                    className="flex items-center justify-between gap-2 rounded-md border px-3 py-2 cursor-pointer hover:bg-muted/40"
                    title="Click to preview"
                  >
                    {/* Thumbnail (image preview or file icon) */}
                    <div className="h-10 w-10 flex-shrink-0 rounded-lg overflow-hidden border border-border bg-muted">
                      {isImage ? (
                        thumbUrl ? (
                          <img
                            src={thumbUrl}
                            alt={uf.file.name}
                            className="h-full w-full object-cover"
                            draggable={false}
                          />
                        ) : (
                          <div className="h-full w-full flex items-center justify-center">
                            <ImageIcon className="h-4 w-4 text-muted-foreground" />
                          </div>
                        )
                      ) : (
                        <img
                          src={fileIcon}
                          alt={uf.file.name}
                          className="h-full w-full object-contain p-1"
                          draggable={false}
                        />
                      )}
                    </div>

                    <div className="min-w-0 flex-1">
                      <div className="truncate text-sm font-medium">{uf.file.name}</div>
                      <div className="text-xs text-muted-foreground">{uf.type}</div>
                    </div>

                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation(); // don't open viewer
                        onRemoveFile(i);
                      }}
                      title="Remove"
                      disabled={initBlockActions}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                );
              })}

              {/* pending */}
              {pendingFiles.map((p, idx) => (
                <FileChip
                  key={`p-${p.file.name}-${p.file.size}-${p.file.lastModified}`}
                  file={p.file}
                  index={idx}
                  source="pending"
                />
              ))}
            </div>
          )}

          <form
            onSubmit={handleSubmit as any}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
            className={isDragging ? "opacity-75" : ""}
          >
            <div className="relative">
              {/* Mode Selector + Upload */}
              <div className="absolute bottom-3 left-2 flex items-center gap-1 z-10">
                {chatMode === "ask" && (
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="gap-1.5 h-8 px-2 text-xs hover:bg-muted/50"
                        disabled={!isLoggedIn || initBlockActions}
                        type="button"
                      >
                        <span>{modeLabels[learningMode]}</span>
                        <svg
                          className="h-3 w-3 opacity-50"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M19 9l-7 7-7-7"
                          />
                        </svg>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="start" className="w-56">
                      <DropdownMenuItem
                        onClick={() => onLearningModeChange("general")}
                        className={learningMode === "general" ? "bg-accent" : ""}
                      >
                        <div className="flex flex-col">
                          <span className="font-medium">General</span>
                          <span className="text-xs text-muted-foreground">
                            Answer various questions (context required)
                          </span>
                        </div>
                      </DropdownMenuItem>

                      <DropdownMenuItem
                        onClick={() => onLearningModeChange("concept")}
                        className={learningMode === "concept" ? "bg-accent" : ""}
                      >
                        <div className="flex flex-col">
                          <span className="font-medium">Concept Explainer</span>
                          <span className="text-xs text-muted-foreground">
                            Get detailed explanations of concepts
                          </span>
                        </div>
                      </DropdownMenuItem>

                      <DropdownMenuItem
                        onClick={() => onLearningModeChange("socratic")}
                        className={learningMode === "socratic" ? "bg-accent" : ""}
                      >
                        <div className="flex flex-col">
                          <span className="font-medium">Socratic Tutor</span>
                          <span className="text-xs text-muted-foreground">
                            Learn through guided questions
                          </span>
                        </div>
                      </DropdownMenuItem>

                      <DropdownMenuItem
                        onClick={() => onLearningModeChange("exam")}
                        className={learningMode === "exam" ? "bg-accent" : ""}
                      >
                        <div className="flex flex-col">
                          <span className="font-medium">Exam Prep</span>
                          <span className="text-xs text-muted-foreground">
                            Practice with quiz questions
                          </span>
                        </div>
                      </DropdownMenuItem>

                      <DropdownMenuItem
                        onClick={() => onLearningModeChange("assignment")}
                        className={learningMode === "assignment" ? "bg-accent" : ""}
                      >
                        <div className="flex flex-col">
                          <span className="font-medium">Assignment Helper</span>
                          <span className="text-xs text-muted-foreground">
                            Get help with assignments
                          </span>
                        </div>
                      </DropdownMenuItem>

                      <DropdownMenuItem
                        onClick={() => onLearningModeChange("summary")}
                        className={learningMode === "summary" ? "bg-accent" : ""}
                      >
                        <div className="flex flex-col">
                          <span className="font-medium">Quick Summary</span>
                          <span className="text-xs text-muted-foreground">
                            Get concise summaries
                          </span>
                        </div>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                )}

                <Button
                  type="button"
                  size="icon"
                  variant="ghost"
                  disabled={
                    !isLoggedIn ||
                    initBlockActions ||
                    (chatMode === "quiz" && !quizState.waitingForAnswer)
                  }
                  className="h-8 w-8 hover:bg-muted/50"
                  onClick={() => fileInputRef.current?.click()}
                  title="Upload files"
                >
                  <Upload className="h-4 w-4" />
                </Button>
              </div>

              <Textarea
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={handleKeyDown}
                placeholder={
                  initPlaceholder ??
                  (!isLoggedIn
                    ? "Please log in on the right to start chatting..."
                    : chatMode === "quiz"
                    ? quizState.waitingForAnswer
                      ? "Type your answer here..."
                      : quizState.currentQuestion > 0
                      ? "Click 'Next Question' to continue..."
                      : "Click 'Start Quiz' to begin..."
                    : spaceType === "group"
                    ? "Type a message or drag files here... (mention @Clare to get AI assistance)"
                    : learningMode === "general"
                    ? "Ask me anything! Please provide context about your question..."
                    : "Ask Clare anything about the course or drag files here...")
                }
                disabled={
                  !isLoggedIn ||
                  initInputLocked || // key fix: DO NOT lock input during "asking"
                  (chatMode === "quiz" && !quizState.waitingForAnswer)
                }
                className={`min-h-[80px] pl-4 pr-20 resize-none bg-background border-2 ${
                  isDragging ? "border-primary border-dashed" : "border-border"
                }`}
              />

              <div className="absolute bottom-2 right-2 flex gap-1">
                <Button
                  type="submit"
                  size="icon"
                  disabled={
                    (!input.trim() && uploadedFiles.length === 0) ||
                    !isLoggedIn ||
                    initInputLocked
                  }
                  className="h-8 w-8 rounded-full"
                >
                  <Send className="h-4 w-4" />
                </Button>
              </div>

              <input
                ref={fileInputRef}
                type="file"
                multiple
                accept=".pdf,.docx,.pptx,.doc,.ppt,.jpg,.jpeg,.png,.gif,.webp"
                onChange={handleFileSelect}
                className="hidden"
                disabled={!isLoggedIn || initBlockActions}
              />
            </div>
          </form>
        </div>
      </div>

      {/* File Viewer Dialog */}
      <Dialog
        open={showFileViewer}
        onOpenChange={(open) => {
          setShowFileViewer(open);
          if (!open) setSelectedFile(null);
        }}
      >
        <DialogContent className="max-w-4xl max-h-[85vh] flex flex-col overflow-hidden">
          <DialogHeader className="min-w-0 flex-shrink-0">
            <DialogTitle
              className="pr-8 break-words break-all overflow-wrap-anywhere leading-relaxed"
              style={{
                wordBreak: "break-all",
                overflowWrap: "anywhere",
                maxWidth: "100%",
                lineHeight: "1.6",
              }}
            >
              {selectedFile?.file.name}
            </DialogTitle>
            <DialogDescription>
              File size: {selectedFile ? formatFileSize(selectedFile.file.size) : ""}
            </DialogDescription>
          </DialogHeader>

          <div className="flex-1 min-h-0 overflow-y-auto mt-4">
            {selectedFile && <FileViewerContent file={selectedFile.file} />}
          </div>
        </DialogContent>
      </Dialog>

      {/* Start New Conversation Confirmation Dialog */}
      <AlertDialog open={showClearDialog} onOpenChange={onCancelClear}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Start New Conversation</AlertDialogTitle>
            <AlertDialogDescription>
              Would you like to save the current chat before starting a new conversation?
            </AlertDialogDescription>

            <Button
              variant="ghost"
              size="icon"
              className="absolute right-4 top-4 h-6 w-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
              onClick={onCancelClear}
            >
              <X className="h-4 w-4" />
              <span className="sr-only">Close</span>
            </Button>
          </AlertDialogHeader>

          <AlertDialogFooter className="flex-col sm:flex-row gap-2 sm:justify-end">
            <Button variant="outline" onClick={() => onConfirmClear(false)} className="sm:flex-1 sm:max-w-[200px]">
              Start New (Don't Save)
            </Button>
            <AlertDialogAction onClick={() => onConfirmClear(true)} className="sm:flex-1 sm:max-w-[200px]">
              Save & Start New
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* Download Preview Dialog */}
      <Dialog open={showDownloadDialog} onOpenChange={setShowDownloadDialog}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>Download this chat</DialogTitle>
            <DialogDescription>Preview and copy before downloading.</DialogDescription>
          </DialogHeader>

          <Tabs
            value={downloadTab}
            onValueChange={(value) => {
              const v = value as "chat" | "summary";
              setDownloadTab(v);
              setDownloadPreview(v === "chat" ? buildPreviewContent() : buildSummaryContent());
              if (v === "summary") setDownloadOptions({ chat: false, summary: true });
              else setDownloadOptions({ chat: true, summary: false });
            }}
            className="w-full"
          >
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="chat">Download chat</TabsTrigger>
              <TabsTrigger value="summary">Summary of the chat</TabsTrigger>
            </TabsList>
          </Tabs>

          <div className="border rounded-lg bg-muted/40 flex flex-col max-h-64">
            <div className="flex items-center justify-between p-4 sticky top-0 bg-muted/40 border-b z-10">
              <span className="text-sm font-medium">Preview</span>
              <Button
                variant="outline"
                size="sm"
                className="h-7 px-2 text-xs gap-1.5"
                onClick={handleCopyPreview}
                title="Copy preview"
              >
                <Copy className="h-3 w-3" />
                Copy
              </Button>
            </div>
            <div className="text-sm text-foreground overflow-y-auto flex-1 p-4">
              <div className="whitespace-pre-wrap">{downloadPreview}</div>
            </div>
          </div>

          <div className="space-y-3">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="download-chat"
                checked={downloadOptions.chat}
                onCheckedChange={(checked) => setDownloadOptions({ ...downloadOptions, chat: checked === true })}
              />
              <label htmlFor="download-chat" className="text-sm font-medium cursor-pointer">
                Download chat
              </label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox
                id="download-summary"
                checked={downloadOptions.summary}
                onCheckedChange={(checked) => setDownloadOptions({ ...downloadOptions, summary: checked === true })}
              />
              <label htmlFor="download-summary" className="text-sm font-medium cursor-pointer">
                Download summary
              </label>
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setShowDownloadDialog(false)}>
              Cancel
            </Button>
            <Button onClick={handleDownloadFile}>Download</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Share Dialog */}
      <Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>
        <DialogContent className="w-[600px] max-w-[600px] sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>Share Conversation</DialogTitle>
            <DialogDescription>Select how you want to share.</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-2">
              <Label>Copy Link</Label>
              <div className="flex gap-2 items-center">
                <Input value={shareLink} readOnly className="flex-1" />
                <Button variant="secondary" onClick={handleCopyShareLink}>
                  Copy
                </Button>
              </div>
              <p className="text-xs text-muted-foreground">Temporary link valid for this session.</p>
            </div>

            <div className="space-y-2">
              <Label>Send to Workspace</Label>
              <Select value={targetWorkspaceId} onValueChange={setTargetWorkspaceId}>
                <SelectTrigger className="w-full">
                  <SelectValue placeholder="Choose a workspace" />
                </SelectTrigger>
                <SelectContent>
                  {workspaces.map((w) => (
                    <SelectItem key={w.id} value={w.id}>
                      {w.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-muted-foreground">
                Sends this conversation to the selected workspace&apos;s Saved Files.
              </p>
              <Button onClick={handleShareSendToWorkspace} className="w-full">
                Send
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

      {/* Delete File Confirmation Dialog */}
      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete File</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete &quot;
              {fileToDelete !== null ? uploadedFiles[fileToDelete]?.file.name : ""}
              &quot;? This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                if (fileToDelete !== null) {
                  onRemoveFile(fileToDelete);
                  setFileToDelete(null);
                }
                setShowDeleteDialog(false);
              }}
            >
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* File Type Selection Dialog */}
      {showTypeDialog && (
        <Dialog open={showTypeDialog} onOpenChange={setShowTypeDialog}>
          <DialogContent className="sm:max-w-[425px]" style={{ zIndex: 99999 }}>
            <DialogHeader>
              <DialogTitle>Select File Types</DialogTitle>
              <DialogDescription>Please select the type for each file you are uploading.</DialogDescription>
            </DialogHeader>

            <div className="space-y-3 max-h-64 overflow-y-auto">
              {pendingFiles.map((pendingFile, index) => {
                const Icon = getFileIcon(pendingFile.file.name);
                return (
                  <div key={index} className="p-3 bg-muted rounded-md space-y-2">
                    <div className="flex items-center gap-2 group">
                      <Icon className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                      <div className="flex-1 min-w-0">
                        <p className="text-sm truncate">{pendingFile.file.name}</p>
                        <p className="text-xs text-muted-foreground">{formatFileSize(pendingFile.file.size)}</p>
                      </div>
                    </div>

                    <div className="space-y-1">
                      <label className="text-xs text-muted-foreground">File Type</label>
                      <Select
                        value={pendingFile.type}
                        onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
                      >
                        <SelectTrigger className="h-8 text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent className="!z-[100000] !bg-background !text-foreground" style={{ zIndex: 100000 }}>
                          <SelectItem value="syllabus">Syllabus</SelectItem>
                          <SelectItem value="lecture-slides">Lecture Slides / PPT</SelectItem>
                          <SelectItem value="literature-review">Literature Review / Paper</SelectItem>
                          <SelectItem value="other">Other Course Document</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                );
              })}
            </div>

            <DialogFooter>
              <Button variant="outline" onClick={handleCancelUpload}>
                Cancel
              </Button>
              <Button onClick={handleConfirmUpload}>Upload</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
    </div>
  );
}