"use client";

import { AppShell } from "@/components/AppShell";
import { PageHeader } from "@/components/ui/PageHeader";
import { SectionHeader } from "@/components/ui/SectionHeader";
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="flex min-h-[calc(100vh-var(--chrome,4rem))] flex-col">
        <div className="px-6 pt-6">
          <PageHeader
            title="文风指纹"
            description="上传你的代表作样本，让 AI 学出十六维文风指纹，作为后续写作与第四审的对照标尺。"
          />
        </div>
        <div className="flex flex-1 flex-col lg:grid lg:min-h-0 lg:grid-cols-[28rem_1fr]">
          <section className="flex flex-col border-line bg-panel px-6 py-6 lg:overflow-auto lg:border-r">
            <SectionHeader title="学习文风" className="mb-3" />
            <StyleUpload
              busy={learn.busy}
              pollStatus={
                learn.pollStatus === "idle" ? "idle" : learn.pollStatus
              }
              progress={learn.progress}
              hasFingerprint={learn.fingerprint !== null}
              onLearn={onLearn}
            />
          </section>

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