import LangSwitcher from '@/components/common/lang-switcher';
import { ThemeToggle } from '@/components/common/theme-toggle';
import UserNotification from '@/components/common/user-notification';
import LoaderIcon from '@/components/icons/loader-icon';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Separator } from '@/components/ui/separator';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';
import { Switch } from '@/components/ui/switch';
import { useTheme } from '@/context/theme-context';
import { createRequest } from '@/data/request/create-request';
import { useCurrency } from '@/hooks/use-currency';
import { useInitials } from '@/hooks/use-initials';
import { useApiSWR, useSWR } from '@/hooks/useSWR';
import { cn } from '@/lib/utils';
import { SharedData } from '@/types';
import { TMarketPosition } from '@/types/market.types';
import { getImageUrl } from '@/utils/getImageUrl';
import { getLanguageName } from '@/utils/getLanguageName';
import { Link, router, usePage } from '@inertiajs/react';
import {
  ArrowCircleDownIcon,
  ArrowCircleUpIcon,
  BookmarkSimpleIcon,
  CaretDownIcon,
  ChartLineUpIcon,
  ClockCounterClockwiseIcon,
  GearSixIcon,
  GiftIcon,
  HeadsetIcon,
  ListIcon,
  MedalIcon,
  MoonIcon,
  SignOutIcon,
  TranslateIcon,
  TrophyIcon,
  UserIcon,
  UserPlusIcon,
  UsersThreeIcon,
  XIcon,
} from '@phosphor-icons/react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { AppLogo } from '../app-logo';
import HeaderSearch from './header-search';

export function DefaultHeader() {
  const { auth, locale } = usePage<SharedData>().props;
  const getInitials = useInitials();
  const { format } = useCurrency();
  const { t } = useTranslation();
  const { theme, toggleTheme } = useTheme();

  const isLoggedIn = !!auth?.user;

  const { data: languages, isLoading: langLoading } = useSWR('/languages') as {
    data: string[] | undefined;
    isLoading: boolean;
  };

  const handleLanguageChange = (lang: string) => {
    toast.promise(
      createRequest({ url: `/languages/${lang}` }).then((res) => {
        if (!res.message) throw new Error(res.message);
        window.location.reload();
        return res;
      }),
      {
        loading: t('Updating language...'),
        success: (res) => res.message,
        error: t('Failed to update language'),
      },
    );
  };

  const { data: positions } = useApiSWR<TMarketPosition[]>(
    isLoggedIn ? '/user/portfolio' : null,
  );

  const fullName = auth?.user?.name ?? '';
  const email = auth?.user?.email ?? '';
  const profilePhoto = (
    auth?.user?.profile as unknown as Record<string, unknown>
  )?.profile_photo as string | undefined;

  const portfolioValue = (positions ?? []).reduce(
    (sum, p) => sum + p.current_value,
    0,
  );

  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // Primary destinations shown with coloured icons in the account dropdown.
  const menuItems = [
    {
      icon: ChartLineUpIcon,
      color: 'text-emerald-500',
      label: t('Portfolio'),
      href: '/portfolio',
    },
    {
      icon: BookmarkSimpleIcon,
      color: 'text-sky-500',
      label: t('Watchlist'),
      href: '/markets?watchlist=1',
    },
    {
      icon: ClockCounterClockwiseIcon,
      color: 'text-violet-500',
      label: t('Transaction History'),
      href: '/transaction-history',
    },
    {
      icon: UserIcon,
      color: 'text-blue-500',
      label: t('My Profile'),
      href: `/users/${auth?.user?.id ?? ''}`,
    },
    {
      icon: ArrowCircleUpIcon,
      color: 'text-green-500',
      label: t('Deposit'),
      href: '/deposit',
    },
    {
      icon: ArrowCircleDownIcon,
      color: 'text-rose-500',
      label: t('Withdraw'),
      href: '/withdraw',
    },
    {
      icon: TrophyIcon,
      color: 'text-amber-500',
      label: t('Leaderboard'),
      href: '/leaderboard',
    },
    {
      icon: MedalIcon,
      color: 'text-orange-500',
      label: t('Rankings'),
      href: '/rankings',
    },
    {
      icon: UsersThreeIcon,
      color: 'text-pink-500',
      label: t('Referrals'),
      href: '/referrals',
    },
  ];

  return (
    <header className="flex h-[86px] shrink-0 items-center justify-between gap-2 bg-white px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-16 md:px-6 dark:bg-background">
      <div className="container flex items-center justify-between px-4">
        <div className="flex items-center gap-4">
          <Link href="/" className="flex items-center gap-2">
            <AppLogo />
          </Link>
          <HeaderSearch hideMobile />
        </div>

        <div className="flex items-center gap-2.5">
          {isLoggedIn ? (
            <>
              <button
                onClick={() => router.visit('/portfolio')}
                className="hidden cursor-pointer flex-col items-center rounded-sm px-2.5 py-1.5 leading-[1.2] transition-colors duration-150 hover:bg-black/5 md:flex dark:hover:bg-white/10"
              >
                <span className="text-xs font-medium">{t('Portfolio')}</span>
                <p className="font-semibold text-success">
                  {format(portfolioValue)}
                </p>
              </button>
              <button
                onClick={() => router.visit('/transaction-history')}
                className="hidden cursor-pointer flex-col items-center rounded-sm px-2.5 py-1.5 leading-[1.2] transition-colors duration-150 hover:bg-black/5 md:flex dark:hover:bg-white/10"
              >
                <span className="text-xs font-medium">{t('Balance')}</span>
                <p className="font-semibold text-success">
                  {format(auth?.user?.profile?.main_balance || 0)}
                </p>
              </button>
              <button
                onClick={() => router.visit('/rankings')}
                className="hidden cursor-pointer flex-col items-center rounded-sm px-2.5 py-1.5 leading-[1.2] transition-colors duration-150 hover:bg-black/5 md:flex dark:hover:bg-white/10"
              >
                <span className="text-xs font-medium">{t('Points')}</span>
                <p className="font-semibold">
                  {auth?.user?.profile?.points?.toLocaleString() || 0}
                </p>
              </button>

              <Button
                variant="primary"
                className="hidden md:inline-flex"
                onClick={() => router.visit('/deposit')}
              >
                {t('Deposit')}
              </Button>

              <Button
                variant="icon"
                className="hidden md:inline-flex"
                title={t('Referrals')}
                onClick={() => router.visit('/referrals')}
              >
                <GiftIcon
                  weight="bold"
                  className="size-6 opacity-80 group-hover:opacity-100"
                />
              </Button>

              <UserNotification />

              <Separator
                orientation="vertical"
                className="hidden h-5 bg-black/20 md:block dark:bg-white/20"
              />

              <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
                <SheetTrigger asChild>
                  <button className="flex cursor-pointer items-center gap-1 rounded-full p-1 font-medium outline-0 transition-colors duration-150 hover:bg-accent md:hidden">
                    <Avatar className="size-9 overflow-hidden rounded-full">
                      <AvatarImage
                        src={getImageUrl(profilePhoto)}
                        alt={fullName}
                      />
                      <AvatarFallback className="text-sm font-semibold">
                        {getInitials(fullName)}
                      </AvatarFallback>
                    </Avatar>
                    <CaretDownIcon
                      weight="bold"
                      className="size-4 opacity-80"
                    />
                  </button>
                </SheetTrigger>
                <SheetContent className="border-0 border-l border-white/5 bg-background shadow-xl">
                  <div className="relative z-10 flex h-full flex-col">
                    <SheetHeader
                      isAdmin={false}
                      className="justify-between px-6 pb-4"
                    >
                      <div className="flex items-center gap-2">
                        <SheetClose className="flex size-10 cursor-pointer items-center justify-center rounded-xl border-0 bg-white/10 hover:bg-white/15">
                          <XIcon
                            weight="bold"
                            className="size-5 dark:text-white"
                          />
                        </SheetClose>
                        <SheetTitle className="hidden dark:text-white" />
                      </div>
                      <LangSwitcher />
                    </SheetHeader>

                    <div className="flex flex-1 flex-col gap-2 overflow-y-auto px-6 pb-6">
                      <div className="flex items-center gap-3 rounded-2xl bg-transparent pb-3">
                        <Avatar className="size-10 overflow-hidden rounded-full">
                          <AvatarImage
                            src={getImageUrl(profilePhoto)}
                            alt={fullName}
                          />
                          <AvatarFallback className="text-sm font-semibold">
                            {getInitials(fullName)}
                          </AvatarFallback>
                        </Avatar>
                        <div className="min-w-0 flex-1">
                          <p className="font-semibold dark:text-white">
                            {fullName}
                          </p>
                          <p className="truncate text-xs dark:text-white/50">
                            {email}
                          </p>
                        </div>
                        <Button
                          variant="icon"
                          onClick={() => {
                            router.visit('/settings');
                            setIsMenuOpen(false);
                          }}
                        >
                          <GearSixIcon
                            weight="bold"
                            className="size-4 dark:text-white/60"
                          />
                        </Button>
                      </div>

                      <button
                        onClick={toggleTheme}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <MoonIcon
                          weight="fill"
                          className="size-4 shrink-0 text-indigo-500"
                        />
                        <span className="flex-1 font-medium dark:text-white">
                          {t('Dark mode')}
                        </span>
                        <Switch
                          checked={theme === 'dark'}
                          className="pointer-events-none"
                          tabIndex={-1}
                          aria-hidden
                        />
                      </button>

                      <button
                        onClick={() => {
                          router.visit('/portfolio');
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <ChartLineUpIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('Portfolio')}
                        </span>
                      </button>
                      <button
                        onClick={() => {
                          router.visit('/markets?watchlist=1');
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <BookmarkSimpleIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('Watchlist')}
                        </span>
                      </button>
                      <button
                        onClick={() => {
                          router.visit('/transaction-history');
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <ClockCounterClockwiseIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('Transaction History')}
                        </span>
                      </button>
                      <button
                        onClick={() => {
                          router.visit(`/users/${auth?.user?.id ?? ''}`);
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <UserIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('My Profile')}
                        </span>
                      </button>

                      <Separator className="bg-white/8" />

                      <button
                        onClick={() => {
                          router.visit('/deposit');
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <ArrowCircleUpIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('Deposit')}
                        </span>
                      </button>
                      <button
                        onClick={() => {
                          router.visit('/withdraw');
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <ArrowCircleDownIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('Withdraw')}
                        </span>
                      </button>

                      <Separator className="bg-white/8" />

                      <button
                        onClick={() => {
                          router.visit('/leaderboard');
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <TrophyIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('Leaderboard')}
                        </span>
                      </button>
                      <button
                        onClick={() => {
                          router.visit('/rankings');
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <MedalIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('Rankings')}
                        </span>
                      </button>
                      <button
                        onClick={() => {
                          router.visit('/referrals');
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <UsersThreeIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('Referrals')}
                        </span>
                      </button>

                      <Separator className="bg-white/8" />

                      <button
                        onClick={() => {
                          router.visit('/support-ticket');
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <HeadsetIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('Support')}
                        </span>
                      </button>
                      <button
                        onClick={() => {
                          router.visit('/settings');
                          setIsMenuOpen(false);
                        }}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-black/8 bg-white/5 px-4 py-2.5 text-left transition-opacity hover:opacity-80 dark:border-white/8"
                      >
                        <GearSixIcon
                          weight="bold"
                          className="size-4 shrink-0 dark:text-white/60"
                        />
                        <span className="font-medium dark:text-white">
                          {t('Settings')}
                        </span>
                      </button>

                      <Separator className="bg-white/8" />

                      <button
                        onClick={() => router.post('/logout')}
                        className="flex cursor-pointer items-center gap-3 rounded-2xl border border-destructive/20 bg-destructive/10 px-4 py-2.5 text-left text-destructive transition-opacity hover:opacity-80"
                      >
                        <SignOutIcon
                          weight="bold"
                          className="size-4 shrink-0"
                        />
                        <span className="font-medium">{t('Logout')}</span>
                      </button>
                    </div>
                  </div>
                </SheetContent>
              </Sheet>

              <DropdownMenu>
                <DropdownMenuTrigger className="hidden cursor-pointer items-center gap-1 rounded-full p-1 font-medium outline-0 transition-colors duration-150 hover:bg-accent md:flex">
                  <Avatar className="size-9 overflow-hidden rounded-full">
                    <AvatarImage
                      src={getImageUrl(profilePhoto)}
                      alt={fullName}
                    />
                    <AvatarFallback className="text-sm font-semibold">
                      {getInitials(fullName)}
                    </AvatarFallback>
                  </Avatar>
                  <CaretDownIcon weight="bold" className="size-4 opacity-80" />
                </DropdownMenuTrigger>
                <DropdownMenuContent
                  align="end"
                  className="w-72 overflow-visible rounded-2xl bg-background p-2"
                >
                  {/* Account header */}
                  <div className="flex items-center gap-2.5 px-1.5 py-1.5">
                    <Avatar className="size-9 overflow-hidden rounded-full">
                      <AvatarImage
                        src={getImageUrl(profilePhoto)}
                        alt={fullName}
                      />
                      <AvatarFallback className="text-sm font-semibold">
                        {getInitials(fullName)}
                      </AvatarFallback>
                    </Avatar>
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-sm font-semibold text-foreground">
                        {fullName}
                      </p>
                      <p className="truncate text-xs text-foreground/50">
                        {email}
                      </p>
                    </div>
                    <Button
                      variant="icon"
                      onClick={() => router.visit('/settings')}
                    >
                      <GearSixIcon
                        weight="bold"
                        className="size-5 text-foreground/70"
                      />
                    </Button>
                  </div>

                  <DropdownMenuSeparator className="bg-black/8 dark:bg-white/8" />

                  {/* Primary destinations with coloured icons */}
                  <DropdownMenuGroup>
                    {menuItems.map(({ icon: Icon, color, label, href }) => (
                      <DropdownMenuItem
                        key={label}
                        onClick={() => router.visit(href)}
                        className="gap-3 rounded-lg py-2 font-medium text-foreground hover:bg-accent"
                      >
                        <Icon weight="fill" className={cn('size-5', color)} />
                        {label}
                      </DropdownMenuItem>
                    ))}

                    {/* Dark mode toggle — keeps the menu open on click */}
                    <DropdownMenuItem
                      onSelect={(e) => e.preventDefault()}
                      onClick={toggleTheme}
                      className="gap-3 rounded-lg py-2 font-medium text-foreground hover:bg-accent"
                    >
                      <MoonIcon
                        weight="fill"
                        className="size-5 text-indigo-500"
                      />
                      <span className="flex-1">{t('Dark mode')}</span>
                      <Switch
                        checked={theme === 'dark'}
                        className="pointer-events-none"
                        tabIndex={-1}
                        aria-hidden
                      />
                    </DropdownMenuItem>
                  </DropdownMenuGroup>

                  <DropdownMenuSeparator className="bg-black/8 dark:bg-white/8" />

                  {/* Secondary links + language */}
                  <DropdownMenuGroup>
                    <DropdownMenuItem
                      onClick={() => router.visit('/support-ticket')}
                      className="rounded-lg py-2 text-foreground/60 hover:bg-accent"
                    >
                      {t('Support')}
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={() => router.visit('/settings')}
                      className="rounded-lg py-2 text-foreground/60 hover:bg-accent"
                    >
                      {t('Settings')}
                    </DropdownMenuItem>

                    <DropdownMenuSub>
                      <DropdownMenuSubTrigger className="rounded-lg py-2 text-foreground/60 data-[state=open]:bg-accent">
                        <TranslateIcon
                          weight="bold"
                          className="mr-2 size-4 text-rose-400"
                        />
                        {getLanguageName(locale)}
                      </DropdownMenuSubTrigger>
                      <DropdownMenuSubContent className="max-h-72 overflow-y-auto">
                        {langLoading ? (
                          <div className="flex min-h-16 items-center justify-center">
                            <LoaderIcon />
                          </div>
                        ) : (
                          languages?.map((lang) => (
                            <DropdownMenuItem
                              key={lang}
                              onClick={() => handleLanguageChange(lang)}
                              className="justify-between gap-6 rounded-lg"
                            >
                              {getLanguageName(lang)}
                              {locale === lang && (
                                <span className="size-2 shrink-0 rounded-full bg-primary" />
                              )}
                            </DropdownMenuItem>
                          ))
                        )}
                      </DropdownMenuSubContent>
                    </DropdownMenuSub>
                  </DropdownMenuGroup>

                  <DropdownMenuSeparator className="bg-black/8 dark:bg-white/8" />

                  <DropdownMenuItem
                    className="hover:bg-destructive-subtle rounded-lg py-2 font-medium text-destructive focus:text-destructive"
                    onClick={() => router.post('/logout')}
                  >
                    <SignOutIcon weight="bold" className="size-4" />
                    {t('Logout')}
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          ) : (
            <>
              <div className="hidden md:block">
                <LangSwitcher />
              </div>
              <ThemeToggle />
              <Button
                variant="ghost"
                className="hidden text-primary md:inline-flex"
                onClick={() => router.visit('/login')}
              >
                {t('Login')}
              </Button>
              <Button
                variant="primary"
                className="hidden md:inline-flex"
                onClick={() => router.visit('/register')}
              >
                {t('Register')}
              </Button>

              <DropdownMenu>
                <DropdownMenuTrigger className="flex cursor-pointer items-center rounded-md p-1.5 outline-0 transition-colors duration-150 hover:bg-accent md:hidden">
                  <ListIcon weight="bold" className="size-5" />
                </DropdownMenuTrigger>
                <DropdownMenuContent
                  align="end"
                  className="w-48 bg-background text-foreground"
                >
                  <DropdownMenuItem
                    onClick={() => router.visit('/login')}
                    className="hover:bg-card"
                  >
                    <UserIcon weight="bold" className="size-4" />
                    {t('Login')}
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    onClick={() => router.visit('/register')}
                    className="hover:bg-card"
                  >
                    <UserPlusIcon weight="bold" className="size-4" />
                    {t('Register')}
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          )}
        </div>
      </div>
    </header>
  );
}