src/components/study-chat/PyqAnalysisCard.tsx

"use client";

import { GraduationCap } from "lucide-react";
import type { BrainPyqAnalysisOutput } from "@/lib/api/types";
import type { StudyIntent } from "@/lib/study-intents";
import type { StudyCardMeta } from "./types";
import { RichStudyCard, Section, TrustFooter, FollowUpActions } from "./StudyCardPrimitives";

type CardAction = (intent: StudyIntent, prompt: string) => void;

export function PyqAnalysisCard({
  data,
  topic,
  meta,
  onAction,
}: {
  data: BrainPyqAnalysisOutput;
  topic: string;
  meta?: StudyCardMeta;
  onAction: CardAction;
}) {
  return (
    <RichStudyCard icon={GraduationCap} title="PYQ Pattern Analysis" eyebrow="Exam coach">
      <div className="text-sm leading-7 text-white/74">
        <p>{data.summary}</p>
      </div>

      <div className="mt-4 grid gap-3 md:grid-cols-2">
        <Section title="Repeated Exam Topics">
          {data.repeated_topics && data.repeated_topics.length > 0 ? (
            <ul className="space-y-2">
              {data.repeated_topics.map((t, idx) => (
                <li key={idx} className="rounded-lg border border-white/[0.04] bg-white/[0.01] p-2 text-xs text-white/70">
                  <span className="font-semibold text-white">{t.topic}</span> ({t.chapter})
                  <div className="mt-1 flex items-center gap-2 text-[10px] text-white/40">
                    <span>Appeared: {t.count} times</span>
                    {t.years_seen && t.years_seen.length ? <span>Years: {t.years_seen.join(", ")}</span> : null}
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-xs text-white/35">No repeated topics identified.</p>
          )}
        </Section>

        <Section title="Marks Distribution">
          {data.marks_distribution && data.marks_distribution.length > 0 ? (
            <ul className="space-y-1.5">
              {data.marks_distribution.map((d, idx) => (
                <li key={idx} className="flex justify-between text-xs text-white/70">
                  <span>{d.marks} Mark Questions</span>
                  <span className="font-semibold text-white">{d.count} ({d.percentage}%)</span>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-xs text-white/35">No distribution data available.</p>
          )}
        </Section>
      </div>

      {data.pattern_note ? (
        <div className="mt-3 rounded-lg border border-white/[0.06] bg-white/[0.02] p-3 text-xs text-white/60">
          <p className="font-semibold text-white/80">Pattern Insights</p>
          <p className="mt-1">{data.pattern_note}</p>
        </div>
      ) : null}

      {data.next_step ? (
        <div className="mt-3 rounded-lg border border-emerald-500/10 bg-emerald-500/[0.03] p-3 text-xs text-emerald-400/80">
          <p className="font-semibold text-emerald-300">Next Recommended Action</p>
          <p className="mt-1">{data.next_step}</p>
        </div>
      ) : null}

      <FollowUpActions topic={topic} onAction={onAction} meta={meta} />
      <TrustFooter meta={meta} />
    </RichStudyCard>
  );
}