'use client';

import { useState } from 'react';

interface BulkStatusModalProps {
  isOpen: boolean;
  selectedCount: number;
  onClose: () => void;
  onConfirm: (status: string, note: string) => void;
}

const STATUS_OPTIONS = [
  { value: 'pending', label: 'Pending' },
  { value: 'confirmed', label: 'Confirmed' },
  { value: 'shipped', label: 'Shipped' },
  { value: 'delivered', label: 'Delivered' },
  { value: 'cancelled', label: 'Cancelled' },
];

export default function BulkStatusModal({ isOpen, selectedCount, onClose, onConfirm }: BulkStatusModalProps) {
  const [status, setStatus] = useState('');
  const [note, setNote] = useState('');

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}>
      <div className="rounded-lg p-6 w-full max-w-md max-h-[90vh] overflow-y-auto" style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)' }}>
        <h3 className="text-lg font-semibold mb-2">Bulk Status Update</h3>
        <p className="text-sm mb-4" style={{ color: 'var(--color-text-secondary)' }}>
          Update status for {selectedCount} selected orders
        </p>
        <select value={status} onChange={(e) => setStatus(e.target.value)}
          className="w-full px-4 py-2.5 rounded-lg text-sm mb-4"
          style={{ background: 'var(--color-surface-alt)', border: '1px solid var(--color-border)', color: 'var(--color-text)' }}>
          <option value="">Select status...</option>
          {STATUS_OPTIONS.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
        </select>
        <textarea value={note} onChange={(e) => setNote(e.target.value)}
          placeholder="Add note (optional)" rows={3}
          className="w-full px-4 py-2.5 rounded-lg text-sm mb-6 resize-none"
          style={{ background: 'var(--color-surface-alt)', border: '1px solid var(--color-border)', color: 'var(--color-text)' }} />
        <div className="flex gap-3 justify-end">
          <button onClick={onClose}
            className="px-4 py-2 rounded-lg text-sm" style={{ background: 'var(--color-surface-alt)', color: 'var(--color-text)' }}>
            Cancel
          </button>
          <button onClick={() => status && onConfirm(status, note)} disabled={!status}
            className="px-4 py-2 rounded-lg text-sm text-white disabled:opacity-50"
            style={{ background: 'var(--color-cta)' }}>
            Update {selectedCount} Orders
          </button>
        </div>
      </div>
    </div>
  );
}