frontend/src/components/SampleLibrary.tsx

import { useEffect, useState } from "react";
import { listSamples, sampleDownloadUrl } from "@/lib/api";
import type { SampleAudio } from "@/types/inference";
import { useInferenceStore } from "@/store/inferenceStore";
import { cn } from "@/lib/utils";
import { CheckCircle2, Music2 } from "lucide-react";

export default function SampleLibrary() {
  const [samples, setSamples] = useState<SampleAudio[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const audio = useInferenceStore((s) => s.audio);
  const setAudio = useInferenceStore((s) => s.setAudio);

  useEffect(() => {
    let alive = true;
    listSamples()
      .then((r) => {
        if (alive) setSamples(r.samples);
      })
      .catch((e) => {
        if (alive)
          setError(
            e instanceof Error ? e.message : "Could not load sample list."
          );
      })
      .finally(() => alive && setLoading(false));
    return () => {
      alive = false;
    };
  }, []);

  if (loading) {
    return (
      <div className="font-mono text-xs text-ink-dim">loading samples…</div>
    );
  }
  if (error) {
    return <div className="font-mono text-xs text-danger">{error}</div>;
  }

  const reals = samples.filter((s) => s.label === "real");
  const fakes = samples.filter((s) => s.label === "fake");

  return (
    <div>
      <div className="mb-3 flex items-center justify-between">
        <div className="label">sample library</div>
        <span className="font-mono text-[10px] text-ink-mute">
          {samples.length} clips
        </span>
      </div>

      <SampleGroup title="real" tint="cyber" items={reals} audio={audio} setAudio={setAudio} />
      <div className="my-3 border-t border-line/60" />
      <SampleGroup title="fake" tint="danger" items={fakes} audio={audio} setAudio={setAudio} />

      <div className="mt-3 font-mono text-[10px] text-ink-mute">
        Tip: drop your own real-world WAVs into{" "}
        <code className="font-mono">data/sample_audios/</code> to add them here.
      </div>
    </div>
  );
}

function SampleGroup({
  title,
  tint,
  items,
  audio,
  setAudio,
}: {
  title: string;
  tint: "cyber" | "danger";
  items: SampleAudio[];
  audio: ReturnType<typeof useInferenceStore.getState>["audio"];
  setAudio: ReturnType<typeof useInferenceStore.getState>["setAudio"];
}) {
  return (
    <div>
      <div className="mb-1.5 flex items-center gap-1.5">
        <span
          className={cn(
            "h-1.5 w-1.5 rounded-full",
            tint === "danger" ? "bg-danger" : "bg-cyber"
          )}
        />
        <span className="font-mono text-[10px] uppercase tracking-wider text-ink-dim">
          {title} · {items.length}
        </span>
      </div>
      <div className="grid gap-1.5">
        {items.map((s) => {
          const isSelected =
            audio?.kind === "sample" && audio.sampleId === s.sample_id;
          return (
            <button
              key={s.sample_id}
              onClick={() =>
                setAudio({
                  kind: "sample",
                  sampleId: s.sample_id,
                  url: sampleDownloadUrl(s.sample_id),
                })
              }
              className={cn(
                "group flex items-start justify-between gap-2 rounded-md border bg-surface-alt/50 px-2.5 py-2 text-left transition-all duration-150",
                "hover:bg-surface-alt hover:translate-x-0.5",
                isSelected
                  ? tint === "danger"
                    ? "border-danger/60 bg-danger/10"
                    : "border-cyber/60 bg-cyber/10"
                  : "border-line"
              )}
            >
              <div className="flex min-w-0 items-start gap-2">
                <Music2
                  className={cn(
                    "mt-0.5 h-3.5 w-3.5 shrink-0 transition-transform group-hover:scale-110",
                    tint === "danger" ? "text-danger" : "text-cyber"
                  )}
                />
                <div className="min-w-0">
                  <div className="truncate font-mono text-[11px] text-ink">
                    {s.filename.replace(/\.wav$/, "")}
                  </div>
                  <div className="mt-0.5 truncate text-[10px] text-ink-dim">
                    {s.description}
                  </div>
                </div>
              </div>
              {isSelected && (
                <CheckCircle2
                  className={cn(
                    "h-3.5 w-3.5 shrink-0",
                    tint === "danger" ? "text-danger" : "text-cyber"
                  )}
                />
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}