import type { BrowserSessionView } from "@umt/contracts";
import { Download } from "lucide-react";
import { useState } from "react";
import { EntityPicker, type PickedEntity } from "~/components/library/identity-entity-picker.tsx";
import { Button } from "~/components/ui/button.tsx";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "~/components/ui/dialog.tsx";
import { SubtitleDialog } from "./subtitle-dialog.tsx";

/**
 * 字幕站的原站视图:人在浏览器里打开一条字幕的详情页(验证码已在浏览器里过)→「下载当前字幕」→ 选作品 →
 * 补字幕对话框自动下载这条字幕、按季集配对到视频,可改写到哪个视频后写入。
 */
export function SubtitleFromPage({ session }: { session: BrowserSessionView }) {
  const [picking, setPicking] = useState(false);
  const [entity, setEntity] = useState<PickedEntity | null>(null);
  const [writing, setWriting] = useState<PickedEntity | null>(null);
  return (
    <>
      <Button size="sm" disabled={session.controller === "closed"} onClick={() => setPicking(true)}>
        <Download />
        下载当前字幕
      </Button>
      <Dialog open={picking} onOpenChange={setPicking}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>下载当前字幕</DialogTitle>
            <DialogDescription>
              先在原站视图里打开一条字幕的详情页。选这条字幕属于哪部作品，下一步再选写到哪个视频。
            </DialogDescription>
          </DialogHeader>
          <EntityPicker value={entity} onChange={setEntity} />
          <DialogFooter>
            <Button
              disabled={!entity}
              onClick={() => {
                setWriting(entity);
                setPicking(false);
              }}
            >
              下载并配对
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      {writing ? (
        <SubtitleDialog
          key={writing.id}
          entityId={writing.id}
          title={writing.title}
          fromSession={session.id}
          open
          onOpenChange={(o) => !o && setWriting(null)}
        />
      ) : null}
    </>
  );
}