"use client";
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { envConfig } from "@/app/lib/config";

import SearchDate from "../SearchDate/SearchDate";
import axios from "axios";
import Cookies from "js-cookie";

interface Tables {
  no_mesa: number;
  no_cuenta: number;
  hora_entrada: string;
  tiempo_asignado: number;
  hora_salida: string;
}

export default function BitacoraMesas() {
  const [tables, setTables] = useState<Tables[]>([]);
  const searchParams = useSearchParams();
  const date = searchParams.get("date");

  const token = Cookies.get("token");
  const headers = { Authorization: `Bearer ${token}` };

  useEffect(() => {
    if (!date) return;

    axios.post(`${envConfig.apiUrl}/bitacora-mesa/mesas-por-dia`, {
      fecha: date,
    }, { headers })
      .then(res => {
        setTables(res.data);
      })
      .catch(err => {
        console.error(err);
      });

  }, [date]);

  return (
    <>
      <SearchDate />

      <div style={{ maxHeight: "400px", overflowY: "auto", border: "1px solid #ccc" }}>
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead>
            <tr>
              <th>Mesa</th>
              <th>Cuenta</th>
              <th>Hora Entrada</th>
              <th>Tiempo Asignado</th>
              <th>Hora Salida</th>
            </tr>
          </thead>
          <tbody>
            {tables.length === 0 ? (
              <tr>
                <td colSpan={5} style={{ textAlign: "center" }}>
                  No hubo mesas utilizadas en esta fecha
                </td>
              </tr>
            ) : (
              tables.map((table, index) => (
                <tr key={index}>
                  <td>{table.no_mesa}</td>
                  <td>{table.no_cuenta}</td>
                  <td>{new Date(table.hora_entrada).toLocaleString()}</td>
                  <td>{table.tiempo_asignado}</td>
                  <td>{new Date(table.hora_salida).toLocaleString()}</td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </>
  );
}