// frontend/components/inbox/CaptureRow.tsx
"use client";
import { Icon } from "@/components/Icon";
import type { IconName } from "@/components/icons/paths";
import type { UiInboxItem } from "@/lib/types";
import ReasonLine from "./ReasonLine";
import RouteChips from "./RouteChips";

export default function CaptureRow({
  item: c,
  onConfirm,
  onReType,
}: {
  item: UiInboxItem;
  onConfirm: (id: string) => void;
  onReType: (id: string) => void;
}) {
  const kindIcon: IconName = c.kind === "voice" ? "mic" : c.kind === "image" ? "image" : "pen";
  const canAct = c.status === "classified"; // 원본의 new(분류 완료, 액션 가능)

  return (
    <div className={"sb-cap" + (c.fresh ? " fresh" : "")}>
      <div className={"cap-k " + c.kind}>
        <Icon name={kindIcon} />
      </div>
      <div className="sb-body">
        <div className="sb-raw">{c.raw}</div>

        {c.status === "thinking" ? (
          <div className="sb-think" role="status" aria-live="polite">
            <span className="tdot" />
            <span className="tdot" />
            <span className="tdot" />
            아리가 분류하고 있어요
          </div>
        ) : c.status === "error" ? (
          <div className="sb-err" role="alert">
            분류에 실패했어요.{" "}
            <button className="sb-retry" onClick={() => onReType(c.id)}>
              다시 시도
            </button>
          </div>
        ) : c.classification ? (
          <>
            <RouteChips r={c.classification} editable={canAct} onReType={() => onReType(c.id)} />
            <ReasonLine reason={c.classification.reason} fallbackUsed={c.fallbackUsed} />
            {canAct && (
              <div className="sb-acts">
                <button className="sb-ok" onClick={() => onConfirm(c.id)}>
                  <Icon name="tick" w={3} />
                  좋아요, 그렇게 해줘
                </button>
                <button className="sb-alt" onClick={() => onReType(c.id)}>
                  <Icon name="swap" />
                  다르게 분류
                </button>
              </div>
            )}
          </>
        ) : null}
      </div>
      <span className="cap-time">
        {c.status === "confirmed" ? (
          <span className="sb-done">
            <Icon name="tick" w={3} />
          </span>
        ) : (
          c.time
        )}
      </span>
    </div>
  );
}