veza/apps/web/src/components/commerce/modals/RefundRequestModal.tsx

import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { X, RefreshCcw, UploadCloud } from 'lucide-react';
import { useToast } from '../../../components/feedback/ToastProvider';

interface RefundRequestModalProps {
  orderId: string;
  onClose: () => void;
}

export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
  orderId,
  onClose,
}) => {
  const { addToast } = useToast();
  const [reason, setReason] = useState('Duplicate Purchase');
  const [details, setDetails] = useState('');

  const handleSubmit = () => {
    addToast(`Refund request submitted for Order #${orderId}`, 'success');
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[400] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-background/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        <div className="p-4 border-b border-border bg-muted flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <RefreshCcw className="w-4 h-4 text-warning" /> Request Refund
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
          </button>
        </div>

        <div className="p-6 space-y-4">
          <p className="text-sm text-muted-foreground">
            Refund requests are subject to approval. Please provide details
            below for Order{' '}
            <span className="font-mono text-white">#{orderId}</span>.
          </p>

          <div>
            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
              Reason
            </label>
            <select
              className="w-full bg-muted border border-border rounded-lg px-4 py-2.5 text-white focus:border-primary outline-none"
              value={reason}
              onChange={(e) => setReason(e.target.value)}
            >
              <option>Duplicate Purchase</option>
              <option>Accidental Purchase</option>
              <option>Quality Issue / Corrupted File</option>
              <option>Other</option>
            </select>
          </div>

          <div>
            <label className="block text-xs font-bold text-muted-foreground uppercase mb-2">
              Details
            </label>
            <textarea
              className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-primary outline-none text-sm resize-none h-24"
              placeholder="Please explain why you are requesting a refund..."
              value={details}
              onChange={(e) => setDetails(e.target.value)}
            />
          </div>

          <div className="border-2 border-dashed border-border rounded-lg p-6 flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-border cursor-pointer transition-colors">
            <UploadCloud className="w-8 h-8 mb-2" />
            <span className="text-xs font-bold uppercase">
              Upload Evidence (Optional)
            </span>
          </div>
        </div>

        <div className="p-4 border-t border-border bg-muted flex justify-end gap-4">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button variant="primary" onClick={handleSubmit}>
            Submit Request
          </Button>
        </div>
      </div>
    </div>
  );
};