import { Box, Typography } from "@mui/material"
import { Navigate, useNavigate, useParams } from "react-router-dom"
import { useTranslation } from "react-i18next"
import { ArrowForward } from "@mui/icons-material"
import { parseDate } from "../../../../shared/Functions.tsx"
import EventDetailURLButton from "./components/EventDetailURLButton.tsx"
import NotFoundPage from "../../../NotFoundError/NotFoundPage.tsx"
import GeneralSuspenseFallback from "../../../../components/GeneralSuspenseFallback.tsx"
import { useFetchEventDetail } from "../../services/FetchHooks.ts"
import { STAGE_TYPE_DATABASE_ID } from "../Results/shared/constants.ts"
import { DateTime } from "luxon"
import CountryFlag from "../../../../components/CountryFlag"
import { useCountry } from "../../../../services/countryService/countryHooks.ts"

const styles = {
  titleEvent: {
    marginTop: "6px",
    fontWeight: "bold",
    fontSize: "x-large",
    marginLeft: "48px",
    marginRight: "48px",
  },
  aligns: {
    marginLeft: "48px",
    marginRight: "48px",
  },
  listStages: {
    borderBottom: "1px solid",
    borderColor: "text.primary",
    marginLeft: "48px",
    marginRight: "48px",
    height: "min-content",
    padding: "24px 0px",
  },
}

export default function EventDetail() {
  const { id } = useParams()
  const { t } = useTranslation()
  const countryT = useCountry()
  const navigate = useNavigate()

  const { data, isLoading, error, isError } = useFetchEventDetail(id as string)

  const detail = data?.data

  function getDatesOfEvent() {
    if (detail?.initial_date && detail?.final_date) {
      const initDateParse = parseDate(detail.initial_date)
      const finalDateParse = parseDate(detail.final_date)

      if (initDateParse == finalDateParse) {
        return (
          <Typography style={styles.aligns} sx={{ color: "text.secondary" }}>
            {initDateParse}
          </Typography>
        )
      } else {
        return (
          <Typography style={styles.aligns} sx={{ color: "text.secondary", marginTop: "6px" }}>
            {initDateParse} - {finalDateParse}
          </Typography>
        )
      }
    }
    return null
  }

  if (isLoading) {
    return <GeneralSuspenseFallback />
  } else if (isError) {
    const error_status = error.response?.status
    if (error_status == 403 || error_status == 404) {
      return <NotFoundPage />
    }
    throw error
  } else if (detail?.stages.length == 1) {
    // navigate to stage for single stage events
    return <Navigate to={`/competitions/${id}/${detail.stages[0].id}`} replace={true} />
  } else
    return (
      <Box
        sx={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <Box
          sx={{
            width: "100%",
            minHeight: "35%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            bgcolor: "primary.light",
            paddingY: 3,
            flexGrow: 1,
            flexShrink: 0,
          }}
        >
          {detail?.country_code ? (
            <Box
              sx={{
                ...styles.aligns,
                display: "flex",
                flexDirection: "row",
                width: "100%",
                gap: "6px",
                marginBottom: "4px",
                alignItems: "center",
                justifyContent: "flex-start",
              }}
            >
              <CountryFlag
                code={detail?.country_code.toLowerCase()}
                slotProps={{ image: { width: "12px" } }}
              />
              <Typography sx={{ fontSize: 10, color: "text.secondary" }}>
                {countryT(detail.country_code)}
              </Typography>
            </Box>
          ) : null}
          <Typography style={styles.aligns} sx={{ color: "text.secondary", fontSize: "small" }}>
            {detail?.organizer?.name}
          </Typography>
          <Typography color={"secondary.main"} style={styles.titleEvent}>
            {detail?.description}
          </Typography>
          {getDatesOfEvent()}
          <EventDetailURLButton
            url={detail?.website}
            marginLeft={styles.aligns.marginLeft}
            marginRight={styles.aligns.marginRight}
          />
        </Box>
        <Box
          sx={{
            height: "100%",
            bgcolor: "white",
          }}
        >
          <Box sx={{ paddingTop: "48px", paddingBottom: 5 }}>
            <Typography
              sx={{ fontSize: "large", fontWeight: "bold", paddingBottom: "12px" }}
              style={styles.aligns}
            >
              {t("Stages")}
            </Typography>

            {detail?.stages.map((stage) => {
              let description = stage.description
              if (stage.stage_type.id === STAGE_TYPE_DATABASE_ID.Totals) {
                description = t("EventAdmin.Stages.StagesTypes.Totals.title")
              }
              return (
                <Box
                  style={styles.listStages}
                  sx={{
                    cursor: "pointer",
                    "&:hover": {
                      backgroundColor: "#fffbf0",
                    },
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                  }}
                  key={stage.id}
                  onClick={() =>
                    void navigate(`/competitions/${id}/${stage.id}`, {
                      state: {
                        eventName: detail?.description,
                        stageName: stage.description,
                        stageTypeId: stage.stage_type.id,
                        singleStage: false,
                      },
                    })
                  }
                >
                  <Box
                    sx={{
                      display: "flex",
                      flexDirection: "column",
                      alignItems: "flex-start",
                      gap: 0.5,
                    }}
                  >
                    <Typography color={"text.primary"}>{description}</Typography>
                    {stage.start ? (
                      <Typography sx={{ color: "text.secondary", fontSize: "small" }}>
                        {DateTime.fromISO(stage.start).toLocaleString(
                          DateTime.DATETIME_MED_WITH_WEEKDAY,
                        )}
                      </Typography>
                    ) : null}
                  </Box>
                  <ArrowForward sx={{ color: "text.primary" }} />
                </Box>
              )
            })}
          </Box>
        </Box>
      </Box>
    )
}
