import AdjustBalance from '@/components/admin/user-management/user-details/adjust-balance';
import Kyc from '@/components/admin/user-management/user-details/kyc';
import Profile from '@/components/admin/user-management/user-details/profile';
import ReferralTree from '@/components/admin/user-management/user-details/referral-tree';
import Referrals from '@/components/admin/user-management/user-details/referrals';
import Transactions from '@/components/admin/user-management/user-details/transactions';
import Loader from '@/components/common/loader';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useCurrency } from '@/hooks/use-currency';
import { useInitials } from '@/hooks/use-initials';
import { useApiSWR } from '@/hooks/useSWR';
import type { User } from '@/types';
import { getImageUrl } from '@/utils/getImageUrl';
import { usePage } from '@inertiajs/react';
import {
  ClockCounterClockwiseIcon,
  ShieldIcon,
  UserIcon,
  UserSwitchIcon,
} from '@phosphor-icons/react';
import { AvatarImage } from '@radix-ui/react-avatar';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

const UserDetails = () => {
  const { t } = useTranslation();
  const getInitials = useInitials();
  const page = usePage();
  const userId = page.url.split('/')[3];
  const { format } = useCurrency();

  const params = new URLSearchParams(window.location.search);
  const initialTab = params.get('tab') || 'profile';
  const [activeTab, setActiveTab] = useState(initialTab);

  const {
    data: user,
    isLoading,
    mutate,
  } = useApiSWR<User>(`/admin/users/${userId}`);

  const tabList = [
    {
      key: 'profile',
      label: t('Profile'),
      icon: <UserIcon weight="bold" />,
      content: <Profile user={user} />,
    },
    {
      key: 'kyc',
      label: t('KYC'),
      icon: <ShieldIcon weight="bold" />,
      content: <Kyc userId={userId} />,
    },
    {
      key: 'transactions',
      label: t('Transactions'),
      icon: <ClockCounterClockwiseIcon weight="bold" />,
      content: <Transactions userId={userId} />,
    },
    {
      key: 'referrals',
      label: t('Referrals'),
      icon: <UserSwitchIcon weight="bold" />,
      content: <Referrals userId={userId} />,
    },
    {
      key: 'referral-tree',
      label: t('Referral Tree'),
      icon: <UserSwitchIcon weight="bold" />,
      content: <ReferralTree userId={userId} />,
    },
  ];

  const profile = user?.profile;
  const ranking = profile?.ranking;
  const isVerified = !!user?.email_verified_at;

  return (
    <>
      <div className="grid grid-cols-1 gap-3 md:h-[calc(100vh-5.5rem)] md:grid-cols-5">
        <div className="col-span-1 rounded-2xl bg-white p-4 shadow-box md:overflow-y-auto">
          {isLoading ? (
            <Loader />
          ) : (
            <>
              <div className="flex flex-col items-center justify-center">
                <Avatar className="mb-2 size-20 overflow-hidden rounded-full">
                  <AvatarImage
                    src={getImageUrl(profile?.profile_photo ?? '')}
                    alt={user?.name ?? ''}
                  />
                  <AvatarFallback className="text-2xl font-medium">
                    {getInitials(user?.name ?? '')}
                  </AvatarFallback>
                </Avatar>
                <h3 className="mb-1 text-xl font-medium">{user?.name}</h3>
                <h3 className="mb-2 text-sm text-black/50">{user?.email}</h3>
                <Badge variant={isVerified ? 'successSubtle' : 'warning'}>
                  {isVerified ? t('Verified') : t('Unverified')}
                </Badge>
              </div>

              <Separator className="my-4" />

              <div className="space-y-2">
                <div className="rounded-2xl border border-primary bg-primary/5 p-4">
                  <div className="mb-1 flex items-center justify-between">
                    <p className="text-sm text-black/50">{t('Main Balance')}</p>
                    <AdjustBalance
                      userId={userId}
                      wallet="main"
                      mutate={mutate}
                    />
                  </div>
                  <h3 className="text-xl font-semibold">
                    {format(profile?.main_balance ?? 0)}
                  </h3>
                </div>

                <div className="rounded-2xl border border-purple bg-purple/5 p-4">
                  <div className="mb-1 flex items-center justify-between">
                    <p className="text-sm text-black/50">{t('Interest')}</p>
                    <AdjustBalance
                      userId={userId}
                      wallet="interest"
                      mutate={mutate}
                    />
                  </div>
                  <h3 className="text-xl font-semibold">
                    {format(profile?.interest_balance ?? 0)}
                  </h3>
                </div>

                <div className="flex items-center justify-between rounded-2xl border border-black/5 p-4">
                  <div>
                    <p className="mb-1 text-sm text-black/50">{t('Rank')}</p>
                    <h3 className="text-xl font-semibold">
                      {ranking?.name ?? '-'}
                    </h3>
                  </div>
                  {ranking?.badge && (
                    <img
                      src={getImageUrl(ranking.badge)}
                      alt={ranking.name}
                      className="size-10 object-contain"
                    />
                  )}
                </div>

                <div className="rounded-2xl border border-black/5 p-4">
                  <p className="mb-1 text-sm text-black/50">{t('Points')}</p>
                  <h3 className="text-xl font-semibold">
                    {profile?.points?.toLocaleString() ?? '0'}
                  </h3>
                </div>
              </div>
            </>
          )}
        </div>

        <div className="col-span-1 rounded-2xl bg-white p-4 shadow-box md:col-span-4 md:overflow-y-auto">
          <Tabs value={activeTab} onValueChange={setActiveTab}>
            <div className="overflow-x-auto">
              <TabsList className="w-max min-w-full">
                {tabList.map((tab) => (
                  <TabsTrigger
                    key={tab.key}
                    value={tab.key}
                    className="[&_svg]:hidden data-[state=active]:[&_svg]:block"
                  >
                    {tab.icon}
                    {tab.label}
                  </TabsTrigger>
                ))}
              </TabsList>
            </div>

            {tabList.map((tab) => (
              <TabsContent key={tab.key} value={tab.key}>
                {tab.content}
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </div>
    </>
  );
};

UserDetails.title = 'User Details';

export default UserDetails;