"use client";

import React from "react";
import Image from "next/image";
import clsx from "clsx";

import {
  CalendarImage,
  Coorganizers,
  Organizer,
  Timing,
} from "@/lib/types/Calendar.type";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";

interface Props {
  id: number;
  description: string;
  starts_at: string | null;
  ends_at: string | null;
  date: string;
  title: string;
  web_site: string | null;
  location: string | null;
  timing: Timing[];
  event_topic: string | null;
  organizers: Organizer[];
  category: string;
  images: CalendarImage[];
  dark?: boolean;
  coorganizers?: Coorganizers[];
}

export const EventCard = ({
  id,
  coorganizers,
  description,
  starts_at,
  ends_at,
  title,
  date,
  organizers,
  category,
  images,
  dark = false,
}: Props) => {
  const formatDate = (dateString: string | null) => {
    if (!dateString) return null;
    const dateParts = dateString.split(" ");
    const date = dateParts[0];
    const parts = date.split("-");
    if (parts.length === 3 && parts[0].length === 4) {
      return `${parts[2]}.${parts[1]}.${parts[0]}`;
    }
    return dateString;
  };

  const t = useTranslations("events");

  return (
    <Link className="w-full cursor-default" href={`/calendar/${id}`}>
      <div
        className={clsx(
          "cursor-pointer overflow-hidden transition-all w-full lg:h-[228px] lg:p-0 p-4 rounded-[4px]",
          {
            "bg-white": dark,
          }
        )}
      >
        <div
          className={clsx(
            "md:hidden flex flex-col gap-8 border-b-[1px] border-opacity-10 mb-5 pb-5 md:gap-y-5 min-w-[200px]",
            {
              "border-gray3": dark,
              "border-lightCyan": !dark,
            }
          )}
        >
          <div
            className={clsx(
              "text-[16px] flex leading-[150%] md:text-[18px] font-semibold",
              {}
            )}
          >
            {formatDate(starts_at) && <p className="mr-5">{formatDate(starts_at)}</p>}
            {formatDate(ends_at) && <p>{formatDate(ends_at)}</p>}
          </div>
        </div>

        <div className="flex md:flex-nowrap flex-wrap items-start lg:gap-x-[33px] gap-[10px]">
          <Image
            src={images?.[0]?.path || ""}
            width={228}
            height={228}
            alt="Event Image"
            className="lg:size-[228px] size-[100px] object-cover rounded-l-[4px]"
          />

          <div className="flex flex-col gap-[10px] md:gap-4 max-w-[683px] py-6  w-full">
            <p className="text-[12px] text-[#6B7674]  font-normal leading-none">
              {category}
            </p>
            <div className="flex flex-col gap-[10px] md:gap-[15px]">
              <h3
                className={clsx(
                  "text-[18px] font-medium line leading-[115%] lg:leading-8 md:leading-[100%]"
                )}
              >
                {title}
              </h3>
            </div>
            {organizers && organizers?.length > 0 &&
              <div className="flex flex-col gap-[10px]">
                <p className="text-[#6B7674] uppercase font-normal leading-none text-[10px]">
                  {t("organiserLabel")}
                </p>
                <p className="text-[#6B7674] font-normal text-[13px] leading-[125%]">
                  {organizers ? organizers[0]?.name : null}
                </p>
              </div>
            }
            {coorganizers && coorganizers?.length > 0 && (
              <div className="flex flex-col gap-[10px]">
                <p className="text-[#6B7674] uppercase font-normal leading-none text-[10px]">
                  {t("coOrganiserLabel")}
                </p>
                <p className="text-[#6B7674] font-normal text-[13px] leading-[125%]">
                  {coorganizers ? coorganizers[0]?.name : null}
                </p>
              </div>
            )}
          </div>

          <div className="hidden md:flex text-2xl flex-col text-white leading- none h-[228px] min-w-[245px] items-center justify-center bg-[#31A898] px-12 text-center">
            {formatDate(starts_at) && <p>{formatDate(starts_at)}</p>}
            {formatDate(ends_at) && <p>{formatDate(ends_at)}</p>}
          </div>
        </div>
      </div>
    </Link>
  );
};
