import { getSession } from '@documenso/auth/server/lib/utils/get-session';
import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
import { isAdmin } from '@documenso/lib/utils/is-admin';
import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button';
import { msg } from '@lingui/core/macro';
import { Trans } from '@lingui/react/macro';
import {
  AlertTriangleIcon,
  BarChart3,
  Building2Icon,
  FileStack,
  LineChartIcon,
  MailIcon,
  Settings,
  Trophy,
  Users,
  Wallet2,
} from 'lucide-react';
import { Link, Outlet, redirect, useLocation } from 'react-router';

import { AdminLicenseStatusBanner } from '~/components/general/admin-license-status-banner';
import { appMetaTags } from '~/utils/meta';

import type { Route } from './+types/_layout';

export function meta() {
  return appMetaTags(msg`Admin`);
}

export async function loader({ request }: Route.LoaderArgs) {
  const { user } = await getSession(request);

  const license = await LicenseClient.getInstance()?.getCachedLicense();

  if (!user || !isAdmin(user)) {
    throw redirect('/');
  }

  return {
    license: license || null,
  };
}

export default function AdminLayout({ loaderData }: Route.ComponentProps) {
  const { license } = loaderData;
  const { pathname } = useLocation();

  return (
    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
      <AdminLicenseStatusBanner license={license} />

      <h1 className="font-semibold text-4xl">
        <Trans>Admin Panel</Trans>
      </h1>

      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
        <div
          className={cn(
            'col-span-12 flex gap-x-2.5 gap-y-2 overflow-hidden overflow-x-auto md:col-span-3 md:flex md:flex-col',
          )}
        >
          <Button
            variant="ghost"
            className={cn('justify-start md:w-full', pathname?.startsWith('/admin/stats') && 'bg-secondary')}
            asChild
          >
            <Link to="/admin/stats">
              <BarChart3 className="mr-2 h-5 w-5" />
              <Trans>Stats</Trans>
            </Link>
          </Button>

          <Button
            variant="ghost"
            className={cn('justify-start md:w-full', pathname?.startsWith('/admin/organisations') && 'bg-secondary')}
            asChild
          >
            <Link to="/admin/organisations">
              <Building2Icon className="mr-2 h-5 w-5" />
              <Trans>Organisations</Trans>
            </Link>
          </Button>

          <Button
            variant="ghost"
            className={cn('justify-start md:w-full', pathname?.startsWith('/admin/claims') && 'bg-secondary')}
            asChild
          >
            <Link to="/admin/claims">
              <Wallet2 className="mr-2 h-5 w-5" />
              <Trans>Claims</Trans>
            </Link>
          </Button>

          <Button
            variant="ghost"
            className={cn('justify-start md:w-full', pathname?.startsWith('/admin/users') && 'bg-secondary')}
            asChild
          >
            <Link to="/admin/users">
              <Users className="mr-2 h-5 w-5" />
              <Trans>Users</Trans>
            </Link>
          </Button>

          <Button
            variant="ghost"
            className={cn('justify-start md:w-full', pathname?.startsWith('/admin/documents') && 'bg-secondary')}
            asChild
          >
            <Link to="/admin/documents">
              <FileStack className="mr-2 h-5 w-5" />
              <Trans>Documents</Trans>
            </Link>
          </Button>

          <Button
            variant="ghost"
            className={cn(
              'justify-start md:w-full',
              pathname?.startsWith('/admin/unsealed-documents') && 'bg-secondary',
            )}
            asChild
          >
            <Link to="/admin/unsealed-documents">
              <AlertTriangleIcon className="mr-2 h-5 w-5" />
              <Trans>Unsealed Documents</Trans>
            </Link>
          </Button>

          <Button
            variant="ghost"
            className={cn('justify-start md:w-full', pathname?.startsWith('/admin/email-transports') && 'bg-secondary')}
            asChild
          >
            <Link to="/admin/email-transports">
              <MailIcon className="mr-2 h-5 w-5" />
              <Trans>Email Transports</Trans>
            </Link>
          </Button>

          <Button
            variant="ghost"
            className={cn('justify-start md:w-full', pathname?.startsWith('/admin/email-domains') && 'bg-secondary')}
            asChild
          >
            <Link to="/admin/email-domains">
              <MailIcon className="mr-2 h-5 w-5" />
              <Trans>Email Domains</Trans>
            </Link>
          </Button>

          <Button
            variant="ghost"
            className={cn(
              'justify-start md:w-full',
              pathname?.startsWith('/admin/organisation-insights') && 'bg-secondary',
            )}
            asChild
          >
            <Link to="/admin/organisation-insights">
              <Trophy className="mr-2 h-5 w-5" />
              <Trans>Organisation Insights</Trans>
            </Link>
          </Button>

          <Button
            variant="ghost"
            className={cn(
              'justify-start md:w-full',
              pathname?.startsWith('/admin/organisation-stats') && 'bg-secondary',
            )}
            asChild
          >
            <Link to="/admin/organisation-stats">
              <LineChartIcon className="mr-2 h-5 w-5" />
              <Trans>Organisation Stats</Trans>
            </Link>
          </Button>

          <Button
            variant="ghost"
            className={cn('justify-start md:w-full', pathname?.startsWith('/admin/site-settings') && 'bg-secondary')}
            asChild
          >
            <Link to="/admin/site-settings">
              <Settings className="mr-2 h-5 w-5" />
              <Trans>Site Settings</Trans>
            </Link>
          </Button>
        </div>

        <div className="col-span-12 mt-12 md:col-span-9 md:mt-0">
          <Outlet />
        </div>
      </div>
    </div>
  );
}
