"use client";

import BlockAddConnectedAccounts from "@/features/employees/add-connected-accounts";
import BlockAddDocuments from "@/features/employees/add-documents";
import BlockAddPersonalInformation from "@/features/employees/add-personal-information";
import BlockAddProfessionalInformation from "@/features/employees/add-professional-information";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react";

const TAB_IDS = ["personal", "professional", "documents", "account"] as const;
export type AddEmployeeTabId = (typeof TAB_IDS)[number];

function isTabId(v: string | null): v is AddEmployeeTabId {
  return v !== null && (TAB_IDS as readonly string[]).includes(v);
}

type Props = {
  app: string;
};

export default function AddEmployeeForm({ app }: Props) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const listHref = `/${app}/employees`;
  const basePath = `/${app}/employees/new`;

  const [tab, setTab] = useState<AddEmployeeTabId>("personal");

  useEffect(() => {
    const q = searchParams.get("tab");
    if (isTabId(q)) {
      setTab(q);
      return;
    }
    setTab("personal");
    if (q !== null) {
      router.replace(basePath, { scroll: false });
    }
  }, [searchParams, router, basePath]);

  const syncUrl = useCallback(
    (next: AddEmployeeTabId) => {
      const qs = next === "personal" ? "" : `?tab=${next}`;
      router.replace(`${basePath}${qs}`, { scroll: false });
    },
    [router, basePath],
  );

  const goTab = useCallback(
    (next: AddEmployeeTabId) => {
      setTab(next);
      syncUrl(next);
    },
    [syncUrl],
  );

  const idx = TAB_IDS.indexOf(tab);
  const onCancel = () => router.push(listHref);
  const onNext = () => {
    if (idx < TAB_IDS.length - 1) goTab(TAB_IDS[idx + 1]!);
  };
  const onBack = () => {
    if (idx > 0) goTab(TAB_IDS[idx - 1]!);
  };

  const tabLabels: Record<AddEmployeeTabId, string> = {
    personal: "Personal Information",
    professional: "Professional Information",
    documents: "Documents",
    account: "Account Access",
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex min-w-0 items-center gap-3">
          <Link
            href={listHref}
            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>
          <h1 className="text-xl font-bold leading-snug text-[#45464E]">Add New Employee</h1>
        </div>
      </div>

      <div className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm sm:p-6">
        <Tabs
          value={tab}
          onValueChange={(v) => {
            if (isTabId(v)) goTab(v);
          }}
          className="w-full"
        >
          <TabsList
            className={cn(
              "mb-6 flex h-auto w-full flex-wrap gap-0 rounded-none border-0 border-b border-[#E1E2E9] bg-transparent p-0",
              "justify-start gap-1 sm:flex-nowrap",
            )}
          >
            {TAB_IDS.map((id) => (
              <TabsTrigger
                key={id}
                value={id}
                className={cn(
                  "relative shrink-0 rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 py-3 text-sm font-medium",
                  "text-[#83898C] shadow-none ring-offset-0",
                  "data-[state=active]:border-b-[#074473] data-[state=active]:bg-transparent data-[state=active]:text-[#074473]",
                  "data-[state=active]:shadow-none",
                )}
              >
                {tabLabels[id]}
              </TabsTrigger>
            ))}
          </TabsList>

          <TabsContent value="personal" className="mt-0 focus-visible:outline-none">
            <BlockAddPersonalInformation onCancel={onCancel} onNext={onNext} />
          </TabsContent>
          <TabsContent value="professional" className="mt-0 focus-visible:outline-none">
            <BlockAddProfessionalInformation
              onCancel={onCancel}
              onNext={onNext}
              onBack={onBack}
            />
          </TabsContent>
          <TabsContent value="documents" className="mt-0 focus-visible:outline-none">
            <BlockAddDocuments onCancel={onCancel} onNext={onNext} onBack={onBack} />
          </TabsContent>
          <TabsContent value="account" className="mt-0 focus-visible:outline-none">
            <BlockAddConnectedAccounts
              onCancel={onCancel}
              onBack={onBack}
              onNext={() => router.push(listHref)}
              nextLabel="Save Employee"
            />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}