"use client";

import { AppShell } from "@/components/AppShell";
import type { ProjectResponse } from "@/lib/api/types";
import { useStyleLearn } from "@/lib/style/useStyleLearn";
import type { Fingerprint, StyleLearnMode } from "@/lib/style/style";
import { FingerprintView } from "./FingerprintView";
import { StyleUpload } from "./StyleUpload";

interface StylePageProps {
  project: ProjectResponse;
  initialFingerprint: Fingerprint | null;
}

// 文风页（UX §6.9）：左侧上传样本学文风，右侧展示 16 维指纹 + 证据。
export function StylePage({ project, initialFingerprint }: StylePageProps) {
  const learn = useStyleLearn(initialFingerprint);

  const onLearn = (samples: string[], mode: StyleLearnMode): void => {
    void learn.learn(project.id, samples, mode);
  };

  return (
    <AppShell
      title={`〈${project.title}〉`}
      subtitle="文风指纹"
      projectId={project.id}
      activeNav="style"
    >
      <div className="grid h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 lg:grid-cols-[28rem_1fr]">
        <section className="flex flex-col overflow-auto border-r border-line bg-panel px-6 py-6">
          <h1 className="mb-3 font-serif text-lg text-ink">学习文风</h1>
          <StyleUpload
            busy={learn.busy}
            pollStatus={learn.pollStatus === "idle" ? "idle" : learn.pollStatus}
            progress={learn.progress}
            hasFingerprint={learn.fingerprint !== null}
            onLearn={onLearn}
          />
        </section>

        <section className="overflow-auto bg-bg px-6 py-6">
          <FingerprintView fingerprint={learn.fingerprint} />
        </section>
      </div>
    </AppShell>
  );
}