apps/web/src/components/generate/ResultSection.tsx

import { Link } from "@tanstack/react-router";
import { Button } from "@pram/ui/components/button";
import { Card, CardContent, CardHeader } from "@pram/ui/components/card";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import type { GenerationResult } from "@pram/ai";

interface ResultSectionProps {
  result: GenerationResult;
  generatedPackageId: string | null;
  onClear?: () => void;
}

export function ResultSection({ result, generatedPackageId, onClear }: ResultSectionProps) {
  return (
    <div className="mt-16 space-y-6">
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div>
          <h3 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Hasil Generate</h3>
          <p className="text-sm text-[var(--warm-charcoal)] mt-1">
            Paket latihan berhasil dibuat! Soal juga tersimpan di Bank Soal (privat). Jawaban & penjelasan disembunyikan agar latihan tetap fair.
          </p>
        </div>
        <div className="flex gap-3">
          {generatedPackageId && (
            <Link to="/package/$id" params={{ id: generatedPackageId }} onClick={() => onClear?.()}>
              <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
                <MaterialIcon name="play_arrow" className="mr-2" />
                Lihat Paket
              </Button>
            </Link>
          )}
          <Link to="/bank" onClick={() => onClear?.()}>
            <Button className="bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]">
              <MaterialIcon name="database" className="mr-2" />
              Bank Soal
            </Button>
          </Link>
        </div>
      </div>

      <div className="text-sm text-[var(--warm-charcoal)] mb-4 font-mono">
        Model: {result.meta.model} · Tokens: {result.meta.tokensUsed ?? "?"} · Waktu: {result.meta.durationMs}ms · {result.questions.length} soal
      </div>

      {result.questions.map((q, idx) => (
        <Card key={idx} className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
          <CardHeader>
            <div className="flex items-center gap-3">
              <span className="bg-[var(--matcha-600)] text-[var(--pure-white)] w-8 h-8 flex items-center justify-center rounded-[var(--radius-md)] font-bold text-sm">
                {idx + 1}
              </span>
              <span className="text-sm font-bold text-[var(--matcha-600)] uppercase tracking-tighter">
                {q.format.replace(/_/g, " ")}
              </span>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="p-5 rounded-[var(--radius-lg)] bg-[var(--oat-light)] text-[var(--clay-black)] leading-relaxed whitespace-pre-wrap text-base">
              {q.passageText}
            </div>
            <p className="font-medium text-[var(--clay-black)] text-lg">{q.questionText}</p>
            {"options" in q && q.options && (
              <div className="space-y-2">
                {q.format === "matching_pairs"
                  ? q.options.map((opt: { left: string; right?: string }, i: number) => (
                      <div
                        key={i}
                        className="flex items-center p-4 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)]"
                      >
                        <span className="w-6 h-6 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-3 text-xs font-bold text-[var(--warm-charcoal)]">
                          {opt.left?.charAt(0)?.toUpperCase() ?? i + 1}
                        </span>
                        <span className="text-[var(--clay-black)]">{opt.left}</span>
                        {opt.right && (
                          <>
                            <span className="mx-3 text-[var(--warm-silver)]">→</span>
                            <span className="text-[var(--matcha-700)] font-medium">{opt.right}</span>
                          </>
                        )}
                      </div>
                    ))
                  : q.options.map((opt: { key: string; text: string }) => (
                      <div
                        key={opt.key}
                        className="flex items-center p-4 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--oat-light)]"
                      >
                        <span className="w-6 h-6 rounded-full border-2 border-[var(--oat-border)] flex items-center justify-center mr-3 text-xs font-bold text-[var(--warm-charcoal)]">
                          {opt.key}
                        </span>
                        <span className="text-[var(--clay-black)]">{opt.text}</span>
                      </div>
                    ))}
              </div>
            )}
            <div className="flex gap-2 flex-wrap">
              {q.skillTags.map((tag) => (
                <span
                  key={tag}
                  className="px-3 py-1 rounded-full bg-[var(--oat-light)] text-xs font-medium text-[var(--warm-charcoal)]"
                >
                  {tag}
                </span>
              ))}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}