'use client';

import { DashboardEmptyState, DashboardSection } from '@/components/dashboard-page';
import { Badge, type EstadoOT } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Skeleton, SkeletonDetailHeader } from '@/components/ui/skeleton';
import { useFlagsConfiguracion } from '@/hooks/use-flags-configuracion';
import { useToast } from '@/hooks/use-toast';
import { mecanicosApi, otsApi } from '@/lib/api';
import { canMutateOtRemotely, isOtLocked, refreshOtDetail } from '@/lib/ot-detail';
import { formatDate, getEstadoLabel } from '@/lib/utils';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { ArrowLeft, PencilLine, Loader2, Save } from 'lucide-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

const ESTADOS_OT: readonly EstadoOT[] = ['borrador', 'en_proceso', 'cotizada', 'aprobada', 'terminada', 'facturada', 'entregada'];

function isEstadoOT(value: string): value is EstadoOT {
  return (ESTADOS_OT as readonly string[]).includes(value);
}

export default function EditarOtPage() {
  const params = useParams();
  const router = useRouter();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const flags = useFlagsConfiguracion();
  const routeId = String(params.id);
  const [km, setKm] = useState('0');
  const [nivelGasolina, setNivelGasolina] = useState('0');
  const [fechaEntrada, setFechaEntrada] = useState('');
  const [requerimientoCliente, setRequerimientoCliente] = useState('');
  const [observaciones, setObservaciones] = useState('');
  const [selectedCosas, setSelectedCosas] = useState<number[]>([]);
  const [mecanicoId, setMecanicoId] = useState('');

  const { data, isLoading } = useQuery({
    queryKey: ['ots', 'detail', routeId, 'editar'],
    queryFn: () => refreshOtDetail(routeId),
    enabled: !!routeId,
  });

  const ot = data?.ot;
  const cosasTrae = data?.cosasTrae || [];
  const canMutate = canMutateOtRemotely(ot);
  const locked = isOtLocked(ot);
  const { data: mecanicos = [] } = useQuery({
    queryKey: ['mecanicos', 'activos'],
    queryFn: () => mecanicosApi.list({ activo: true }),
    enabled: flags.usaMecanicos,
  });

  useEffect(() => {
    if (!ot) return;
    setKm(String(ot.km || 0));
    setNivelGasolina(String(ot.nivelGasolina || 0));
    setFechaEntrada(new Date(ot.fechaEntrada).toISOString().slice(0, 16));
    setRequerimientoCliente(ot.requerimientoCliente || '');
    setObservaciones(ot.observaciones || '');
    setMecanicoId(ot.mecanicoId ? String(ot.mecanicoId) : '');
    setSelectedCosas((ot.cosasTrae || []).map((item: any) => Number(item?.cosaTraeId || item?.id || item)).filter((value: number) => Number.isFinite(value)));
  }, [ot]);

  const saveMutation = useMutation({
    mutationFn: async () => {
      if (!ot?.serverId) {
        throw new Error('Primero guarda la OT para usar esta acción.');
      }

      const kmValue = Number(km || 0);
      const gasolinaValue = Number(nivelGasolina || 0);
      const requerimiento = requerimientoCliente.trim();

      if (!Number.isFinite(kmValue) || kmValue <= 0) {
        throw new Error('Ingresa el kilometraje actual antes de guardar.');
      }

      if (!Number.isFinite(gasolinaValue) || gasolinaValue < 0 || gasolinaValue > 100) {
        throw new Error('El nivel de gasolina debe estar entre 0 y 100.');
      }

      if (!requerimiento) {
        throw new Error('Registra el requerimiento del cliente antes de guardar.');
      }

      return otsApi.update(Number(ot.serverId), {
        fechaEntrada: new Date(fechaEntrada).toISOString(),
        km: kmValue,
        nivelGasolina: gasolinaValue,
        ...(flags.usaMecanicos ? { mecanicoId: mecanicoId ? Number(mecanicoId) : null } : {}),
        requerimientoCliente: requerimiento,
        observaciones: observaciones.trim() || undefined,
        ...(flags.usaCosasTrae ? { cosasTrae: selectedCosas } : {}),
      });
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['ots'] });
      await queryClient.invalidateQueries({ queryKey: ['ots', 'detail', routeId] });
      await queryClient.invalidateQueries({ queryKey: ['ots', 'detail', routeId, 'editar'] });
      toast({ variant: 'success', title: 'OT actualizada', description: 'Los cambios ya quedaron guardados.' });
      router.push(`/dashboard/ots/${routeId}`);
    },
    onError: (error: any) => toast({ variant: 'destructive', title: 'Error', description: error.message || 'No se pudo actualizar la OT' }),
  });

  if (isLoading) {
    return (
      <div className="min-h-full pb-16 md:pb-10">
        <main className="mx-auto flex max-w-5xl flex-col gap-6">
          <Card className="overflow-hidden">
            <CardContent className="space-y-5 p-5 md:p-6">
              <SkeletonDetailHeader />
            </CardContent>
          </Card>
          <DashboardSection title="Datos operativos" description="Ajusta kilometraje, gasolina, observaciones e inventario sin saturar la interfaz.">
            <div className="grid gap-6 md:grid-cols-2">
              <div className="space-y-4">
                <Skeleton className="h-11 w-full" />
                <Skeleton className="h-11 w-full" />
                <Skeleton className="h-11 w-full" />
                <Skeleton className="h-11 w-full" />
              </div>
              <div className="space-y-4">
                <Skeleton className="h-32 w-full" />
                <Skeleton className="h-32 w-full" />
              </div>
            </div>
          </DashboardSection>
        </main>
      </div>
    );
  }

  if (!ot) {
    return <DashboardEmptyState title="OT no encontrada" description="No fue posible abrir esta OT para editarla." icon={PencilLine} action={<Button onClick={() => router.push('/dashboard/ots')}>Volver</Button>} />;
  }

  const toggleCosa = (id: number) => {
    setSelectedCosas((current) => current.includes(id) ? current.filter((item) => item !== id) : [...current, id]);
  };

  return (
    <div className="min-h-full pb-16 md:pb-10">
      <main className="mx-auto flex max-w-5xl flex-col gap-6">
        <Card className="overflow-hidden">
          <CardContent className="space-y-5 p-5 md:p-6">
            <div className="flex items-start gap-3 md:gap-4">
              <Button variant="outline" size="icon" aria-label="Volver a la OT" onClick={() => router.push(`/dashboard/ots/${routeId}`)}>
                <ArrowLeft className="h-4 w-4" />
              </Button>
              <div>
                <div className="flex flex-wrap items-center gap-2">
                  <h1 className="text-2xl font-bold tracking-tight text-foreground">Editar OT</h1>
                  <Badge variant="primary">{ot.numeroOt}</Badge>
                  {isEstadoOT(ot.estado) ? (
                    <Badge variant="estado" estado={ot.estado}>{getEstadoLabel(ot.estado)}</Badge>
                  ) : (
                    <Badge variant="outline">{getEstadoLabel(ot.estado)}</Badge>
                  )}
                </div>
                <p className="mt-2 text-sm text-muted-foreground">{ot.vehiculo?.placa || 'Sin placa'} | {formatDate(ot.fechaEntrada)}</p>
                {locked ? <p className="mt-1 text-sm font-medium text-success">La OT ya fue entregada y no admite cambios.</p> : null}
              </div>
            </div>
          </CardContent>
        </Card>

        <DashboardSection title="Datos operativos" description="Ajusta kilometraje, gasolina, observaciones e inventario sin saturar la interfaz.">
          <div className="grid gap-6 md:grid-cols-2">
            <div className="space-y-4">
              <div>
                <label className="mb-2 block text-sm font-medium text-foreground">Fecha de entrada</label>
                <Input type="datetime-local" value={fechaEntrada} onChange={(event) => setFechaEntrada(event.target.value)} />
              </div>
              <div>
                <label className="mb-2 block text-sm font-medium text-foreground">Kilometraje</label>
                <Input type="number" value={km} onChange={(event) => setKm(event.target.value)} />
              </div>
              <div>
                <label className="mb-2 block text-sm font-medium text-foreground">Nivel de gasolina</label>
                <Input type="number" min="0" max="100" value={nivelGasolina} onChange={(event) => setNivelGasolina(event.target.value)} />
              </div>
              {flags.usaMecanicos ? (
                <div>
                  <label className="mb-2 block text-sm font-medium text-foreground">Mecanico asignado</label>
                  <Select value={mecanicoId || 'sin_asignar'} onValueChange={(value) => setMecanicoId(value === 'sin_asignar' ? '' : value)}>
                    <SelectTrigger>
                      <SelectValue placeholder="Sin asignar" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="sin_asignar">Sin asignar</SelectItem>
                      {mecanicos.map((item: any) => (
                        <SelectItem key={item.id} value={String(item.id)}>{item.nombre}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              ) : null}
            </div>

            <div className="space-y-4">
              <div>
                <label className="mb-2 block text-sm font-medium text-foreground">Requerimiento del cliente</label>
                <textarea value={requerimientoCliente} onChange={(event) => setRequerimientoCliente(event.target.value)} rows={5} className="w-full rounded-xl border border-border bg-surface p-4 text-sm text-foreground shadow-sm transition-colors duration-150 ease-out focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30" />
              </div>
              <div>
                <label className="mb-2 block text-sm font-medium text-foreground">Observaciones</label>
                <textarea value={observaciones} onChange={(event) => setObservaciones(event.target.value)} rows={5} className="w-full rounded-xl border border-border bg-surface p-4 text-sm text-foreground shadow-sm transition-colors duration-150 ease-out focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30" />
              </div>
            </div>
          </div>
        </DashboardSection>

        {flags.usaCosasTrae ? (
          <DashboardSection title="Inventario recibido" description="Marca lo que realmente ingreso con la unidad para mantener reclamos y entregas bajo control.">
            {cosasTrae.length > 0 ? (
              <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                {cosasTrae.map((item: any) => (
                  <button key={item.id} type="button" onClick={() => toggleCosa(Number(item.id))} className={`rounded-xl border p-4 text-left transition-colors duration-150 ease-out active:scale-[0.98] ${selectedCosas.includes(Number(item.id)) ? 'border-primary/30 bg-primary-soft text-primary' : 'border-border bg-surface text-muted-foreground [@media(hover:hover)]:hover:bg-muted'}`}>
                    <p className="font-semibold">{item.nombre}</p>
                    <p className="mt-1 text-sm">{selectedCosas.includes(Number(item.id)) ? 'Marcado en la OT' : 'Toca para marcar'}</p>
                  </button>
                ))}
              </div>
            ) : (
              <div className="rounded-2xl border border-dashed border-border-strong bg-muted p-4 text-sm text-muted-foreground">
                Este cliente todavia no tiene un catalogo de objetos configurado en Catalogos.
              </div>
            )}
          </DashboardSection>
        ) : null}

        <div className="flex flex-col gap-3 md:flex-row md:justify-end">
          <Button variant="outline" size="lg" onClick={() => router.push(`/dashboard/ots/${routeId}`)}>Cancelar</Button>
          <Button size="lg" disabled={!canMutate || saveMutation.isPending} onClick={() => saveMutation.mutate()}>
            {saveMutation.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
            {canMutate ? 'Guardar cambios' : 'No disponible'}
          </Button>
        </div>
      </main>
    </div>
  );
}