'use client';

import { Field } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { useResponsiveSignaturePad } from '@/lib/signature-pad';
import { Eraser, Fuel } from 'lucide-react';
import { type RefObject, useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';

// Lo que se captura al entregar el vehículo. km y gasolina arrancan con los de
// entrada para que quien entrega solo corrija lo que cambió.
export interface DatosEntregaForm {
  kmSalida: string;
  nivelGasolinaSalida: number;
  recomendaciones: string;
  entregadoPor: string;
}

export function datosEntregaIniciales(ot: any, usuarioNombre?: string | null): DatosEntregaForm {
  return {
    kmSalida: String(ot?.kmSalida ?? ot?.km ?? ''),
    nivelGasolinaSalida: Number(ot?.nivelGasolinaSalida ?? ot?.nivelGasolina ?? 0),
    recomendaciones: String(ot?.recomendacionesEntrega ?? ''),
    entregadoPor: String(ot?.firma?.nombreFirmaEntrega || usuarioNombre || ''),
  };
}

// Devuelve el motivo por el que falta algo, o null si ya se puede entregar.
export function validarDatosEntrega(datos: DatosEntregaForm, opciones: { exigeFirma: boolean; hayFirma: boolean }) {
  const km = datos.kmSalida.trim();
  if (km === '' || !Number.isInteger(Number(km)) || Number(km) < 0) {
    return 'Escribe el kilometraje de salida (número entero).';
  }
  if (!datos.entregadoPor.trim()) {
    return 'Escribe el nombre de quien entrega el vehículo.';
  }
  if (opciones.exigeFirma && !opciones.hayFirma) {
    return 'Falta la firma de quien entrega el vehículo.';
  }
  return null;
}

const NIVELES_GASOLINA = [
  { value: 0, label: 'Vacío', activo: 'bg-red-500 ring-red-500' },
  { value: 25, label: '1/4', activo: 'bg-orange-500 ring-orange-500' },
  { value: 50, label: '1/2', activo: 'bg-amber-400 ring-amber-400' },
  { value: 75, label: '3/4', activo: 'bg-lime-500 ring-lime-500' },
  { value: 100, label: 'Lleno', activo: 'bg-emerald-500 ring-emerald-500' },
];

interface EntregaFormProps {
  datos: DatosEntregaForm;
  onChange: (datos: DatosEntregaForm) => void;
  kmEntrada?: number;
  gasolinaEntrada?: number;
  /** Si el taller usa firmas, quien entrega firma en este pad. */
  usaFirma: boolean;
  firmaRef: RefObject<SignatureCanvas | null>;
  onFirmaChange: () => void;
}

export function EntregaForm({
  datos,
  onChange,
  kmEntrada,
  gasolinaEntrada,
  usaFirma,
  firmaRef,
  onFirmaChange,
}: EntregaFormProps) {
  const padContainerRef = useRef<HTMLDivElement | null>(null);
  const dibujandoRef = useRef(false);
  useResponsiveSignaturePad(firmaRef, padContainerRef, dibujandoRef);

  const set = (cambio: Partial<DatosEntregaForm>) => onChange({ ...datos, ...cambio });

  return (
    <div className="space-y-4">
      <div className="grid gap-3 sm:grid-cols-2">
        <Field
          label="Kilometraje de salida"
          htmlFor="entrega-km"
          hint={kmEntrada !== undefined ? `Entró con ${Number(kmEntrada).toLocaleString()} km` : undefined}
        >
          <Input
            id="entrega-km"
            type="number"
            inputMode="numeric"
            min="0"
            value={datos.kmSalida}
            onChange={(event) => set({ kmSalida: event.target.value })}
          />
        </Field>
        <Field label="Quién entrega" htmlFor="entrega-por">
          <Input
            id="entrega-por"
            value={datos.entregadoPor}
            maxLength={255}
            onChange={(event) => set({ entregadoPor: event.target.value })}
          />
        </Field>
      </div>

      <div>
        <div className="mb-2 flex items-center justify-between">
          <p className="flex items-center gap-2 text-sm font-medium text-foreground">
            <Fuel className="h-4 w-4 text-amber-500" />
            Nivel de gasolina de salida
          </p>
          {gasolinaEntrada !== undefined ? (
            <span className="text-xs text-muted-foreground">Entró con {gasolinaEntrada}%</span>
          ) : null}
        </div>
        <div className="grid grid-cols-5 gap-2">
          {NIVELES_GASOLINA.map((nivel) => {
            const activo = datos.nivelGasolinaSalida === nivel.value;
            return (
              <button
                key={nivel.value}
                type="button"
                onClick={() => set({ nivelGasolinaSalida: nivel.value })}
                className={`h-12 rounded-xl border-2 text-sm font-bold transition-[background-color,box-shadow] duration-150 ${
                  activo
                    ? `border-transparent text-white shadow ring-2 ring-offset-2 ${nivel.activo}`
                    : 'border-border bg-muted text-muted-foreground'
                }`}
              >
                {nivel.label}
              </button>
            );
          })}
        </div>
      </div>

      <Field
        label="Recomendaciones / observaciones"
        htmlFor="entrega-recomendaciones"
        hint="Sale en el comprobante, abajo del total."
      >
        <Textarea
          id="entrega-recomendaciones"
          rows={3}
          maxLength={2000}
          value={datos.recomendaciones}
          onChange={(event) => set({ recomendaciones: event.target.value })}
        />
      </Field>

      {usaFirma ? (
        <div>
          <p className="mb-2 text-sm font-medium text-foreground">Firma de quien entrega</p>
          <div
            ref={padContainerRef}
            className="signature-pad h-40 touch-none overflow-hidden sm:h-48"
          >
            <SignatureCanvas
              ref={firmaRef}
              penColor="#0f172a"
              onBegin={() => {
                dibujandoRef.current = true;
              }}
              onEnd={() => {
                dibujandoRef.current = false;
                onFirmaChange();
              }}
              canvasProps={{ className: 'h-full w-full rounded-3xl', style: { touchAction: 'none' } }}
            />
          </div>
          <Button
            type="button"
            variant="outline"
            size="sm"
            className="mt-2"
            onClick={() => {
              firmaRef.current?.clear();
              onFirmaChange();
            }}
          >
            <Eraser className="mr-2 h-4 w-4" />
            Borrar firma
          </Button>
        </div>
      ) : null}
    </div>
  );
}