/**
 * Volume Weight Input Component
 *
 * Input fields for CBM, weight (kg), and pallet count
 */

'use client';

import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';

interface VolumeWeightInputProps {
  volumeCBM: number;
  weightKG: number;
  palletCount: number;
  onVolumeChange: (value: number) => void;
  onWeightChange: (value: number) => void;
  onPalletChange: (value: number) => void;
  disabled?: boolean;
}

export function VolumeWeightInput({
  volumeCBM,
  weightKG,
  palletCount,
  onVolumeChange,
  onWeightChange,
  onPalletChange,
  disabled = false,
}: VolumeWeightInputProps) {
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* Volume CBM */}
        <div className="space-y-2">
          <Label htmlFor="volume">
            Volume (CBM) <span className="text-red-500">*</span>
          </Label>
          <Input
            id="volume"
            type="number"
            min={0.01}
            step={0.1}
            value={volumeCBM}
            onChange={e => onVolumeChange(parseFloat(e.target.value) || 0)}
            disabled={disabled}
            required
            placeholder="25.5"
            className="w-full"
          />
          <p className="text-xs text-muted-foreground">Cubic meters</p>
        </div>

        {/* Weight KG */}
        <div className="space-y-2">
          <Label htmlFor="weight">
            Poids (kg) <span className="text-red-500">*</span>
          </Label>
          <Input
            id="weight"
            type="number"
            min={1}
            step={1}
            value={weightKG}
            onChange={e => onWeightChange(parseInt(e.target.value, 10) || 0)}
            disabled={disabled}
            required
            placeholder="3500"
            className="w-full"
          />
          <p className="text-xs text-muted-foreground">Kilograms</p>
        </div>

        {/* Pallets */}
        <div className="space-y-2">
          <Label htmlFor="pallets">Palettes</Label>
          <Input
            id="pallets"
            type="number"
            min={0}
            step={1}
            value={palletCount}
            onChange={e => onPalletChange(parseInt(e.target.value, 10) || 0)}
            disabled={disabled}
            placeholder="10"
            className="w-full"
          />
          <p className="text-xs text-muted-foreground">0 si sans palettes</p>
        </div>
      </div>

      {/* Info message */}
      <div className="flex items-start gap-2 p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
        <svg
          className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
          fill="currentColor"
          viewBox="0 0 20 20"
        >
          <path
            fillRule="evenodd"
            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
            clipRule="evenodd"
          />
        </svg>
        <div className="text-sm text-blue-800 dark:text-blue-200">
          <strong>Calcul du prix :</strong> Le prix final sera basé sur le plus élevé entre le
          volume (CBM × prix/CBM) et le poids (kg × prix/kg), conformément à la règle du fret
          maritime.
        </div>
      </div>
    </div>
  );
}
