"use client";

import { EMPLOYEE_STATIC_DATA } from "@/data/source/employees";
import BlockViewEmployeeAttendance from "@/features/employees/view-attendance";
import BlockViewEmployeeLeave from "@/features/employees/view-leave";
import BlockViewEmployeeProjects from "@/features/employees/view-projects";
import BlockViewEmployeeProfile from "@/features/employees/view-profile";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import {
  ArrowLeft,
  CalendarCheck,
  ClipboardList,
  FolderKanban,
  UserRound,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useMemo, type ReactNode } from "react";
import placeholderImage from "@/assets/images/avatar.jpeg";

type SectionId = "profile" | "attendance" | "projects" | "leave";

function sectionFromQuery(tab: string | null): SectionId {
  if (tab === "attendance" || tab === "projects" || tab === "leave") return tab;
  return "profile";
}

type Props = {
  app: string;
  employeeId: string;
};

export default function EmployeeDetailView({ app, employeeId }: Props) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const tab = searchParams.get("tab");
  const section = useMemo(() => sectionFromQuery(tab), [tab]);

  const basePath = `/${app}/employees/${employeeId}`;

  const employee = useMemo(
    () => EMPLOYEE_STATIC_DATA.find((e) => e.id === employeeId),
    [employeeId],
  );

  const displayName = employee?.name ?? "Employee";
  const displayRole = employee?.designation ?? "—";
  const displayImage = employee?.image ?? placeholderImage;

  const nav = (
    id: SectionId,
    label: string,
    icon: ReactNode,
    href: string,
  ) => {
    const active = section === id;
    return (
      <Link
        href={href}
        className={cn(
          "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
          active
            ? "bg-[#074473] font-semibold text-white"
            : "text-[#383E49] hover:bg-gray-100",
        )}
      >
        {icon}
        {label}
      </Link>
    );
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 rounded-xl border border-gray-100 bg-white p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:p-6">
        <div className="flex min-w-0 items-center gap-4">
          <Link
            href={`/${app}/employees`}
            className="flex size-9 shrink-0 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-700 shadow-sm hover:bg-gray-50"
            aria-label="Back to employees"
          >
            <ArrowLeft className="size-4" />
          </Link>
          <Image
            src={displayImage}
            alt=""
            width={48}
            height={48}
            className="size-12 shrink-0 rounded-xl object-cover"
          />
          <div className="min-w-0">
            <h1 className="truncate text-xl font-bold leading-snug text-[#45464E]">{displayName}</h1>
            <p className="truncate text-sm text-[#545D69]">{displayRole}</p>
          </div>
        </div>
        <Button
          type="button"
          variant="outline"
          className="shrink-0 border-[#074473] text-[#074473] hover:bg-[#074473]/5"
          onClick={() => router.push(`/${app}/employees/new`)}
        >
          Edit Profile
        </Button>
      </div>

      <div className="grid gap-6 lg:grid-cols-5">
        <Card className="h-min border-gray-100 shadow-sm lg:col-span-1">
          <CardContent className="flex flex-col gap-1 p-3">
            {nav("profile", "Profile", <UserRound className="size-4 shrink-0" aria-hidden />, basePath)}
            {nav(
              "attendance",
              "Attendance",
              <CalendarCheck className="size-4 shrink-0" aria-hidden />,
              `${basePath}?tab=attendance`,
            )}
            {nav(
              "projects",
              "Projects",
              <FolderKanban className="size-4 shrink-0" aria-hidden />,
              `${basePath}?tab=projects`,
            )}
            {nav(
              "leave",
              "Leave",
              <ClipboardList className="size-4 shrink-0" aria-hidden />,
              `${basePath}?tab=leave`,
            )}
          </CardContent>
        </Card>

        <div className="min-w-0 lg:col-span-4">
          {section === "profile" ? (
            <BlockViewEmployeeProfile />
          ) : section === "attendance" ? (
            <BlockViewEmployeeAttendance />
          ) : section === "projects" ? (
            <BlockViewEmployeeProjects />
          ) : (
            <BlockViewEmployeeLeave />
          )}
        </div>
      </div>
    </div>
  );
}