import PasswordSection from '@/components/admin/profile/password-section';
import ProfileEditForm from '@/components/admin/profile/profile-edit-form';
import ProfileView from '@/components/admin/profile/profile-view';
import Loader from '@/components/common/loader';
import PageHeading from '@/components/common/page-heading';
import TwoFactorSection from '@/components/common/two-factor-section';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useApiSWR } from '@/hooks/useSWR';
import type { User } from '@/types';
import { KeyIcon, UserIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

const VALID_TABS = ['profile', 'security'] as const;
type ProfileTab = (typeof VALID_TABS)[number];

function getInitialTab(): ProfileTab {
  const param = new URLSearchParams(window.location.search).get('tab');
  return VALID_TABS.includes(param as ProfileTab)
    ? (param as ProfileTab)
    : 'profile';
}

function AdminProfile() {
  const { t } = useTranslation();
  const { data: user, isLoading, mutate } = useApiSWR<User>('/admin/profile');
  const [isEditing, setIsEditing] = useState(false);

  if (isLoading) return <Loader />;

  return (
    <div className="space-y-4">
      <PageHeading
        title={t('My Profile')}
        description={t(
          'Manage your account information, password, and security settings.',
        )}
      />

      <Tabs defaultValue={getInitialTab()} className="space-y-4">
        <div className="overflow-x-auto">
          <TabsList className="w-max min-w-[300px]">
            <TabsTrigger value="profile">
              <UserIcon weight="fill" className="size-4" />
              {t('Profile')}
            </TabsTrigger>
            <TabsTrigger value="security">
              <KeyIcon weight="fill" className="size-4" />
              {t('Security')}
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="profile">
          {isEditing ? (
            <ProfileEditForm
              user={user!}
              mutate={mutate}
              onSaved={() => setIsEditing(false)}
              onCancel={() => setIsEditing(false)}
            />
          ) : (
            <ProfileView user={user!} onEdit={() => setIsEditing(true)} />
          )}
        </TabsContent>

        <TabsContent value="security">
          <div className="max-w-4xl space-y-4 rounded-xl bg-white p-6 shadow-box">
            <PasswordSection />
            <TwoFactorSection />
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}

AdminProfile.title = 'My Profile';

export default AdminProfile;