import { useState, useEffect } from "react";
import { supabaseClient } from "@/utils/supabase";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; // Import Label component

function Informacion() {
  const [open, setOpen] = useState(false);
  const [conciertos, setConciertos] = useState([]);
  const [filteredConciertos, setFilteredConciertos] = useState([]);
  const [selectedConcierto, setSelectedConcierto] = useState(null);
  const [tipoAsiento, setTipoAsiento] = useState([]);
  const [numeroAsiento, setNumeroAsiento] = useState([]);
  const [selectedCategoria, setSelectedCategoria] = useState("");
  const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
  const [searchTerm, setSearchTerm] = useState("");
  const [precioAsiento, setPrecioAsiento] = useState(null); // Add state for seat price

  useEffect(() => {
    fetchConciertos();
    fetchAsientos();
  }, []);

  useEffect(() => {
    setFilteredConciertos(
      conciertos.filter((concierto) =>
        concierto.nombre.toLowerCase().includes(searchTerm.toLowerCase())
      )
    );
  }, [searchTerm, conciertos]);

  const fetchConciertos = async () => {
    let { data, error } = await supabaseClient.from("conciertos").select("*");
    if (error) {
      console.error(error);
    } else {
      setConciertos(data);
    }
  };

  const fetchAsientos = async () => {
    let { data, error } = await supabaseClient
      .from("asientos")
      .select("numero_asiento, categoria, precio"); // Include price in the select
    if (error) {
      console.error(error);
    } else {
      const uniqueCategories = [
        ...new Set(data.map((asiento) => asiento.categoria)),
      ];
      setTipoAsiento(uniqueCategories);
      setNumeroAsiento(data);
    }
  };

  const handleSelect = (concierto) => {
    setSelectedConcierto(concierto);
    setOpen(true);
  };

  const handleCategoriaChange = (categoria) => {
    setSelectedCategoria(categoria);
    setAsientoSeleccionado("");
    setPrecioAsiento(null); // Reset price when category changes
  };

  const handleAsientoChange = (asiento) => {
    setAsientoSeleccionado(asiento);
    const selectedAsiento = numeroAsiento.find(
      (item) => item.numero_asiento === asiento
    );
    setPrecioAsiento(selectedAsiento?.precio || null); // Set the price of the selected seat
  };

  const handleAgregarAlCarrito = () => {
    if (!selectedConcierto || !asientoSeleccionado) {
      alert("Selecciona un tipo de asiento antes de continuar.");
      return;
    }
  
    const carritoActual = JSON.parse(localStorage.getItem("carrito")) || [];
    const nuevoCarrito = [
      ...carritoActual,
      { ...selectedConcierto, asiento: asientoSeleccionado, precio: precioAsiento },
    ];
  
    localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
    setOpen(false);
  };

  const filteredAsientos = numeroAsiento
    .filter((asiento) => asiento.categoria === selectedCategoria)
    .sort((a, b) => a.numero_asiento - b.numero_asiento);

  return (
    <>
      <div className="space-y-4">
        <div className="w-full flex items-end">
          <div className="flex">
            <Input
              placeholder="Búsqueda por nombre"
              className="w-60"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
            <img src="/search.jpg" alt="search" className="h-7 w-7" />
          </div>
        </div>
        {filteredConciertos.map((concierto) => (
          <div
            key={concierto.id}
            className="flex items-center gap-4 p-4 border rounded-lg"
          > 
            <img
              src={`/images/${concierto.imagen || "default.jpeg"}`}
              alt={concierto.nombre}
              className="w-24 h-24 rounded-lg object-cover"
            />
            <div>
              <p className="text-lg font-semibold">{concierto.nombre}</p>
              <p className="text-sm text-gray-600">{concierto.fecha}</p>
            </div>
            <Button className="ml-auto" onClick={() => handleSelect(concierto)}>
              Seleccionar
            </Button>
          </div>
        ))}
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{selectedConcierto?.nombre}</DialogTitle>
            <p className="text-sm text-gray-600">{selectedConcierto?.fecha}</p>
          </DialogHeader>
          <div className="space-y-4">
            <Select onValueChange={handleCategoriaChange}>
              <SelectTrigger>
                <SelectValue placeholder="Selecciona un tipo de asiento" />
              </SelectTrigger>
              <SelectContent>
                {tipoAsiento.map((tipo) => (
                  <SelectItem key={tipo} value={tipo}>
                    {tipo}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-4">
            <Select onValueChange={handleAsientoChange}>
              <SelectTrigger>
                <SelectValue placeholder="Selecciona un asiento" />
              </SelectTrigger>
              <SelectContent>
                {filteredAsientos.map((asiento) => (
                  <SelectItem
                    key={asiento.numero_asiento}
                    value={asiento.numero_asiento}
                  >
                    {asiento.numero_asiento}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label>
              {precioAsiento !== null ? `Precio: $${precioAsiento}` : "Selecciona un asiento para ver el precio"}
            </Label>
          </div>
          <div className="flex justify-end gap-2 mt-4">
            <Button variant="outline" onClick={() => setOpen(false)}>
              Cancelar
            </Button>
            <Button onClick={handleAgregarAlCarrito}>Aceptar</Button>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}

export default Informacion;