"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/hooks/use-toast"
import { useAuthStore } from "@/lib/auth-store"
import { hasPermission } from "@/lib/permissions"
import { AdminProtected } from "@/components/admin-protected"
import { ArrowLeft, Loader2, Save, Plus, Trash2, Truck } from "lucide-react"

/**
 * Zonas de delivery por sede.
 *
 * Antes estaban fijas en el código y eran las mismas para las dos sedes: La
 * Churuata cobraba $3 de envío a Catia La Mar, que es donde está. Cambiar un
 * precio exigía recompilar y desplegar.
 */

interface Zone {
  id: string
  name: string
  deliveryCost: number
  estimatedTime: string
}

const SEDES = [
  { slug: "sport-bar", nombre: "VIP Sport Bar" },
  { slug: "la-playa", nombre: "La Churuata VIP" },
]

/** "La Guaira Centro" → "la_guaira_centro" */
function slugificar(nombre: string): string {
  return nombre
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[^a-z0-9]+/g, "_")
    .replace(/^_+|_+$/g, "")
}

function ZonasDeSede({ sede, nombre }: { sede: string; nombre: string }) {
  const { user } = useAuthStore()
  const [zones, setZones] = useState<Zone[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)

  useEffect(() => {
    const cargar = async () => {
      setIsLoading(true)
      try {
        const res = await fetch(`/api/delivery-zones?sede=${sede}`)
        if (res.ok) {
          const data = await res.json()
          setZones(data.zones || [])
        }
      } catch {
        toast({
          title: "Error",
          description: "No se pudieron cargar las zonas",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }
    cargar()
  }, [sede])

  const actualizar = (index: number, campo: keyof Zone, valor: string) => {
    setZones((prev) =>
      prev.map((z, i) => {
        if (i !== index) return z
        if (campo === "deliveryCost") {
          return { ...z, deliveryCost: valor === "" ? 0 : Number(valor) }
        }
        if (campo === "name") {
          // El id solo se regenera si la zona es nueva: cambiarlo en una zona ya
          // usada rompería los pedidos viejos que lo tienen guardado.
          return { ...z, name: valor }
        }
        return { ...z, [campo]: valor }
      })
    )
  }

  const agregar = () => {
    setZones((prev) => [
      ...prev,
      { id: `zona_${prev.length + 1}`, name: "", deliveryCost: 0, estimatedTime: "30-45 min" },
    ])
  }

  const quitar = (index: number) => {
    setZones((prev) => prev.filter((_, i) => i !== index))
  }

  const guardar = async () => {
    const incompletas = zones.filter((z) => !z.name.trim())
    if (incompletas.length > 0) {
      toast({
        title: "Falta el nombre de una zona",
        description: "Ninguna zona puede quedar sin nombre.",
        variant: "destructive",
      })
      return
    }

    setIsSaving(true)
    try {
      const conIds = zones.map((z) => ({
        ...z,
        id: z.id && !z.id.startsWith("zona_") ? z.id : slugificar(z.name),
      }))

      const res = await fetch("/api/delivery-zones", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          sede,
          zones: conIds,
          staffId: user?.id,
          staffName: user?.username,
          staffRole: user?.role,
        }),
      })

      if (!res.ok) {
        const body = await res.json().catch(() => ({}))
        throw new Error(body.error || "No se pudo guardar")
      }

      const data = await res.json()
      setZones(data.zones)
      toast({
        title: "Zonas actualizadas",
        description: `${nombre}: ${data.zones.length} zonas guardadas. El cambio aplica al próximo pedido.`,
      })
    } catch (error) {
      toast({
        title: "Error",
        description: error instanceof Error ? error.message : "No se pudo guardar",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    )
  }

  return (
    <div className="space-y-4">
      <p className="text-sm text-muted-foreground">
        El costo de envío se cobra según esta tabla, del lado del servidor. El tiempo se muestra al
        cliente como rango — «40-55 min» genera menos frustración que «45 min».
      </p>

      <div className="space-y-3">
        {zones.map((zone, index) => (
          <div
            key={index}
            className="grid grid-cols-1 sm:grid-cols-[1fr_120px_140px_auto] gap-3 items-end p-3 rounded-lg border bg-muted/30"
          >
            <div className="space-y-1.5">
              <Label className="text-xs">Zona</Label>
              <Input
                value={zone.name}
                onChange={(e) => actualizar(index, "name", e.target.value)}
                placeholder="Ej: Catia La Mar"
              />
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs">Costo ($)</Label>
              <Input
                type="number"
                step="0.50"
                min="0"
                value={zone.deliveryCost}
                onChange={(e) => actualizar(index, "deliveryCost", e.target.value)}
              />
            </div>
            <div className="space-y-1.5">
              <Label className="text-xs">Tiempo</Label>
              <Input
                value={zone.estimatedTime}
                onChange={(e) => actualizar(index, "estimatedTime", e.target.value)}
                placeholder="30-45 min"
              />
            </div>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => quitar(index)}
              aria-label={`Quitar ${zone.name || "zona"}`}
              className="text-muted-foreground hover:text-destructive"
            >
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>
        ))}
      </div>

      <div className="flex flex-wrap gap-3">
        <Button variant="outline" onClick={agregar}>
          <Plus className="h-4 w-4 mr-2" />
          Agregar zona
        </Button>
        <Button onClick={guardar} disabled={isSaving}>
          {isSaving ? (
            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
          ) : (
            <Save className="h-4 w-4 mr-2" />
          )}
          Guardar zonas de {nombre}
        </Button>
      </div>
    </div>
  )
}

export default function DeliveryZonesPage() {
  const router = useRouter()
  const { user } = useAuthStore()
  const puedeEditar = user?.role && hasPermission(user.role, "settings.update")

  return (
    <AdminProtected>
      <div className="max-w-4xl mx-auto p-4 sm:p-6 space-y-6">
        <div className="flex items-center gap-3">
          <Button variant="ghost" size="icon" onClick={() => router.push("/admin/dashboard")}>
            <ArrowLeft className="h-5 w-5" />
          </Button>
          <div>
            <h1 className="text-2xl font-bold flex items-center gap-2">
              <Truck className="h-6 w-6 text-naranja-vip" />
              Zonas de Delivery
            </h1>
            <p className="text-sm text-muted-foreground">
              Cada sede cobra según sus propias zonas
            </p>
          </div>
        </div>

        {!puedeEditar ? (
          <Card>
            <CardContent className="py-10 text-center text-muted-foreground">
              No tienes permisos para modificar las zonas de delivery.
            </CardContent>
          </Card>
        ) : (
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Zonas por sede</CardTitle>
            </CardHeader>
            <CardContent>
              <Tabs defaultValue={SEDES[0].slug}>
                <TabsList className="mb-4">
                  {SEDES.map((s) => (
                    <TabsTrigger key={s.slug} value={s.slug}>
                      {s.nombre}
                    </TabsTrigger>
                  ))}
                </TabsList>
                {SEDES.map((s) => (
                  <TabsContent key={s.slug} value={s.slug}>
                    <ZonasDeSede sede={s.slug} nombre={s.nombre} />
                  </TabsContent>
                ))}
              </Tabs>
            </CardContent>
          </Card>
        )}
      </div>
    </AdminProtected>
  )
}