'use client';

import { useState, useCallback } from 'react';

interface StatusChangeModalProps {
  isOpen: boolean;
  orderNumber: string;
  currentStatus: string;
  onClose: () => void;
  onConfirm: (newStatus: string, note: string) => void;
}

const STATUS_FLOW: Record<string, { forward: string[]; backward: string[] }> = {
  pending: { forward: ['confirmed', 'cancelled'], backward: [] },
  confirmed: { forward: ['shipped', 'cancelled'], backward: ['pending'] },
  shipped: { forward: ['delivered', 'cancelled'], backward: ['pending', 'confirmed'] },
  delivered: { forward: ['returned'], backward: ['pending', 'confirmed', 'shipped'] },
  returned: { forward: ['refunded'], backward: [] },
  refunded: { forward: [], backward: [] },
  cancelled: { forward: [], backward: ['pending'] },
};

const STATUS_LABELS: Record<string, string> = {
  pending: 'Pending',
  confirmed: 'Confirmed',
  shipped: 'Shipped',
  delivered: 'Delivered',
  cancelled: 'Cancelled',
  returned: 'Returned',
  refunded: 'Refunded',
};

export default function StatusChangeModal({
  isOpen, orderNumber, currentStatus, onClose, onConfirm,
}: StatusChangeModalProps) {
  const [selectedStatus, setSelectedStatus] = useState('');
  const [note, setNote] = useState('');
  const [loading, setLoading] = useState(false);
  const [direction, setDirection] = useState<'forward' | 'backward'>('forward');

  const flow = STATUS_FLOW[currentStatus];
  const forwardStatuses = flow?.forward || [];
  const backwardStatuses = flow?.backward || [];

  const handleConfirm = useCallback(async () => {
    if (!selectedStatus) return;
    setLoading(true);
    await onConfirm(selectedStatus, note);
    setLoading(false);
    setSelectedStatus('');
    setNote('');
    setDirection('forward');
  }, [selectedStatus, note, onConfirm]);

  const handleClose = useCallback(() => {
    setSelectedStatus('');
    setNote('');
    setDirection('forward');
    onClose();
  }, [onClose]);

  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)',
        boxShadow: 'var(--shadow-card-lg)',
      }}>
        <h3 className="text-lg font-semibold mb-2" style={{ color: 'var(--color-text)' }}>
          Update Order Status
        </h3>
        <p className="text-sm mb-4" style={{ color: 'var(--color-text-secondary)' }}>
          Order: <strong>{orderNumber}</strong> | Current: <strong className="capitalize">{STATUS_LABELS[currentStatus]}</strong>
        </p>

        {/* Direction Tabs */}
        {forwardStatuses.length > 0 && backwardStatuses.length > 0 && (
          <div className="flex gap-1 mb-3">
            <button
              onClick={() => { setDirection('forward'); setSelectedStatus(''); }}
              className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${direction === 'forward' ? 'text-white' : ''}`}
              style={{
                background: direction === 'forward' ? 'var(--color-cta)' : 'var(--color-surface-alt)',
                color: direction === 'forward' ? 'white' : 'var(--color-text-secondary)',
              }}
            >
              Next Status
            </button>
            <button
              onClick={() => { setDirection('backward'); setSelectedStatus(''); }}
              className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${direction === 'backward' ? 'text-white' : ''}`}
              style={{
                background: direction === 'backward' ? 'var(--color-warning)' : 'var(--color-surface-alt)',
                color: direction === 'backward' ? 'white' : 'var(--color-text-secondary)',
              }}
            >
              Revert Status
            </button>
          </div>
        )}

        {/* Status Dropdown */}
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            New Status
          </label>
          <select
            value={selectedStatus}
            onChange={(e) => setSelectedStatus(e.target.value)}
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none cursor-pointer"
            style={{
              background: 'var(--color-surface-alt)',
              border: '1px solid var(--color-border)',
              color: 'var(--color-text)',
            }}
          >
            <option value="">Select status...</option>
            {direction === 'forward' && forwardStatuses.map((status) => (
              <option key={status} value={status}>{STATUS_LABELS[status]}</option>
            ))}
            {direction === 'backward' && backwardStatuses.map((status) => (
              <option key={status} value={status}>↩ {STATUS_LABELS[status]}</option>
            ))}
          </select>
        </div>

        {/* Note */}
        <div className="mb-6">
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Note
          </label>
          <textarea
            value={note}
            onChange={(e) => setNote(e.target.value)}
            placeholder={
              selectedStatus === 'cancelled' ? 'Cancellation reason is required' :
              selectedStatus === 'returned' ? 'Return reason is required' :
              'Add a note about this status change...'
            }
            rows={3}
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none resize-none"
            style={{
              background: 'var(--color-surface-alt)',
              border: selectedStatus === 'cancelled' && !note ? '1px solid var(--color-danger)' : '1px solid var(--color-border)',
              color: 'var(--color-text)',
            }}
          />
        </div>

        {/* Actions */}
        <div className="flex gap-3 justify-end">
          <button
            onClick={handleClose}
            disabled={loading}
            className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
            style={{
              background: 'var(--color-surface-alt)',
              color: 'var(--color-text)',
              border: '1px solid var(--color-border)',
            }}
          >
            Cancel
          </button>
          <button
            onClick={handleConfirm}
            disabled={loading || !selectedStatus || ((selectedStatus === 'cancelled' || selectedStatus === 'returned') && !note)}
            className="px-4 py-2 rounded-lg text-sm font-medium transition-all disabled:opacity-50"
            style={{ background: 'var(--color-cta)', color: 'white' }}
          >
            {loading ? 'Updating...' : 'Update Status'}
          </button>
        </div>
      </div>
    </div>
  );
}