"use client";

import { Project } from "@/types/types";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import RoundedDiv from "../elements/RoundedDiv";
import Image from "next/image";
import Link from "next/link";
import ProjectCreator from "./ProjectPage/ProjectCreator";
import LocationModal from "@/components/models/ModelPage/LocationModal";
import { cn } from "@/lib/utils";

function MainProjectCard({
  project,
  statusType,
  color,
  full,
  borderColor,
  textColor,
  isSample,
  sampleType,
  borderless,
  onRoleSelect,
  selectedRoleId,
}: {
  project: Project;
  statusType?: string;
  color?: string;
  borderColor?: string;
  textColor?: string;
  full?: boolean;
  isSample?: boolean;
  sampleType?: string;
  borderless?: boolean;
  onRoleSelect?: (roleId: string) => void;
  selectedRoleId?: string | null;
}) {
  const { t } = useTranslation("common");
  const [showLocation, setShowLocation] = useState(false);

  const getAgeLabel = (age?: string) => {
    if (!age || age === "all") return t("filters.all");
    if (age === "old" || age === "25-30") return "25-30";
    if (age === "18-25") return "18-25";
    return age;
  };

  const getGenderLabel = (gender?: string) => {
    if (gender === "male") return t("auth.male");
    if (gender === "female") return t("auth.female");
    if (gender === "any") return t("projects.newProject.genderAny");
    return "";
  };

  const roles = project?.roles || [];
  const expertiseLabel =
    roles.length > 0
      ? roles.map((r) => r.expertise).join(" / ")
      : project?.expertise;

  return (
    <div
      className={cn(
        "relative my-4 w-full text-xs font-semibold md:my-5 md:text-sm",
        borderless
          ? "rounded-none border-0 bg-transparent px-0 py-2"
          : "rounded-3xl border border-border-secondary-dark bg-tertiary-light px-5 py-4 dark:bg-tertiary-dark dark:border-border-secondary-dark",
        !borderless &&
          (project?.project_type === "highlight" ||
            (isSample && sampleType == "highlight"))
          ? "!border-rose-300 !bg-gradient-to-r !from-rose-50 !to-pink-100 text-rose-800 shadow-sm dark:!border-rose-700 dark:!from-rose-950 dark:!to-pink-900 dark:text-rose-200"
          : "",
        borderless &&
          (project?.project_type === "highlight" ||
            (isSample && sampleType == "highlight"))
          ? "rounded-2xl border border-rose-300 bg-gradient-to-r from-rose-50 to-pink-100 px-4 py-3 text-rose-800 dark:border-rose-700 dark:from-rose-950 dark:to-pink-900 dark:text-rose-200"
          : ""
      )}
    >
      {project?.project_type === "force" && (
        <RoundedDiv className="absolute left-4 -top-3 h-7 w-28 bg-[#FFBDBD] !border-[#FFBDBD] dark:bg-[#794a4a]">
          {t("projects.urgent")}
        </RoundedDiv>
      )}
      {isSample && sampleType == "force" && (
        <RoundedDiv className="absolute left-4 -top-3 h-7 w-28 bg-[#FFBDBD] !border-[#FFBDBD] dark:bg-[#794a4a]">
          {t("projects.urgent")}
        </RoundedDiv>
      )}
      {statusType && (
        <RoundedDiv
          style={{
            backgroundColor: color ? color : "",
            borderColor: borderColor ? borderColor : "",
            color: textColor ? textColor : "",
          }}
          className="absolute right-4 -top-3 h-6 w-28"
        >
          {statusType}
        </RoundedDiv>
      )}
      <Link
        href={`/projects/${project?._id}/${project?.title}`}
        key={project._id}
      >
        <h4 className="font-semibold text-text-blue-light dark:text-text-blue-dark">
          {project?.title}
        </h4>
      </Link>
      <h5 className="mt-2 line-clamp-2 font-semibold text-text-red-light dark:text-text-red-dark">
        {expertiseLabel}
        {!roles.length && project?.sub_expertise ? (
          <>
            {" _ "}
            {project?.sub_expertise.length !== 0 &&
            project?.sub_expertise.length > 1 ? (
              project?.sub_expertise.map((subItem, index) => (
                <span key={index}>
                  {subItem}
                  {index !== project?.sub_expertise.length - 1 && " _ "}
                </span>
              ))
            ) : (
              <span>{project?.sub_expertise}</span>
            )}
          </>
        ) : null}
        {project?.gender && project.gender !== "any" ? (
          <span> {getGenderLabel(project.gender)}</span>
        ) : null}
      </h5>
      {full && <ProjectCreator creator={project?.creator} />}
      <p className={`mt-2 leading-5 ${full ? "" : "line-clamp-2"}`}>
        {project?.description}
      </p>
      <div className="mt-3 grid grid-cols-2 gap-2">
        {full ? (
          <button
            type="button"
            onClick={() => setShowLocation(true)}
            className="flex items-center gap-1 text-[.7rem] md:my-1 md:justify-center md:text-sm"
          >
            <Image
              width={23}
              height={23}
              alt="location icon"
              src="/images/icons/location.svg"
              className="dark:invert"
            />
            <span>{t("projects.locationCity")} </span>
            <span>{project?.city && project?.city?.name}</span>
          </button>
        ) : (
          <div className="flex items-center gap-1 text-[.7rem] md:my-1 md:justify-center md:text-sm">
            <Image
              width={23}
              height={23}
              alt="location icon"
              src="/images/icons/location.svg"
              className="dark:invert"
            />
            <span>{t("projects.locationCity")} </span>
            <span>{project?.city && project?.city?.name}</span>
          </div>
        )}
        <div className="flex items-center gap-1 text-[.7rem] md:my-1 md:justify-center md:text-sm">
          <Image
            width={23}
            height={23}
            alt="clock icon"
            src="/images/icons/clock.svg"
            className="dark:invert"
          />
          <span>{t("projects.suggestedTime")}</span>
          <span>
            {project?.offer_time} {t("projects.days")}
          </span>
        </div>
        <div className="flex items-center gap-1 text-[.7rem] md:my-1 md:justify-center md:text-sm">
          <Image
            width={23}
            height={23}
            alt="timer icon"
            src="/images/icons/timer.svg"
            className="dark:invert"
          />
          <span>{t("projects.ageRange")}</span>
          <span>
            {project?.age_min != null || project?.age_max != null
              ? `${project?.age_min ?? "—"}-${project?.age_max ?? "—"}`
              : getAgeLabel(project?.age)}
          </span>
        </div>
        <div className="flex items-center gap-1 text-[.7rem] md:my-1 md:justify-center md:text-sm">
          <Image
            width={23}
            height={23}
            alt="woman icon"
            src="/images/icons/woman.svg"
            className="dark:invert"
          />
          <span>{t("filters.gender")}:</span>
          <span>{getGenderLabel(project?.gender) || t("filters.all")}</span>
        </div>
      </div>
      <div className="mx-auto mt-4 flex max-w-lg gap-4">
        <RoundedDiv
          className={`h-8 w-full text-[.7rem] text-[#007019] border-[#007019] md:text-sm ${
            project?.project_type === "highlight" ||
            (isSample && sampleType === "highlight")
              ? "border-rose-400 text-rose-700 dark:border-rose-500 dark:bg-rose-800 dark:text-rose-100"
              : ""
          }`}
        >
          {t("projects.budget")} {Number(project?.offer_price).toLocaleString()}
        </RoundedDiv>
        <RoundedDiv
          className={`h-8 w-full text-[.7rem] text-[#17337B] border-[#17337B] md:text-sm ${
            project?.project_type === "highlight" ||
            (isSample && sampleType === "highlight")
              ? "border-pink-400 text-pink-700 dark:border-pink-500 dark:bg-pink-800 dark:text-pink-100"
              : ""
          }`}
        >
          {t("projects.offerCount")} {project?.requested_users?.length}
        </RoundedDiv>
      </div>

      {full && roles.length > 0 ? (
        <div className="mt-4">
          <p className="mb-2 text-center text-xs font-semibold">
            {t("projects.rolesTitle")}
          </p>
          <div className="flex flex-wrap justify-center gap-2">
            {roles.map((role) => (
              <button
                key={role._id}
                type="button"
                onClick={() => onRoleSelect?.(role._id)}
                className={cn(
                  "rounded-full border px-3 py-1.5 text-xs font-semibold",
                  selectedRoleId === role._id
                    ? "border-[#FF107D] bg-[#FF107D]/10 text-[#FF107D]"
                    : "border-border-secondary-light dark:border-border-secondary-dark"
                )}
              >
                {role.expertise}
              </button>
            ))}
          </div>
        </div>
      ) : null}

      <LocationModal
        isOpen={showLocation}
        onClose={() => setShowLocation(false)}
        location={{
          address: project?.address || project?.neighborhood || undefined,
          lat: project?.lat != null ? String(project.lat) : undefined,
          lng: project?.lng != null ? String(project.lng) : undefined,
          city: project?.city,
          province: project?.province,
        }}
      />
    </div>
  );
}

export default MainProjectCard;
