edr-platform/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx

import { useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import {
  Building2,
  User,
  Briefcase,
  UserCheck,
  FileCheck,
} from "lucide-react";
import { api } from "@/services/api";
import { Badge } from "@edr/ui-common";
import { cn } from "@/lib/utils";
import TabCompanyProfile from "./settings/TabCompanyProfile";
import TabContactPerson from "./settings/TabContactPerson";
import TabGeneralManager from "./settings/TabGeneralManager";
import TabPowerOfAttorney from "./settings/TabPowerOfAttorney";
import TabDocuments from "./settings/TabDocuments";

type SettingsTab =
  | "company"
  | "contact"
  | "gm"
  | "poa"
  | "documents";

const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
  { id: "company", label: "Company Profile", icon: <Building2 className="size-4" /> },
  { id: "contact", label: "Contact Person", icon: <User className="size-4" /> },
  { id: "gm", label: "General Manager", icon: <Briefcase className="size-4" /> },
  { id: "poa", label: "Power of Attorney", icon: <UserCheck className="size-4" /> },
  { id: "documents", label: "Documents", icon: <FileCheck className="size-4" /> },
];

export default function SettingsPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const tab = (searchParams.get("tab") as SettingsTab) || "company";
  const setTab = (t: SettingsTab) => {
    setSearchParams((prev) => {
      const next = new URLSearchParams(prev);
      next.set("tab", t);
      return next;
    }, { replace: true });
  };

  const profileQuery = useQuery(
    api.companies.getProfile.queryOptions(),
  );

  const profile = profileQuery.data;

  if (profileQuery.isPending) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
      </div>
    );
  }

  if (!profile) {
    return (
      <div className="flex h-full items-center justify-center">
        <p className="text-muted-foreground">No company profile found.</p>
      </div>
    );
  }

  return (
    <div className="px-4 py-8">
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-black tracking-tight text-foreground">
            Account Settings
          </h1>
          <p className="mt-1 text-sm text-muted-foreground">
            Manage your company profile, personnel, and documents
          </p>
        </div>
        <Badge variant="secondary" className="font-bold uppercase tracking-wider">
          Verified
        </Badge>
      </div>

      {/* Tab Bar */}
      <div className="mb-6 flex flex-wrap gap-1 border-b border-border">
        {TABS.map((t) => (
          <button
            key={t.id}
            type="button"
            onClick={() => setTab(t.id)}
            className={cn(
              "flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-semibold transition-colors",
              tab === t.id
                ? "border-primary text-primary"
                : "border-transparent text-muted-foreground hover:text-foreground",
            )}
          >
            {t.icon}
            {t.label}
          </button>
        ))}
      </div>

      {tab === "company" && <TabCompanyProfile profile={profile} />}
      {tab === "contact" && <TabContactPerson profile={profile} />}
      {tab === "gm" && <TabGeneralManager profile={profile} />}
      {tab === "poa" && <TabPowerOfAttorney profile={profile} />}
      {tab === "documents" && <TabDocuments profile={profile} />}
    </div>
  );
}