'use client';

import { ThumbsUp, ThumbsDown } from 'lucide-react';
import { useChatStore } from '@/lib/store/chat-store';
import { CopyButton } from './CopyButton';

interface DraftActionsProps {
  onApprove: () => void;
  onReject: () => void;
  onCopyOnly?: () => void;
}

/**
 * DraftActions Component - Action bar with Thumbs Up/Down buttons
 *
 * Story 2.4: Extended with Copy Only button for copying draft without completing.
 *
 * Sticky footer with approve (copy + complete), copy only, and reject (regenerate) actions.
 * - Minimum 44px touch targets for accessibility (WCAG AA)
 * - Proper ARIA labels for screen readers
 * - Sticky positioning to stay visible when scrolling long drafts
 */
export function DraftActions({ onApprove, onReject, onCopyOnly, children }: DraftActionsProps & { children?: React.ReactNode }) {
  const currentDraft = useChatStore((s) => s.currentDraft);
  const startRefinement = useChatStore((s) => s.startRefinement);

  const handleReject = () => {
    // Trigger refinement flow (Story 2.3)
    if (currentDraft && startRefinement) {
      startRefinement(currentDraft.id);
    }
    // Then call the onReject callback to close the sheet
    onReject();
  };

  return (
    <nav className="sticky bottom-0 flex gap-3 p-4 bg-white border-t border-slate-200">
      {/* Optional additional actions (e.g. Delete) */}
      {children}

      {/* Thumbs Down - Request changes (Story 2.3: triggers refinement) */}
      <button
        onClick={handleReject}
        type="button"
        className="flex-1 min-h-[44px] px-4 py-3 border border-slate-300 rounded-md text-slate-700 hover:bg-slate-50 transition-colors flex items-center justify-center gap-2"
        aria-label="Request changes to this draft"
      >
        <ThumbsDown className="w-5 h-5" aria-hidden="true" />
        <span>Not Quite</span>
      </button>

      {/* Copy Only - Copy without completing (Story 2.4) */}
      {onCopyOnly && currentDraft && (
        <CopyButton
          draftId={currentDraft.id}
          onCopy={onCopyOnly}
          variant="toolbar"
          label="Just Copy"
        />
      )}

      {/* Thumbs Up - Approve, Copy, and Complete */}
      <button
        onClick={onApprove}
        type="button"
        className="flex-1 min-h-[44px] px-4 py-3 bg-slate-800 hover:bg-slate-700 text-white rounded-md transition-colors flex items-center justify-center gap-2"
        aria-label="Approve, copy to clipboard, and mark as completed"
      >
        <ThumbsUp className="w-5 h-5" aria-hidden="true" />
        <span>Approve</span>
      </button>
    </nav>
  );
}
