import { Button, Divider } from "antd";
import BackIcon from "components/Icons/BackIcon.tsx";
import NextIcon from "components/Icons/NextIcon.tsx";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import { ProGray1 } from "ThemeConstants";
import styles from "./TimeEstimateCard.module.css";

const timeSlots = [
  "12:00",
  "1:00",
  "2:00",
  "3:00",
  "4:00",
  "5:00",
  "6:00",
  "7:00",
  "8:00",
  "9:00",
  "10:00",
  "11:00",
];
interface EstimateTimeContentProps {
  onSave: (date: Date, time: string) => void;
  initialDate: Date;
  onClose: () => void;
}

export default function Content({
  onSave,
  initialDate,
  onClose,
}: EstimateTimeContentProps) {
  const { t } = useTranslation();
  const [selectedDate, setSelectedDate] = useState(initialDate);
  const [selectedTime, setSelectedTime] = useState("12:00");
  const [isAM, setIsAM] = useState(true);
  const { isRTL } = useAppSelector((state) => state.locale);

  useEffect(() => {
    setSelectedDate(initialDate);
  }, [initialDate]);

  const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-US", {
      weekday: "long",
      month: "short",
      day: "numeric",
    });
  };

  const goToPreviousDay = () => {
    const newDate = new Date(selectedDate);
    newDate.setDate(newDate.getDate() - 1);
    setSelectedDate(newDate);
  };

  const goToNextDay = () => {
    const newDate = new Date(selectedDate);
    newDate.setDate(newDate.getDate() + 1);
    setSelectedDate(newDate);
  };

  const handleTimeSelect = (time: string) => {
    setSelectedTime(time);
  };

  const handleSave = () => {
    const [hours, minutes] = selectedTime.split(":");
    const date = new Date(selectedDate);
    date.setHours(
      isAM ? parseInt(hours) : parseInt(hours) + 12,
      parseInt(minutes),
      0,
      0,
    );

    onSave(date, `${selectedTime} ${isAM ? "AM" : "PM"}`);
    onClose();
  };

  return (
    <div style={{ padding: "0 20px", marginTop: 30 }}>
      {/* Day Selection */}
      <div style={{ marginBottom: 30 }}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            marginBottom: 20,
          }}
        >
          <Button
            type="text"
            icon={
              isRTL ? (
                <NextIcon className={styles.nextIcon} />
              ) : (
                <BackIcon className={styles.backIcon} />
              )
            }
            onClick={goToPreviousDay}
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          />

          <div
            style={{
              flex: 1,
              textAlign: "center",
              padding: "0 20px",
            }}
          >
            <div
              style={{
                fontSize: 20,
                fontWeight: 600,
                color: ProGray1,
                marginBottom: 4,
              }}
            >
              {formatDate(selectedDate)}
            </div>
          </div>

          <Button
            type="text"
            icon={
              isRTL ? (
                <BackIcon className={styles.backIcon} />
              ) : (
                <NextIcon className={styles.nextIcon} />
              )
            }
            onClick={goToNextDay}
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          />
        </div>
      </div>

      {/* Time Selection */}
      <div>
        {/* AM/PM Toggle */}
        <div
          style={{
            display: "flex",
            justifyContent: "end",
            marginBottom: 20,
            gap: 10,
          }}
        >
          <Button
            onClick={() => setIsAM(true)}
            className={styles.toggleButton + " " + (isAM ? styles.active : "")}
          >
            AM
          </Button>
          <Button
            onClick={() => setIsAM(false)}
            className={styles.toggleButton + " " + (!isAM ? styles.active : "")}
          >
            PM
          </Button>
        </div>

        {/* Time Slots Grid */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 12,
            marginBottom: 30,
          }}
        >
          {timeSlots.map((time) => (
            <Button
              key={time}
              onClick={() => handleTimeSelect(time)}
              className={
                styles.timeButton +
                " " +
                (selectedTime === time ? styles.active : "")
              }
            >
              {time}
            </Button>
          ))}
        </div>

        <Divider />

        {/* Save Button */}
        <Button
          type="primary"
          onClick={handleSave}
          style={{
            width: "100%",
            height: 50,
            fontSize: 16,
            fontWeight: 600,
            backgroundColor: "var(--primary)",
            border: "none",
          }}
        >
          {t("cart.confirmTime")}
        </Button>
      </div>
    </div>
  );
}
