"use client";

import LabItem from "@/components/lab-item";
import type { LabMetaV2 } from "@/components/labs/hooks-v2";
import { useMe } from "@/components/me-context";
import { NextLink } from "@/components/next-link";
import { useLocaleFunction } from "@/hooks/use-localed";
import { type Audience } from "@/lib/api/labs";
import { isTrustedUser } from "@/lib/users";
import { cn } from "@/lib/utils";
import {
  ChevronRightIcon,
  CodeXmlIcon,
  NetworkIcon,
  DatabaseIcon,
  ServerIcon,
} from "lucide-react";
import { useMemo } from "react";

const config: Record<Audience, string[]> = {
  Architect: ["demo_001", "demo_009", "demo_012", "demo_203"],
  DevOps: [],
  DBA: ["demo_005", "demo_006", "demo_011", "demo_203"],
  Developer: ["demo_901", "demo_408", "demo_422", "demo_203"],
};

const AudienceIconMap: Record<Audience, React.ElementType> = {
  Developer: CodeXmlIcon,
  Architect: NetworkIcon,
  DBA: DatabaseIcon,
  DevOps: ServerIcon,
};

export function PinnedLabsSections({
  className,
  labs,
}: {
  className?: string;
  labs: LabMetaV2[];
}) {
  const { data: me } = useMe();

  const sections = useMemo(() => {
    const labsMap = new Map<string, LabMetaV2>(
      labs.map((lab) => [lab.lab_code, lab])
    );

    function getFilteredLabs(labCodes: string[]) {
      return labCodes
        .map((code) => labsMap.get(code))
        .filter((lab) => !!lab)
        .filter((lab) => {
          if (lab.employee_only) {
            return isTrustedUser(me);
          }
          return true;
        });
    }

    const Architect = getFilteredLabs(config.Architect);
    const DBA = getFilteredLabs(config.DBA);
    const Developer = getFilteredLabs(config.Developer);
    const DevOps = getFilteredLabs(config.DevOps);

    return {
      Architect,
      DBA,
      Developer,
      DevOps,
    } satisfies Record<Audience, LabMetaV2[]>;
  }, [labs, me]);

  return (
    <>
      <PinnedLabsSection
        className={className}
        labs={sections.Developer}
        audience="Developer"
      />
      <PinnedLabsSection
        className={className}
        labs={sections.Architect}
        audience="Architect"
      />
      <PinnedLabsSection
        className={className}
        labs={sections.DBA}
        audience="DBA"
      />
      <PinnedLabsSection
        className={className}
        labs={sections.DevOps}
        audience="DevOps"
      />
    </>
  );
}

function PinnedLabsSection({
  className,
  labs,
  audience,
}: {
  className?: string;
  labs: LabMetaV2[];
  audience: Audience;
}) {
  const t = useLocaleFunction();

  if (labs.length === 0) return undefined;
  const Icon = AudienceIconMap[audience];
  return (
    <section className={cn("space-y-6", className)}>
      <h2 className="text-lg md:text-xl lg:text-2xl font-semibold flex gap-3 items-center">
        {Icon ? <Icon className="size-5" /> : null}
        {t("labs.featured", t(`lab.meta.audience:${audience}`))}
        <NextLink
          className="hover:underline ml-auto text-sm font-medium flex items-center gap-1"
          noStyle
          href={`/labs?target=${audience}`}
        >
          {t("labs.more")}
          <ChevronRightIcon className="size-4" />
        </NextLink>
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-8">
        {labs.map((lab) => (
          <LabItem key={lab.lab_code} lab={lab} />
        ))}
      </div>
    </section>
  );
}