import { useState } from 'react';
import type { RecentThought } from '@/entities/session';
import { InboxList } from '@/features/inbox';

interface InboxToolPanelProps {
  thoughts: RecentThought[];
  onCompleteThought: (thought: RecentThought) => void;
  onDeleteThought: (thought: RecentThought) => void;
  onClear: () => void;
}

export const InboxToolPanel = ({
  thoughts,
  onCompleteThought,
  onDeleteThought,
  onClear,
}: InboxToolPanelProps) => {
  const [confirmOpen, setConfirmOpen] = useState(false);

  return (
    <div className="relative space-y-3.5">
      <div className="flex items-center justify-between gap-2">
        <p className="text-xs text-white/58">나중에 모아보는 읽기 전용 인박스</p>
        <button
          type="button"
          onClick={() => setConfirmOpen(true)}
          className="rounded-full border border-white/20 bg-white/8 px-2.5 py-1 text-[11px] text-white/74 transition-colors hover:bg-white/14 hover:text-white"
        >
          모두 비우기
        </button>
      </div>
      <InboxList
        thoughts={thoughts}
        onCompleteThought={onCompleteThought}
        onDeleteThought={onDeleteThought}
      />

      {confirmOpen ? (
        <div className="absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-slate-950/70 px-3 backdrop-blur-sm">
          <div className="w-full max-w-[272px] rounded-2xl border border-white/14 bg-slate-900/92 p-3.5 shadow-xl shadow-slate-950/45">
            <p className="text-sm font-medium text-white/92">정말 인박스를 비울까요?</p>
            <p className="mt-1 text-[11px] text-white/60">실수라면 토스트에서 실행취소할 수 있어요.</p>
            <div className="mt-3 flex justify-end gap-1.5">
              <button
                type="button"
                onClick={() => setConfirmOpen(false)}
                className="rounded-full border border-white/20 bg-white/8 px-2.5 py-1 text-[11px] text-white/74 transition-colors hover:bg-white/14 hover:text-white"
              >
                취소
              </button>
              <button
                type="button"
                onClick={() => {
                  onClear();
                  setConfirmOpen(false);
                }}
                className="rounded-full border border-rose-200/34 bg-rose-200/16 px-2.5 py-1 text-[11px] text-rose-100/92 transition-colors hover:bg-rose-200/24"
              >
                비우기
              </button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
};