import { useState, type ComponentProps } from "react";
import { X } from "lucide-react";
import { Button } from "@/shared/ui/button";
import { useAnswerViewPersistence, useAnswerViewState } from "../session-state/use-answer-view-state";
import type { AnswerViewStateScope } from "../session-state/answer-view-state-scope";
import { StreamingTokenResponse } from "../components/streaming-token-response";
import { AnswerUiView, type AnswerUiMapTarget } from "./answer-ui-view";
import type { AnswerUiPart } from "./contract";

export function AnswerPartsView({
  parts,
  messageId,
  disabled,
  streaming,
  streamDone,
  persist = false,
  onLocate,
  onSubmit,
}: {
  parts: AnswerUiPart[];
  messageId: string;
  disabled: boolean;
  streaming: boolean;
  streamDone: boolean;
  persist?: boolean;
  onLocate?: (target: AnswerUiMapTarget) => Promise<unknown> | void;
  onSubmit?: (text: string) => Promise<void> | void;
}) {
  const persistence = useAnswerViewPersistence();
  return (
    <div className="flex min-w-0 flex-col gap-5" data-answer-parts>
      {parts.map((part, index) =>
        part.type === "answer-ui" ? (
          <PersistableAnswerUiView
            key={`ui-${part.block.block_id}`}
            block={part.block}
            persistence={persistence}
            active={persist && part.block.phase !== "process"}
            messageId={messageId}
            disabled={disabled}
            onLocate={onLocate}
            onSubmit={onSubmit}
          />
        ) : (
          <StreamingTokenResponse
            key={`text-${index}`}
            className="leading-6"
            content={part.text}
            messageId={`${messageId}-${index}`}
            streamDone={streamDone}
            streaming={streaming}
          />
        )
      )}
    </div>
  );
}


type PersistableProps = ComponentProps<typeof AnswerUiView> & {
  messageId: string;
  active: boolean;
  persistence: { scope: AnswerViewStateScope; sessionId: string } | null;
};
function PersistableAnswerUiView({ persistence, messageId, active, ...props }: PersistableProps) {
  if (!persistence) return <AnswerUiView {...props} />;
  return <SavedAnswerUiView key={`${persistence.scope.scope}:${persistence.sessionId}:${messageId}:${props.block.block_id}`}
    {...props} messageId={messageId} active={active} persistence={persistence} />;
}
function SavedAnswerUiView({ persistence, messageId, active, ...props }: PersistableProps & { persistence: NonNullable<PersistableProps["persistence"]> }) {
  const saved = useAnswerViewState(persistence.scope, persistence.sessionId, messageId, props.block.block_id, props.block.spec, active);
  const [confirmReload, setConfirmReload] = useState(false);
  const label = { loading: "正在恢复交互状态", saving: "正在保存", saved: "已保存", unsaved: "未保存", conflict: "保存冲突" }[saved.status];
  return <div className="space-y-2" data-answer-state={active ? saved.status : undefined}>
    <AnswerUiView {...props} viewState={saved.state} onViewStateChange={saved.update} />
    {active ? <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
      <span role="status">{label}</span>
      {saved.error ? <span>{saved.error}</span> : null}
      {saved.status === "unsaved" ? <Button size="sm" variant="ghost" onClick={saved.retry}>重试保存</Button> : null}
      {saved.status === "conflict" && !confirmReload ? <>
        <Button size="sm" variant="ghost" onClick={() => setConfirmReload(true)}>重新加载远端</Button>
        <Button size="sm" variant="ghost" onClick={saved.resave}>保留本地并重新保存</Button>
      </> : null}
      {confirmReload ? <div role="alert" className="flex flex-wrap items-center gap-2">
        <span>重新加载将替换本块的本地筛选与表单草稿。</span>
        <Button size="sm" variant="outline" onClick={() => { setConfirmReload(false); saved.reload(); }}>确认替换本地草稿</Button>
        <Button size="icon-sm" variant="ghost" aria-label="取消重新加载" onClick={() => setConfirmReload(false)}><X aria-hidden /></Button>
      </div> : null}
    </div> : null}
  </div>;
}