import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Ambulance } from 'lucide-react';

interface SimpleSosFormProps {
  onSuccess?: (orderId: string) => void;
  className?: string;
}

export function SimpleSosForm({ onSuccess, className }: SimpleSosFormProps) {
  const [medicineName, setMedicineName] = useState('');
  const [quantity, setQuantity] = useState('1');
  const [phone, setPhone] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    // Simulate API call
    setTimeout(() => {
      setIsSubmitting(false);
      onSuccess?.('test-order-123');
    }, 1000);
  };

  return (
    <Card className={className} data-testid="sos-form">
      <CardHeader className="text-center">
        <CardTitle className="flex items-center justify-center gap-2 text-primary">
          <Ambulance className="h-6 w-6 text-red-500" />
          Demande SOS
        </CardTitle>
        <p className="text-muted-foreground">
          Remplissez le formulaire pour une livraison d'urgence
        </p>
      </CardHeader>
      
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <Label htmlFor="medicine">Nom du médicament *</Label>
            <Input
              id="medicine"
              value={medicineName}
              onChange={(e) => setMedicineName(e.target.value)}
              placeholder="Ex: Paracétamol, Doliprane..."
              required
              data-testid="input-medicine-name"
            />
          </div>
          
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label htmlFor="quantity">Quantité</Label>
              <select 
                id="quantity"
                value={quantity}
                onChange={(e) => setQuantity(e.target.value)}
                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                data-testid="select-quantity"
              >
                <option value="1">1 boîte</option>
                <option value="2">2 boîtes</option>
                <option value="3">3 boîtes</option>
              </select>
            </div>
            
            <div>
              <Label htmlFor="phone">Téléphone *</Label>
              <Input
                id="phone"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                placeholder="+225 XX XX XX XX"
                required
                data-testid="input-phone"
              />
            </div>
          </div>
          
          <Button
            type="submit"
            className="w-full bg-gradient-to-r from-red-600 to-red-500 hover:from-red-700 hover:to-red-600 text-white font-bold py-3"
            disabled={isSubmitting || !medicineName || !phone}
            data-testid="button-submit-sos"
          >
            {isSubmitting ? (
              <>Envoi en cours...</>
            ) : (
              <>
                <Ambulance className="mr-2 h-4 w-4" />
                DEMANDER UN SOS
              </>
            )}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}