'use client';

import React from 'react';
import { Formik, Form } from 'formik';
import { Car } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { FormTextField, FormSelectField, FleetVehicleField, SectionCard, FormikErrorToast } from '@/components/teltoinstall/_index';
import {
  useVehicleStep,
  useInstallationWizard,
} from '@/hooks/teltoinstall/_index';
import { FuelLevel } from '@/models/teltoinstall/_index';
import { WIZARD_FORM_ID } from '../constants';

interface Props {
  onNext: () => void;
}

const FUEL_LEVEL_OPTIONS = ['none', 'quarter', 'half', 'three_quarters', 'full'];

export default function VehicleStep({ onNext }: Props) {
  const { t } = useTranslation();
  const { vehicle, validationSchema, saveVehicle } = useVehicleStep();
  const { initInstallation, locked } = useInstallationWizard();

  const initialValues = {
    fleet_vehicle_id: vehicle.fleet_vehicle_id ?? null,
    license_plate: vehicle.license_plate ?? '',
    vin: vehicle.vin ?? '',
    odometer_km: vehicle.odometer_km ?? '',
    hour_meter: vehicle.hour_meter ?? '',
    fuel_level: vehicle.fuel_level ?? '',
  };

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      enableReinitialize
      onSubmit={async (values) => {
        const id = await initInstallation();
        if (!id) return;
        const ok = await saveVehicle(
          {
            fleet_vehicle_id: values.fleet_vehicle_id ?? null,
            license_plate: values.license_plate,
            vin: values.vin || undefined,
            odometer_km: values.odometer_km ? Number(values.odometer_km) : undefined,
            hour_meter: values.hour_meter ? Number(values.hour_meter) : undefined,
            fuel_level: (values.fuel_level || undefined) as FuelLevel | undefined,
          },
          id
        );
        if (ok) onNext();
      }}
    >
      {({ values }) => (
        <Form id={WIZARD_FORM_ID}>
          <FormikErrorToast />
          <SectionCard icon={<Car className="w-4 h-4" />} title={t('wizard.steps.vehicle')}>
            <FleetVehicleField
              name="license_plate"
              label={t('vehicle.licensePlate')}
              required
              hint="Format: AB-123-CD"
              locked={locked.license_plate}
            />

            <FormTextField
              name="vin"
              label={t('vehicle.vin')}
              placeholder={t('vehicle.vinPlaceholder')}
              maxLength={17}
              className="font-mono uppercase"
              transform={(v) => v.toUpperCase()}
              disabled={locked.vin}
              helperText={t('vehicle.vinCounter', { count: (values.vin as string).length })}
            />

            <FormTextField
              name="odometer_km"
              label={t('vehicle.odometerKm')}
              type="number"
              placeholder="Ex: 120038"
            />

            <FormTextField
              name="hour_meter"
              label={t('vehicle.hourMeter')}
              type="number"
              placeholder="Ex: 7200"
            />

            <FormSelectField
              name="fuel_level"
              label={t('vehicle.fuelLevel')}
              options={FUEL_LEVEL_OPTIONS.map((k) => ({ value: k, label: t(`validation.fuelLevels.${k}`) }))}
              placeholder={t('vehicle.fuelLevelPlaceholder')}
            />
          </SectionCard>
        </Form>
      )}
    </Formik>
  );
}