"use client";

import { useState } from "react";
import { Plus, Trash2, Edit, Gift } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

import { GiftTierModal } from "@/components/gifts/gifttiermodal";
import { useGiftTiers, GiftTier } from "@/hooks/useGiftTiers";

export default function GiftTiersPage() {
  const [selectedCompany] = useState({ id: 1 });
  const [openModal, setOpenModal] = useState(false);
  const [editingTier, setEditingTier] = useState<GiftTier | null>(null);

  const {
    giftTiers,
    isLoading,
    createGiftTier,
    updateGiftTier,
    deleteGiftTier,
  } = useGiftTiers(selectedCompany?.id);

  const handleDelete = (id: number) => {
    const confirmDelete = window.confirm(
      "¿Estás seguro de eliminar esta regla?",
    );
    if (!confirmDelete) return;

    deleteGiftTier(id);
  };

  if (isLoading) {
    return <div className="p-8 text-center">Cargando reglas...</div>;
  }

  return (
    <div className="p-8 max-w-7xl mx-auto space-y-6">
      {/* HEADER */}
      <div className="flex justify-between items-start mb-8">
        {" "}
        <div>
          <h1 className="text-3xl font-bold text-gradient mb-2">
            Reglas de Regalos
          </h1>
          <p className="text-slate-500 font-medium tracking-tight">
            Define reglas automáticas de regalos por monto de compra
          </p>
        </div>
        <Button
          className="bg-blue-600 hover:bg-blue-700 shadow-md shadow-blue-200 transition-all px-6"
          onClick={() => {
            setEditingTier(null);
            setOpenModal(true);
          }}
        >
          <Plus className="w-4 h-4 mr-2" />
          Nuevo
        </Button>
      </div>

      {/* EMPTY STATE */}
      {giftTiers.length === 0 ? (
        <Card className="text-center py-12">
          <CardContent className="space-y-4">
            <Gift className="w-12 h-12 mx-auto text-slate-400" />
            <h3 className="text-lg font-semibold">No hay reglas de regalos</h3>
            <p className="text-slate-500">Crea tu primera regla de regalo</p>

            <Button
              className="bg-black text-white"
              onClick={() => {
                setEditingTier(null);
                setOpenModal(true);
              }}
            >
              <Plus className="w-4 h-4 mr-2" />
              Crear Regla
            </Button>
          </CardContent>
        </Card>
      ) : (
        /* GRID */
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {giftTiers.map((tier) => (
            <Card
              key={tier.id}
              className="relative overflow-hidden bg-white border-slate-200/60 shadow-sm hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-300 group"
            >
              <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-600 opacity-70" />

              <CardHeader className="pb-2">
                <CardTitle className="text-xl font-bold text-slate-800 flex items-center gap-2">
                  <Gift className="w-5 h-5 text-blue-500" />
                  Desde ${tier.min_amount}
                </CardTitle>
              </CardHeader>

              <CardContent className="space-y-3">
                <div>
                  <span className="text-sm text-slate-500">Cantidad:</span>
                  <div className="font-semibold">{tier.gift_quantity}</div>
                </div>

                <div>
                  <span className="text-sm text-slate-500">Marcas:</span>
                  <div className="flex flex-wrap gap-1 mt-1">
                    {tier.brands?.length ? (
                      tier.brands.map((b, i) => (
                        <Badge key={i} variant="outline" className="text-xs">
                          {b}
                        </Badge>
                      ))
                    ) : (
                      <span className="text-slate-400 text-sm">-</span>
                    )}
                  </div>
                </div>

                <div>
                  <span className="text-sm text-slate-500">Volúmenes:</span>
                  <div className="flex flex-wrap gap-1 mt-1">
                    {tier.volumes?.length ? (
                      tier.volumes.map((v, i) => (
                        <Badge key={i} variant="secondary" className="text-xs">
                          {v}ml
                        </Badge>
                      ))
                    ) : (
                      <span className="text-slate-400 text-sm">-</span>
                    )}
                  </div>
                </div>

                {tier.description && (
                  <div className="text-sm text-slate-600 border-t pt-2">
                    {tier.description}
                  </div>
                )}

                {/* ACTIONS */}
                <div className="flex gap-2 pt-3">
                  <Button
                    variant="outline"
                    className="flex-1"
                    onClick={() => {
                      setEditingTier(tier);
                      setOpenModal(true);
                    }}
                  >
                    <Edit className="w-4 h-4 mr-1" />
                    Editar
                  </Button>

                  <Button
                    variant="outline"
                    className="text-red-600"
                    onClick={() => handleDelete(tier.id)}
                  >
                    <Trash2 className="w-4 h-4" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* MODAL */}
      <GiftTierModal
        open={openModal}
        onClose={() => setOpenModal(false)}
        initialData={editingTier}
        onSave={(data: any) => {
          if (editingTier) {
            updateGiftTier({
              id: editingTier.id,
              payload: {
                ...data,
                idcompany: selectedCompany.id,
              },
            });
          } else {
            createGiftTier({
              ...data,
              idcompany: selectedCompany.id,
            });
          }

          setOpenModal(false);
        }}
      />
    </div>
  );
}