"use client";

import { useState } from "react";
import dynamic from "next/dynamic";
import { useSearchParams } from "next/navigation";

const DispoImportClient = dynamic(
  () => import("~/components/admin/DispoImportClient.js").then((m) => m.DispoImportClient),
  { loading: () => <div className="p-6"><div className="h-8 w-48 shimmer-skeleton rounded" /><div className="mt-4 h-64 shimmer-skeleton rounded-xl" /></div> },
);

const BatchSkillImport = dynamic(
  () => import("~/components/admin/BatchSkillImport.js").then((m) => m.BatchSkillImport),
  { loading: () => <div className="p-6"><div className="h-8 w-48 shimmer-skeleton rounded" /><div className="mt-4 h-64 shimmer-skeleton rounded-xl" /></div> },
);

type Tab = "dispo" | "skills";

const TABS: { key: Tab; label: string; description: string }[] = [
  { key: "dispo", label: "Dispo Import", description: "Import planning data from Dispo V2 workbooks" },
  { key: "skills", label: "Skill Matrix", description: "Import skill matrices from XLSX files" },
];

export default function ImportsPage() {
  const searchParams = useSearchParams();
  const initialTab = (searchParams.get("tab") as Tab) ?? "dispo";
  const [activeTab, setActiveTab] = useState<Tab>(initialTab);

  return (
    <div className="app-page flex h-full flex-col gap-5 pb-6">
      <div className="app-page-header">
        <div>
          <h1 className="app-page-title">Data Import</h1>
          <p className="app-page-subtitle mt-1">Import planning data and skill matrices</p>
        </div>
      </div>

      {/* Tab bar */}
      <div className="flex border-b border-gray-200 dark:border-gray-700">
        {TABS.map((tab) => (
          <button
            key={tab.key}
            type="button"
            onClick={() => setActiveTab(tab.key)}
            className={`px-5 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors ${
              activeTab === tab.key
                ? "border-brand-500 text-brand-600 dark:text-brand-400"
                : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab content */}
      <div className="flex-1 min-h-0">
        {activeTab === "dispo" && <DispoImportClient />}
        {activeTab === "skills" && <BatchSkillImport />}
      </div>
    </div>
  );
}