import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import {
  Box,
  Typography,
  Paper,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  Button,
} from "@mui/material";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { useNavigate } from "react-router-dom";
import dayjs from "dayjs";
import { useTranslation } from "react-i18next";
import { eventiService } from "../services/eventiService";

export default function CalendarioPage() {
  const navigate = useNavigate();
  const { t, i18n } = useTranslation();
  const [dateRange, setDateRange] = useState({
    start: dayjs().startOf("month").format("YYYY-MM-DD"),
    end: dayjs().endOf("month").format("YYYY-MM-DD"),
  });
  const [newEventDialog, setNewEventDialog] = useState<{
    open: boolean;
    date: string;
    formattedDate: string;
  }>({
    open: false,
    date: "",
    formattedDate: "",
  });

  const { data: eventi = [] } = useQuery({
    queryKey: ["calendario", dateRange],
    queryFn: () => eventiService.getCalendario(dateRange.start, dateRange.end),
  });

  const handleDateClick = (info: any) => {
    // Mostra dialog per chiedere se creare nuovo evento
    setNewEventDialog({
      open: true,
      date: info.dateStr,
      formattedDate: dayjs(info.dateStr).format("DD/MM/YYYY"),
    });
  };

  const handleCreateEvent = () => {
    // Naviga alla pagina nuovo evento con la data preselezionata
    navigate("/eventi/0", { state: { dataEvento: newEventDialog.date } });
    setNewEventDialog({ open: false, date: "", formattedDate: "" });
  };

  const handleCloseDialog = () => {
    setNewEventDialog({ open: false, date: "", formattedDate: "" });
  };

  const handleEventClick = (info: any) => {
    navigate(`/eventi/${info.event.id}`);
  };

  const handleDatesSet = (info: any) => {
    setDateRange({
      start: dayjs(info.start).format("YYYY-MM-DD"),
      end: dayjs(info.end).format("YYYY-MM-DD"),
    });
  };

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        {t("calendar.title")}
      </Typography>

      <Paper sx={{ p: 2 }}>
        <FullCalendar
          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
          initialView="dayGridMonth"
          headerToolbar={{
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay",
          }}
          locale={i18n.language}
          events={eventi.map((e) => ({
            id: String(e.id),
            title: e.title,
            start: e.start,
            end: e.end,
            backgroundColor: e.color,
            borderColor: e.color,
            extendedProps: {
              cliente: e.cliente,
              location: e.location,
              numeroOspiti: e.numeroOspiti,
            },
          }))}
          dateClick={handleDateClick}
          eventClick={handleEventClick}
          datesSet={handleDatesSet}
          height="auto"
          eventTimeFormat={{
            hour: "2-digit",
            minute: "2-digit",
            meridiem: false,
          }}
          buttonText={{
            today: t("calendar.today"),
            month: t("calendar.month"),
            week: t("calendar.week"),
            day: t("calendar.day"),
          }}
        />
      </Paper>

      {/* Dialog per creazione nuovo evento */}
      <Dialog open={newEventDialog.open} onClose={handleCloseDialog}>
        <DialogTitle>{t("calendar.newEvent")}</DialogTitle>
        <DialogContent>
          <DialogContentText>
            {t("calendar.createEventConfirm")}{" "}
            <strong>{newEventDialog.formattedDate}</strong>?
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseDialog}>{t("common.cancel")}</Button>
          <Button onClick={handleCreateEvent} variant="contained" autoFocus>
            {t("calendar.createEvent")}
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}