import "./ReportInformation.scss";
import RoadType from "@/entities/RoadType/RoadType";
import ReportLike from "@/features/ReportLike/ReportLike";
import { IAuthor } from "@/shared/types/author-type";
import { ILocation } from "@/shared/types/location-type";
import calendar from "./icons/calendar.svg";
import { ROAD_TYPES_COLORS } from "@/shared/variables/road-types";
import Image from "next/image";
import ShowMapButton from "@/features/ShowMapButton/ShowMapButton";
import { getTranslations } from "next-intl/server";

interface IReportInformationProps {
  id: number;
  location: ILocation;
  date: string;
  description: string;
  category: number;
  total_likes: number;
  author: IAuthor;
}

const ReportInformation: React.FC<IReportInformationProps> = async ({
  id,
  location,
  date,
  description,
  category,
  total_likes,
  author,
}: IReportInformationProps) => {
  const t = await getTranslations("home");

  const ROAD_TYPES: Record<number, string> = {
    1: t("broken_roads"),
    2: t("accident_hotspots"),
    3: t("local_defects"),
    4: t("repair_plans"),
    5: t("repaired"),
    6: t("fixed_local_defects"),
  };

  const renderDescriptionWithLinks = (description: string) => {
    const regex = /(?:https?|ftp):\/\/[\n\S]+/g;
    return description.replace(regex, (match) => `<a href="${match}" target="_blank" rel="noopener noreferrer">${match}</a>`);
  };

  return (
    <div className="report-information">
      <RoadType color={ROAD_TYPES_COLORS[category]}>
        {ROAD_TYPES[category]}
      </RoadType>
      <h2>{location.address}</h2>
      <div className="report-information__date-and-like">
        <div className="report-information__date">
          <Image src={calendar} alt="Calendar Icon" />
          <p>
          {new Date(date).toLocaleDateString('ru-RU', {
          day: 'numeric',
          month: 'long',
          year: 'numeric'
          })}
          </p>
        </div>
        <ReportLike count={total_likes} report_id={id} />
      </div>

      <p className="report-information__description" dangerouslySetInnerHTML={{ __html: renderDescriptionWithLinks(description) }} />

      <p className="report-information__author">
        Автор обращения:{" "}
        <span>
          {author.first_name} {author.last_name.slice(0, 1)}.
        </span>
      </p>
      <ShowMapButton />
    </div>
  );
};

export default ReportInformation;
