src/components/study-chat/StudyChatContextPanel.tsx

"use client";

import { BookOpen, FileQuestion, Languages, Layers3, MessageSquareText, PenLine, Upload, Video } from "lucide-react";
import type { ApiDocument } from "@/lib/api/types";
import type { StudyIntent } from "@/lib/study-intents";

type ContextAction = {
  label: string;
  intent: StudyIntent;
  prompt: string;
  icon: typeof BookOpen;
};

const contextActions: ContextAction[] = [
  { label: "Explain in Malayalam", intent: "teach_topic", prompt: "Explain this in Malayalam + English: ", icon: Languages },
  { label: "Make it simpler", intent: "teach_topic", prompt: "Make this simpler: ", icon: BookOpen },
  { label: "Give exam answer", intent: "generate_exam_answer", prompt: "Give a mark-wise exam answer for: ", icon: PenLine },
  { label: "Generate flashcards", intent: "generate_flashcards", prompt: "Generate flashcards for: ", icon: Layers3 },
  { label: "Give PYQ questions", intent: "analyze_pyq", prompt: "Give exam-relevant PYQ questions for: ", icon: FileQuestion },
  { label: "Correct my answer", intent: "generate_exam_answer", prompt: "Correct this answer and show missing keywords: ", icon: PenLine },
  { label: "Create video plan", intent: "create_video_plan", prompt: "Create a video plan for: ", icon: Video },
];

export function StudyChatContextPanel({
  selectedDocuments,
  onAction,
  onUpload,
}: {
  selectedDocuments: ApiDocument[];
  onAction: (intent: StudyIntent, prompt: string) => void;
  onUpload: () => void;
}) {
  const currentSubject = selectedDocuments[0]?.subject ?? "Not fixed";
  const currentClass = selectedDocuments[0]?.syllabus ?? "Student-controlled chat";

  return (
    <div className="space-y-3">
      <div className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-3">
        <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/34">Current context</p>
        <dl className="mt-3 space-y-2 text-xs">
          <div className="flex justify-between gap-3">
            <dt className="text-white/38">Class</dt>
            <dd className="text-right font-semibold text-white/74">{currentClass}</dd>
          </div>
          <div className="flex justify-between gap-3">
            <dt className="text-white/38">Subject</dt>
            <dd className="text-right font-semibold text-white/74">{currentSubject}</dd>
          </div>
        </dl>
        <p className="mt-3 text-[11px] leading-4 text-white/42">
          Study Chat answers what you ask. It does not replace the official Tuition class.
        </p>
      </div>

      <div className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-3">
        <div className="flex items-center justify-between gap-2">
          <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/34">Materials</p>
          <button
            type="button"
            onClick={onUpload}
            className="inline-flex items-center gap-1 rounded-lg border border-white/[0.1] bg-white/[0.04] px-2 py-1 text-[10px] font-semibold text-white/55 transition hover:text-white"
          >
            <Upload className="size-3" />
            Upload
          </button>
        </div>
        <div className="mt-3 space-y-2">
          {selectedDocuments.length > 0 ? (
            selectedDocuments.slice(0, 4).map((document) => (
              <div key={document.id} className="rounded-xl border border-white/[0.06] bg-black/30 p-2">
                <p className="truncate text-xs font-semibold text-white/76">{document.title || document.file_name}</p>
                <p className="mt-1 truncate text-[11px] text-white/34">{document.subject ?? "Study material"}</p>
              </div>
            ))
          ) : (
            <p className="rounded-xl border border-dashed border-white/[0.08] bg-black/25 p-3 text-xs leading-5 text-white/42">
              No material selected. You can still ask general academic questions.
            </p>
          )}
        </div>
      </div>

      <div className="rounded-2xl border border-white/[0.07] bg-white/[0.025] p-3">
        <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-white/34">Quick prompts</p>
        <div className="mt-3 grid gap-2">
          {contextActions.map((action) => {
            const Icon = action.icon;
            return (
              <button
                key={action.label}
                type="button"
                onClick={() => onAction(action.intent, action.prompt)}
                className="flex min-h-9 items-center gap-2 rounded-xl border border-white/[0.075] bg-black/25 px-2.5 text-left text-xs font-semibold text-white/62 transition hover:border-white/[0.16] hover:bg-white/[0.04] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/22"
              >
                <Icon className="size-3.5 shrink-0" />
                <span>{action.label}</span>
              </button>
            );
          })}
        </div>
      </div>

      <div className="rounded-2xl border border-white/[0.07] bg-white/[0.02] p-3">
        <div className="flex items-start gap-2">
          <MessageSquareText className="mt-0.5 size-4 shrink-0 text-white/48" />
          <p className="text-xs leading-5 text-white/46">
            For a different chapter, ask here. Tuition Mode keeps DocDoe&apos;s official class unchanged.
          </p>
        </div>
      </div>
    </div>
  );
}