import { EventAndTablo } from "@xtablo/shared/types/events.types";
import { Button } from "@xtablo/ui/components/button";
import { Strong, Text } from "@xtablo/ui/components/typography";
import { CalendarIcon, User } from "lucide-react";
import { useTranslation } from "react-i18next";
import { twMerge } from "tailwind-merge";
import { CustomModal } from "./CustomModal";

interface EventDetailsModalProps {
  event: EventAndTablo | null;
  isOpen: boolean;
  onClose: () => void;
  onEdit?: () => void;
  canEdit?: boolean;
}

export const EventDetailsModal = ({
  event,
  isOpen,
  onClose,
  onEdit,
  canEdit = false,
}: EventDetailsModalProps) => {
  const { t, i18n } = useTranslation("components");

  if (!event) return null;

  const formatEventDateTime = (event: EventAndTablo) => {
    if (!event.start_date) return t("eventDetailsModal.dateNotDefined");

    try {
      const date = new Date(event.start_date);
      const options: Intl.DateTimeFormatOptions = {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric",
      };
      let formatted = date.toLocaleDateString(i18n.language, options);

      if (event.start_time) {
        // Remove seconds from time (HH:MM:SS -> HH:MM)
        const startTime = event.start_time.substring(0, 5);
        formatted += ` ${t("eventDetailsModal.from")} ${startTime}`;
        if (event.end_time) {
          const endTime = event.end_time.substring(0, 5);
          formatted += ` ${t("eventDetailsModal.to")} ${endTime}`;
        }
      }

      return formatted;
    } catch {
      return t("eventDetailsModal.invalidDate");
    }
  };

  const getEventStatusBadge = (event: EventAndTablo) => {
    if (!event.start_date) return null;

    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const eventDate = new Date(event.start_date);
    eventDate.setHours(0, 0, 0, 0);

    if (eventDate.getTime() === today.getTime()) {
      return (
        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
          {t("eventDetailsModal.status.today")}
        </span>
      );
    } else if (eventDate > today) {
      return (
        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
          {t("eventDetailsModal.status.upcoming")}
        </span>
      );
    } else {
      return (
        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
          {t("eventDetailsModal.status.past")}
        </span>
      );
    }
  };

  return (
    <CustomModal
      isOpen={isOpen}
      onClose={onClose}
      title={event.title || t("eventDetailsModal.title")}
    >
      <div className="space-y-6">
        <div className="flex items-start space-x-3">{getEventStatusBadge(event)}</div>
        {/* Date and Time */}
        <div className="flex items-start space-x-3">
          <CalendarIcon className="w-5 h-5 text-gray-400 mt-0.5" />
          <div>
            <Strong className="text-sm text-gray-900 dark:text-gray-100">
              {t("eventDetailsModal.labels.dateTime")}
            </Strong>
            <Text className="text-gray-600 dark:text-gray-300">{formatEventDateTime(event)}</Text>
          </div>
        </div>

        {/* Tablo */}
        {event.tablo_name && (
          <div className="flex items-start space-x-3">
            <div className={twMerge("w-5 h-5 rounded mt-0.5", event.tablo_color)} />
            <div>
              <Strong className="text-sm text-gray-900 dark:text-gray-100">
                {t("eventDetailsModal.labels.table")}
              </Strong>
              <Text className="text-gray-600 dark:text-gray-300">{event.tablo_name}</Text>
            </div>
          </div>
        )}

        {/* Description */}
        {event.description && (
          <div className="flex items-start space-x-3">
            <User className="w-5 h-5 text-gray-400 mt-0.5" />
            <div className="flex-1">
              <Strong className="text-sm text-gray-900 dark:text-gray-100">
                {t("eventDetailsModal.labels.description")}
              </Strong>
              <Text className="text-gray-600 dark:text-gray-300 whitespace-pre-wrap">
                {event.description}
              </Text>
            </div>
          </div>
        )}

        {/* Footer */}
        <div className="flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700">
          <Button variant="outline" onClick={onClose}>
            {t("eventDetailsModal.buttons.close")}
          </Button>
          {canEdit && onEdit && (
            <Button onClick={onEdit}>{t("eventDetailsModal.buttons.edit")}</Button>
          )}
        </div>
      </div>
    </CustomModal>
  );
};
