"use client";

import type { PortfolioStatus } from "@/app/db/schema/portfolio";
import { Badge } from "@/app/shadcn_components/ui/badge";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/app/shadcn_components/ui/hover-card";

type ExtendedStatus =
  | (typeof PortfolioStatus)[number]
  | "ECO4"
  | "GBIS"
  | "NONE";

export default function StatusBadge({
  status,
  isProperty = false,
}: {
  status: ExtendedStatus;
  isProperty?: boolean;
}) {
  const statusConfig = statusColor[status];

  return (
    <HoverCard>
      <HoverCardTrigger>
        <Badge
          className={`truncate overflow-hidden whitespace-nowrap ${statusConfig.class}`}
        >
          {statusConfig.text}
        </Badge>
      </HoverCardTrigger>
      <HoverCardContent>
        <div>
          <div>
            <div
              className={"w-6 h-6 rounded-full mr-2 " + statusConfig.class}
            />
          </div>
          <p className="text-sm text-muted-foreground">
            {!isProperty
              ? statusConfig.hoverText
              : statusConfig.propertyHoverText}
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

const statusColor: {
  [key in ExtendedStatus]: {
    class: string;
    text: string;
    hoverText: string;
    propertyHoverText: string;
  };
} = {
  scoping: {
    class: "bg-emerald-500 hover:bg-emerald-500",
    text: "Scoping",
    hoverText: "This portfolio is currently in scoping",
    propertyHoverText: "This property is currently in scoping",
  },
  assessment: {
    class:
      "bg-emerald-400 hover:bg-emerald-500 truncate text-overflow: ellipsis",
    text: "Remote Assessment",
    hoverText: "This portfolio is currently in the assessment stage",
    propertyHoverText: "This property is currently in the assessment stage",
  },
  survey: {
    class: "bg-brandblue hover:bg-hoverblue",
    text: "survey",
    hoverText: "This portfolio is currently in the survey stage",
    propertyHoverText: "This property is currently in the survey stage",
  },
  tendering: {
    class: "bg-emerald-500 hover:bg-emerald-500",
    text: "Tendering",
    hoverText: "This portfolio is currently in the tendering stage",
    propertyHoverText: "This property is currently in tender",
  },
  "project underway": {
    class: "bg-emerald-500 hover:bg-emerald-500",
    text: "project underway",
    hoverText: "This portfolio has begun works",
    propertyHoverText: "This property has begun works",
  },
  "completion; status: on track": {
    class: "bg-emerald-500 hover:bg-emerald-500",
    text: "on track",
    hoverText: "This portfolio is on track to be completed on time",
    propertyHoverText: "This property is on track to be completed on time",
  },
  "completion; status: delayed": {
    class: "bg-orange-400 hover:bg-orange-400",
    text: "delayed",
    hoverText:
      "This portfolio is delayed and one or more properties require attention",
    propertyHoverText: "This property is delayed and requires attention",
  },
  "completion; status: at risk": {
    class: "bg-red-400 hover:bg-red-400",
    text: "at risk",
    hoverText:
      "This portfolio is at risk. One or more properties require attention",
    propertyHoverText: "This property is at risk and requires attention",
  },
  "completion; status: completed": {
    class: "bg-gray-400 hover:bg-gray-400",
    text: "completed",
    hoverText: "This portfolio has been completed",
    propertyHoverText: "This property has been completed",
  },
  "needs review": {
    class: "bg-indigo-600 hover:bg-indigo-400",
    text: "needs review",
    hoverText: "The works in this portfolio has been completed and need review",
    propertyHoverText: "The works on this property have been completed",
  },
  ECO4: {
    class: "bg-brandblue hover:bg-hoverblue",
    text: "ECO4",
    hoverText: "This property is funded under the ECO4 scheme",
    propertyHoverText: "This property is funded under the ECO4 scheme",
  },
  GBIS: {
    class: "bg-brandmidblue hover:bg-hoverblue",
    text: "GBIS",
    hoverText: "This property is funded under the GBIS scheme",
    propertyHoverText: "This property is funded under the GBIS scheme",
  },
  NONE: {
    class: "bg-gray-400 hover:bg-gray-400",
    text: "No Funding",
    hoverText: "This property has no funding scheme applied",
    propertyHoverText: "This property has no funding scheme applied",
  },
};
