// frontend/components/approvals/ApprovalsClient.tsx — 결재함 페이지 (approve-page.jsx 이식)
"use client";
import { Icon } from "@/components/Icon";
import { useApprovals } from "@/lib/hooks/useApprovals";
import { ApprovalCard } from "./ApprovalCard";
import { AutonomyCard } from "./AutonomyCard";

export function ApprovalsClient() {
  const { data, error, setAutonomy, approve, undo, approveAll, reload } = useApprovals();

  if (error) {
    return (
      <div className="dash-error" role="alert">
        <p>결재함을 불러오지 못했어요.</p>
        <button className="mini-cta" onClick={() => reload()}>
          <Icon name="swap" /> 다시 시도
        </button>
      </div>
    );
  }
  if (!data) {
    return (
      <div className="dash-page">
        <div className="pagehead">
          <div>
            <h1 className="ph-title">아리 결재함</h1>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="dash-page">
      <div className="pagehead">
        <div>
          <div className="ph-eyebrow">
            <span>오늘 {data.saved_today} 아껴드렸어요</span>
            <span className="sep" />
            <span>밤사이 자동 처리 {data.auto_count_night}건</span>
          </div>
          <h1 className="ph-title">
            아리 결재함 <em>확인만 하면 끝</em>
          </h1>
        </div>
      </div>
      <div className="work">
        <div className="board">
          <ApprovalCard
            saved={data.saved_today}
            pending={data.pending}
            done={data.done}
            onApprove={approve}
            onUndo={undo}
            onApproveAll={approveAll}
          />
          <AutonomyCard autonomy={data.autonomy} onPick={setAutonomy} />
          {/* 활동 로그 카드 — approve-page.jsx 와 동일 */}
          <section className="card">
            <div className="ch">
              <div className="ico">
                <Icon name="clock" />
              </div>
              <div className="htext">
                <h3>활동 로그</h3>
                <div className="sub">아리가 조용히 한 일</div>
              </div>
              <span className="count">{data.auto_count_night}건</span>
            </div>
            <div className="appr-log pg">
              {data.log.map((l) => (
                <div className="al-row" key={l.id}>
                  <span className="al-time">{l.time}</span>
                  <span className="al-text">{l.text}</span>
                </div>
              ))}
            </div>
            <div className="auton-note dim">
              <Icon name="shield" />
              보내기·결제·삭제는 자율 모드에서도 항상 로그에 강조 표시돼요.
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}