"use client";

import React, { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Plus,
  Edit,
  Trash2,
  Trophy,
  Package,
  Coins,
  X,
  CheckCircle2,
} from "lucide-react";
import { Switch } from "@/components/ui/switch";
import { usePointTier } from "@/hooks/usePointTier";

export default function PointTiersPage() {
  const {
    selectedCompany,
    tiers,
    products, // Traemos la lista de productos del hook
    isLoading,
    showForm,
    editingTier,
    formData,
    setFormData,
    openCreateForm,
    openEditForm,
    closeForm,
    saveTier,
    deleteTier,
  } = usePointTier();

  // Estados locales para los inputs numéricos (evita problemas de cursor con tipos number)
  const [minPointsInput, setMinPointsInput] = useState(
    String(formData.min_points ?? 0),
  );
  const [quantityInput, setQuantityInput] = useState(
    String(formData.product_quantity ?? 1),
  );

  useEffect(() => {
    setMinPointsInput(String(formData.min_points ?? 0));
    setQuantityInput(String(formData.product_quantity ?? 1));
  }, [
    formData.min_points,
    formData.product_quantity,
    showForm,
    editingTier?.id,
  ]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    saveTier();
  };

  if (!selectedCompany) {
    return (
      <div className="p-8 text-center text-slate-600 animate-pulse">
        Cargando configuración de empresa...
      </div>
    );
  }

  return (
    <div className="p-8 max-w-7xl mx-auto animate-in fade-in duration-500">
      {/* Header */}
      <div className="flex justify-between items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
            Catálogo de Canje
          </h1>
          <p className="text-slate-500 mt-1">
            Gestiona los productos que tus clientes pueden obtener con sus
            puntos acumulados.
          </p>
        </div>
        {!showForm && (
          <Button
            onClick={openCreateForm}
            className="bg-blue-600 hover:bg-blue-700 shadow-md transition-all hover:scale-105"
          >
            <Plus className="w-4 h-4 mr-2" />
            Configurar Canje
          </Button>
        )}
      </div>

      {/* Formulario Dinámico */}
      {showForm && (
        <Card className="mb-10 border-blue-200 shadow-xl overflow-hidden bg-white/50 backdrop-blur-sm">
          <div className="h-1 bg-blue-600" />
          <CardHeader className="flex flex-row items-center justify-between space-y-0">
            <CardTitle className="text-xl flex items-center gap-2 text-blue-900">
              {editingTier ? (
                <Edit className="w-5 h-5" />
              ) : (
                <Package className="w-5 h-5" />
              )}
              {editingTier
                ? "Editar Configuración de Canje"
                : "Nueva Opción de Canje"}
            </CardTitle>
            <Button variant="ghost" size="icon" onClick={closeForm}>
              <X className="w-4 h-4" />
            </Button>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* Selector de Producto */}
                <div className="md:col-span-2 space-y-2">
                  <Label
                    htmlFor="idproduct"
                    className="text-slate-700 font-semibold"
                  >
                    Producto a Canjear
                  </Label>
                  <select
                    id="idproduct"
                    className="w-full flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:ring-2 focus:ring-blue-500 outline-none"
                    value={formData.idproduct}
                    onChange={(e) =>
                      setFormData({ ...formData, idproduct: e.target.value })
                    }
                    required
                  >
                    <option value="">
                      Selecciona un producto del inventario...
                    </option>
                    {products.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.name}
                      </option>
                    ))}
                  </select>
                </div>

                {/* Estado Activo */}
                <div className="flex items-center justify-start md:justify-center pt-6">
                  <div className="flex items-center space-x-3 bg-slate-50 p-3 rounded-lg border border-slate-100">
                    <Switch
                      {...({
                        checked: formData.is_active,
                        onCheckedChange: (checked: boolean) =>
                          setFormData({ ...formData, is_active: checked }),
                      } as any)}
                    />
                    <Label className="cursor-pointer text-slate-600 font-medium">
                      Habilitar Canje
                    </Label>
                  </div>
                </div>

                {/* Puntos Requeridos */}
                <div className="space-y-2">
                  <Label
                    htmlFor="min_points"
                    className="text-slate-700 font-semibold text-sm flex items-center gap-2"
                  >
                    <Coins className="w-4 h-4 text-amber-500" /> Puntos
                    Requeridos
                  </Label>
                  <Input
                    id="min_points"
                    type="number"
                    placeholder="Ej: 500"
                    value={minPointsInput}
                    onChange={(e) => {
                      setMinPointsInput(e.target.value);
                      setFormData({
                        ...formData,
                        min_points: Number(e.target.value),
                      });
                    }}
                    required
                  />
                </div>

                {/* Cantidad de Producto */}
                <div className="space-y-2">
                  <Label
                    htmlFor="quantity"
                    className="text-slate-700 font-semibold text-sm"
                  >
                    Cantidad a Entregar
                  </Label>
                  <Input
                    id="quantity"
                    type="number"
                    placeholder="Ej: 1"
                    value={quantityInput}
                    onChange={(e) => {
                      setQuantityInput(e.target.value);
                      setFormData({
                        ...formData,
                        product_quantity: Number(e.target.value),
                      });
                    }}
                    required
                  />
                </div>

                {/* Descripción Corta */}
                <div className="md:col-span-1 space-y-2">
                  <Label
                    htmlFor="description"
                    className="text-slate-700 font-semibold text-sm"
                  >
                    Nota / Descripción
                  </Label>
                  <Input
                    id="description"
                    placeholder="Ej: Válido solo viernes"
                    value={formData.description}
                    onChange={(e) =>
                      setFormData({ ...formData, description: e.target.value })
                    }
                  />
                </div>
              </div>

              <div className="flex gap-3 justify-end border-t pt-6">
                <Button type="button" variant="ghost" onClick={closeForm}>
                  Cancelar
                </Button>
                <Button
                  type="submit"
                  className="bg-blue-600 hover:bg-blue-700 min-w-[150px]"
                >
                  {editingTier ? "Guardar Cambios" : "Activar Canje"}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

      {/* Grid de Canjes */}
      {isLoading ? (
        <div className="flex flex-col items-center py-20 text-slate-400">
          <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 mb-4" />
          <p>Cargando catálogo...</p>
        </div>
      ) : tiers.length === 0 ? (
        <Card className="border-dashed border-2 bg-slate-50/50 py-16 flex flex-col items-center">
          <div className="bg-white p-4 rounded-full shadow-sm mb-4">
            <Trophy className="w-12 h-12 text-slate-200" />
          </div>
          <h3 className="text-lg font-medium text-slate-900">
            No hay premios configurados
          </h3>
          <p className="text-slate-500 mb-6 text-sm">
            Empieza añadiendo productos que tus clientes puedan canjear.
          </p>
          <Button
            onClick={openCreateForm}
            variant="outline"
            className="border-blue-200 text-blue-600 hover:bg-blue-50"
          >
            Configurar el primer premio
          </Button>
        </Card>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {tiers.map((tier) => (
            <Card
              key={tier.id}
              className="group hover:shadow-xl transition-all duration-300 border-slate-200 overflow-hidden"
            >
              <div
                className={`h-2 ${tier.is_active ? "bg-green-500" : "bg-slate-300"}`}
              />
              <CardHeader className="pb-2">
                <div className="flex justify-between items-start">
                  <div className="space-y-1">
                    <Badge
                      variant="outline"
                      className="text-[10px] uppercase font-bold text-slate-400 border-slate-200"
                    >
                      ID PROD: {tier.idproduct}
                    </Badge>
                    <CardTitle className="text-xl font-bold text-slate-800 group-hover:text-blue-600 transition-colors">
                      {tier.product?.name || "Producto desconocido"}
                    </CardTitle>
                  </div>
                  <Badge
                    variant="outline"
                    className={
                      tier.is_active
                        ? "bg-green-100 text-green-700 border-none"
                        : "bg-slate-100 text-slate-500 border-none"
                    }
                  >
                    {tier.is_active ? "Disponible" : "Pausado"}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-sm text-slate-500 line-clamp-2 min-h-[40px]">
                  {tier.description ||
                    "Sin descripción adicional para este canje."}
                </p>

                <div className="flex items-center gap-4 bg-blue-50/50 p-4 rounded-xl border border-blue-100/50">
                  <div className="flex-1">
                    <p className="text-[10px] text-blue-400 uppercase font-black">
                      Costo Canje
                    </p>
                    <div className="flex items-baseline gap-1">
                      <span className="text-2xl font-black text-blue-700">
                        {tier.min_points}
                      </span>
                      <span className="text-xs font-bold text-blue-600">
                        PTS
                      </span>
                    </div>
                  </div>
                  <div className="w-px h-10 bg-blue-100" />
                  <div className="flex-1 text-right">
                    <p className="text-[10px] text-slate-400 uppercase font-black">
                      Recibe
                    </p>
                    <p className="text-lg font-bold text-slate-700">
                      {tier.product_quantity}{" "}
                      <span className="text-sm font-normal text-slate-500">
                        unid.
                      </span>
                    </p>
                  </div>
                </div>

                <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity pt-2">
                  <Button
                    variant="outline"
                    className="flex-1 h-9 text-xs"
                    onClick={() => openEditForm(tier)}
                  >
                    <Edit className="w-3.5 h-3.5 mr-2" /> Editar
                  </Button>
                  <Button
                    variant="outline"
                    className="h-9 w-9 p-0 border-red-100 text-red-400 hover:text-red-600 hover:bg-red-50"
                    onClick={() => deleteTier(tier.id)}
                  >
                    <Trash2 className="w-3.5 h-3.5" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}