'use client';

import React from 'react';
import { Send, CheckCircle2, FileText } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { SectionCard, InstallationSuccessScreen } from '@/components/teltoinstall/_index';
import { useSummaryStep } from '@/hooks/teltoinstall/_index';
import { WIZARD_FORM_ID } from '../constants';

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

function SummaryRow({ label, value }: { label: string; value?: string | number | null }) {
  return (
    <div className="flex justify-between items-start px-4 py-3 gap-3">
      <span className="text-sm text-muted-foreground shrink-0">{label}</span>
      <span className="text-sm font-medium text-foreground text-right">
        {value != null && value !== '' ? String(value) : 'Non renseigné'}
      </span>
    </div>
  );
}

export default function SummaryStep(_props: Props) {
  const { t } = useTranslation();
  const { installation, error, success, resultStatus, submitInstallation, goToHistory, startNewInstallation } =
    useSummaryStep();
  const { vehicle, device, installer_name, intervention_date, photos, notes } = installation;

  if (success) {
    return (
      <InstallationSuccessScreen
        gpsError={resultStatus === 'gps_error'}
        pending={resultStatus === 'pending'}
        licensePlate={vehicle.license_plate}
        productLine={device.product_line}
        imei={device.imei}
        installerName={installer_name}
        onViewHistory={goToHistory}
        onNewInstallation={startNewInstallation}
      />
    );
  }

  const accessories =
    (device.accessory_ids ?? []).length > 0
      ? `${(device.accessory_ids ?? []).length} accessoire(s)`
      : 'Aucun';

  return (
    <form
      id={WIZARD_FORM_ID}
      onSubmit={(e) => {
        e.preventDefault();
        submitInstallation();
      }}
    >
      {error && (
        <div className="flex items-center gap-2 p-3 mb-4 bg-red-50 border border-red-200 rounded-lg">
          <p className="text-sm text-red-600">{error}</p>
        </div>
      )}

      <SectionCard icon={<Send className="w-4 h-4" />} title={t('summary.sectionFinal')} noPadding>
        <div className="divide-y divide-border">
          <SummaryRow label={t('summary.rowVehicle')} value={vehicle.license_plate} />
          <SummaryRow label={t('validation.vin')} value={vehicle.vin} />
          <SummaryRow
            label={t('vehicle.odometerKm')}
            value={vehicle.odometer_km != null ? `${vehicle.odometer_km} km` : null}
          />
          <SummaryRow label={t('summary.rowDevice')} value={device.product_line} />
          <SummaryRow label={t('validation.imei')} value={device.imei} />
          <SummaryRow label={t('validation.iccid')} value={device.sim_card?.iccid} />
          <SummaryRow label={t('summary.rowAccessories')} value={accessories} />
          <SummaryRow label={t('wiring.location')} value={installation.location} />
          <SummaryRow label={t('validation.installer')} value={installer_name} />
          <SummaryRow label={t('validation.interventionDate')} value={intervention_date} />
          <SummaryRow label={t('summary.rowPhotos')} value={`${photos.length} photo(s)`} />
        </div>
      </SectionCard>

      {notes && (
        <SectionCard icon={<FileText className="w-4 h-4" />} title={t('photos.sectionComments')}>
          <p className="text-sm text-foreground whitespace-pre-wrap">{notes}</p>
        </SectionCard>
      )}

      <div className="flex items-start gap-3 p-4 bg-emerald-50 rounded-xl border border-emerald-200">
        <CheckCircle2 className="w-5 h-5 text-emerald-600 shrink-0 mt-0.5" />
        <div>
          <p className="text-sm font-semibold text-emerald-800">{t('summary.readyToSubmit')}</p>
          <p className="text-xs text-emerald-700 mt-0.5">{t('summary.readyMessage')}</p>
        </div>
      </div>
    </form>
  );
}