'use client';
import React from 'react';
import {useTranslations} from 'next-intl';
import {Button, Form} from 'react-bootstrap';

/** Champs d'une demande ou proposition de covoiturage. */
export interface CarpoolSaisie {
  ville: string;
  nombre: number;
  heure: string;
  propose: number;
}

export const SAISIE_VIDE: CarpoolSaisie = {ville: '', nombre: 1, heure: '', propose: 1};

interface CarpoolFormProps {
  saisie: CarpoolSaisie;
  onChange: (saisie: CarpoolSaisie) => void;
  onSubmit: (event: React.FormEvent) => void;
  onCancel: () => void;
  submitting: boolean;
  /** Vrai quand on corrige une annonce existante (bouton « Enregistrer » plutôt que « Publier »). */
  editing: boolean;
}

/** Formulaire de dépôt / correction d'un covoiturage : ville de départ, places, heure, sens. */
export default function CarpoolForm({saisie, onChange, onSubmit, onCancel, submitting, editing}: CarpoolFormProps) {
  const t = useTranslations('Carpool');
  const set = (patch: Partial<CarpoolSaisie>) => onChange({...saisie, ...patch});

  return (
    <Form onSubmit={onSubmit} className="mb-4 p-3 border rounded">
      <Form.Group className="mb-2" controlId="carpool-ville">
        <Form.Label>{t('city')}</Form.Label>
        <Form.Control
          type="text"
          value={saisie.ville}
          onChange={(e) => set({ville: e.target.value})}
          placeholder={t('city_placeholder')}
          disabled={submitting}
        />
      </Form.Group>
      <Form.Group className="mb-2" controlId="carpool-nombre">
        <Form.Label>{t('seats')}</Form.Label>
        <Form.Control
          type="number"
          min={1}
          value={saisie.nombre}
          onChange={(e) => set({nombre: parseInt(e.target.value) || 1})}
          disabled={submitting}
        />
      </Form.Group>
      <Form.Group className="mb-2">
        <Form.Label>{t('time')}</Form.Label>
        <Form.Control
          type="time"
          value={saisie.heure}
          onChange={(e) => set({heure: e.target.value})}
          disabled={submitting}
        />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Check
          type="radio"
          label={t('offer')}
          name="propose"
          checked={saisie.propose === 1}
          onChange={() => set({propose: 1})}
          disabled={submitting}
        />
        <Form.Check
          type="radio"
          label={t('request')}
          name="propose"
          checked={saisie.propose === 0}
          onChange={() => set({propose: 0})}
          disabled={submitting}
        />
      </Form.Group>
      <div className="d-flex gap-2">
        <Button type="submit" variant="primary" disabled={submitting || !saisie.ville.trim()}>
          {editing ? t('save') : t('submit')}
        </Button>
        <Button variant="secondary" onClick={onCancel} disabled={submitting}>
          {t('cancel')}
        </Button>
      </div>
    </Form>
  );
}