// T600.6 — NuevaVigenciaModal
// Modal para crear una nueva vigencia/versión de un TipoDeIva
// Color distinto al modal de Editar: usa tokens --warning-bg para diferenciación visual
import { useEffect } from 'react'
import { useForm, useWatch } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { isAxiosError } from 'axios'
import { AlertCircle, TriangleAlert } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Alert, AlertDescription } from '@/components/ui/alert'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { useNuevaVersionTipoDeIva } from '../hooks/useTiposDeIva'
import type { TipoDeIva } from '../types/tipoDeIva.types'
import { toast } from 'sonner'
import { prevCivilDate, formatCivilDate } from '@/lib/dateFormat'

const formSchema = z.object({
  porcentaje: z.coerce
    .number<number>('Debe ser un número')
    .min(0, 'Mínimo 0%')
    .max(100, 'Máximo 100%'),
  vigenciaDesde: z
    .string()
    .min(1, 'La vigencia desde es requerida')
    .regex(/^\d{4}-\d{2}-\d{2}$/, 'Formato: YYYY-MM-DD'),
})

type FormValues = z.infer<typeof formSchema>

interface NuevaVigenciaModalProps {
  open: boolean
  item: TipoDeIva | null
  onClose: () => void
  onSuccess: () => void
}

/** Formatea la fecha de cierre (vigenciaDesde - 1 día) para display "dd/MM/yyyy".
 *  Usa prevCivilDate (Date.UTC pura, sin TZ) + formatCivilDate (split manual).
 */
function fechaCierreDisplay(vigenciaDesde: string): string {
  if (!vigenciaDesde || !/^\d{4}-\d{2}-\d{2}$/.test(vigenciaDesde)) return '—'
  return formatCivilDate(prevCivilDate(vigenciaDesde))
}

function resolveBackendError(err: unknown): string | null {
  if (!err) return null
  if (isAxiosError(err) && err.response?.data) {
    const data = err.response.data as { error?: string; message?: string }
    if (data.error === 'predecesora_ya_cerrada') {
      return 'La versión actual ya fue cerrada. No se puede crear una nueva versión sobre ella.'
    }
    if (data.error === 'vigencia_desde_invalida') {
      return data.message ?? 'La fecha de vigencia debe ser posterior a la versión actual.'
    }
    return data.message ?? data.error ?? 'Error al crear versión'
  }
  return 'Error al crear versión. Intentá de nuevo.'
}

export function NuevaVigenciaModal({
  open,
  item,
  onClose,
  onSuccess,
}: NuevaVigenciaModalProps) {
  const mutation = useNuevaVersionTipoDeIva()

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      porcentaje: '' as unknown as number,
      vigenciaDesde: '',
    },
    mode: 'onChange',
  })

  const watchedPorcentaje = useWatch({ control: form.control, name: 'porcentaje' })
  const watchedVigencia = useWatch({ control: form.control, name: 'vigenciaDesde' })

  const formState = form.formState
  const isFormValid = formState.isValid && !formState.isValidating

  useEffect(() => {
    if (open) {
      form.reset({
        porcentaje: '' as unknown as number,
        vigenciaDesde: '',
      })
      mutation.reset()
    }
  }, [open]) // eslint-disable-line react-hooks/exhaustive-deps

  const backendError = resolveBackendError(mutation.error)
  const showPreview =
    isFormValid &&
    watchedPorcentaje !== undefined &&
    watchedVigencia?.match(/^\d{4}-\d{2}-\d{2}$/)

  function handleSubmit(values: FormValues) {
    if (!item) return
    mutation.mutate(
      {
        id: item.id,
        body: {
          porcentaje: values.porcentaje,
          vigenciaDesde: values.vigenciaDesde,
        },
      },
      {
        onSuccess: () => {
          toast.success(`Nueva versión de ${item.codigo} creada`)
          onSuccess()
          onClose()
        },
      },
    )
  }

  return (
    <Dialog open={open} onOpenChange={(v) => { if (!v) onClose() }}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <TriangleAlert className="h-5 w-5 text-warning" />
            Nueva vigencia — {item?.codigo}
          </DialogTitle>
          <DialogDescription>
            Crea una nueva versión del tipo de IVA con un porcentaje y fecha de vigencia nuevos. La versión actual quedará cerrada.
          </DialogDescription>
        </DialogHeader>

        {/* Banner de advertencia — usa token --warning-bg */}
        <div
          className="rounded-md border px-4 py-3 text-sm"
          style={{
            backgroundColor: 'var(--warning-bg)',
            borderColor: 'var(--warning-border)',
            color: 'var(--warning-foreground)',
          }}
        >
          Esta acción crea una nueva versión del tipo de IVA. La versión actual quedará
          cerrada con la fecha anterior a la nueva vigencia.
        </div>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4" noValidate>
            {backendError && (
              <Alert variant="destructive">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{backendError}</AlertDescription>
              </Alert>
            )}

            {/* Porcentaje nuevo */}
            <FormField
              control={form.control}
              name="porcentaje"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Porcentaje nuevo</FormLabel>
                  <FormControl>
                    <Input
                      {...field}
                      type="number"
                      min={0}
                      max={100}
                      step={0.01}
                      placeholder="Ej: 23.5"
                      aria-label="Porcentaje nuevo"
                      disabled={mutation.isPending}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Vigencia desde */}
            <FormField
              control={form.control}
              name="vigenciaDesde"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Vigencia desde</FormLabel>
                  <FormControl>
                    <Input
                      {...field}
                      type="date"
                      aria-label="Vigencia desde"
                      disabled={mutation.isPending}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* Preview — visible solo cuando form es válido */}
            {showPreview && item && (
              <div className="rounded-md border border-border bg-muted/50 p-3 space-y-1 text-sm">
                <p className="font-medium text-foreground">Vista previa:</p>
                <p>
                  Nueva versión <strong>{item.codigo}</strong> con alícuota{' '}
                  <strong>{watchedPorcentaje}%</strong> vigente desde{' '}
                  <strong>{watchedVigencia}</strong>.
                </p>
                <p className="text-muted-foreground">
                  Versión actual ({item.porcentaje}%) quedará cerrada el{' '}
                  <strong>{fechaCierreDisplay(watchedVigencia)}</strong>.
                </p>
                <p className="text-xs text-muted-foreground font-medium">
                  Esta acción no se puede deshacer.
                </p>
              </div>
            )}

            <DialogFooter className="gap-2">
              <Button
                type="button"
                variant="ghost"
                onClick={onClose}
                disabled={mutation.isPending}
                aria-label="cancelar"
              >
                Cancelar
              </Button>
              <Button
                type="submit"
                disabled={!isFormValid || mutation.isPending}
                aria-label="confirmar"
              >
                {mutation.isPending ? 'Creando versión...' : 'Confirmar creación de versión'}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}
