// /media/hf/data/projects/Dawinder/transport/components/drivers/AdvanceModal.tsx
import React, { useState } from 'react';
import { Driver } from '@/types';
import { X } from 'lucide-react';

interface AdvanceModalProps {
  driver: Driver;
  onClose: () => void;
}

export default function AdvanceModal({ driver, onClose }: AdvanceModalProps) {
  const [type, setType] = useState('trip');
  const [amount, setAmount] = useState('');
  const [note, setNote] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Simulate submit
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="bg-surface border border-border rounded-xl shadow-xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-200">
        <div className="flex justify-between items-center p-5 border-b border-border">
          <h2 className="text-xl font-bold text-text-primary">Issue Advance</h2>
          <button onClick={onClose} className="text-text-muted hover:text-text-primary transition-colors">
            <X size={20} />
          </button>
        </div>
        
        <form onSubmit={handleSubmit} className="p-5 space-y-4">
          <div>
            <label className="block text-sm font-medium text-text-muted mb-1">Driver</label>
            <div className="w-full px-4 py-2.5 bg-background border border-border rounded-lg text-text-primary opacity-70">
              {driver.name}
            </div>
          </div>
          
          <div>
            <label className="block text-sm font-medium text-text-muted mb-2">Advance Type</label>
            <div className="flex space-x-4">
              <label className="flex items-center space-x-2 cursor-pointer">
                <input 
                  type="radio" 
                  name="type" 
                  value="trip" 
                  checked={type === 'trip'} 
                  onChange={(e) => setType(e.target.value)}
                  className="text-primary focus:ring-primary bg-input border-border"
                />
                <span className="text-text-primary">Trip Expense</span>
              </label>
              <label className="flex items-center space-x-2 cursor-pointer">
                <input 
                  type="radio" 
                  name="type" 
                  value="salary" 
                  checked={type === 'salary'} 
                  onChange={(e) => setType(e.target.value)}
                  className="text-primary focus:ring-primary bg-input border-border"
                />
                <span className="text-text-primary">Salary Advance</span>
              </label>
            </div>
          </div>
          
          <div>
            <label className="block text-sm font-medium text-text-muted mb-1">Amount (₹)</label>
            <input 
              type="number" 
              required
              min="1"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              className="w-full px-4 py-2.5 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors"
              placeholder="Enter amount"
            />
          </div>
          
          <div>
            <label className="block text-sm font-medium text-text-muted mb-1">Note / Description</label>
            <textarea 
              value={note}
              onChange={(e) => setNote(e.target.value)}
              rows={3}
              className="w-full px-4 py-2.5 bg-background border border-border rounded-lg text-text-primary focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-colors resize-none"
              placeholder="e.g. For fuel at start of trip"
            />
          </div>
          
          <div className="flex justify-end space-x-3 pt-4 border-t border-border">
            <button 
              type="button" 
              onClick={onClose}
              className="px-4 py-2 rounded-lg text-text-muted hover:bg-background hover:text-text-primary transition-colors font-medium"
            >
              Cancel
            </button>
            <button 
              type="submit" 
              className="px-4 py-2 rounded-lg bg-primary text-background font-medium hover:bg-primary/90 transition-colors"
            >
              Issue Amount
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}