import { Smartphone } from 'lucide-react'
import { Badge, cn, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
  PageHeader,
  PageHeaderDescription,
  PageHeaderMeta,
  PageHeaderSummary,
  PageHeaderTitle,
} from 'ui-patterns/PageHeader'

import { TOTPFactors } from '@/components/interfaces/Account/TOTPFactors'
import AccountLayout from '@/components/layouts/AccountLayout/AccountLayout'
import { AppLayout } from '@/components/layouts/AppLayout/AppLayout'
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
import { useMfaListFactorsQuery } from '@/data/profile/mfa-list-factors-query'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import type { NextPageWithLayout } from '@/types'

const collapsibleClasses = [
  'bg-surface-100',
  'hover:bg-surface-200',
  'data-open:bg-surface-200',
  'border-default',
  'hover:border-strong data-open:border-strong',
  'data-open:pb-px col-span-12 rounded-sm',
  '-space-y-px overflow-hidden',
  'border shadow-sm',
  'transition',
  'hover:z-50',
]

const Security: NextPageWithLayout = () => {
  const showSecuritySettings = useIsFeatureEnabled('account:show_security_settings')

  const { data } = useMfaListFactorsQuery({ enabled: showSecuritySettings })

  if (!showSecuritySettings) {
    return <UnknownInterface urlBack={`/account/me`} />
  }

  return (
    <>
      <PageHeader size="small">
        <PageHeaderMeta>
          <PageHeaderSummary>
            <PageHeaderTitle>Security</PageHeaderTitle>
            <PageHeaderDescription>
              Manage your account security settings and authentication methods.
            </PageHeaderDescription>
          </PageHeaderSummary>
        </PageHeaderMeta>
      </PageHeader>
      <PageContainer size="small">
        <Collapsible className={cn('mt-8', collapsibleClasses)}>
          <CollapsibleTrigger asChild>
            <button
              type="button"
              className="group flex w-full items-center justify-between rounded-sm py-3 px-4 md:px-6 text-foreground"
            >
              <div className="flex flex-row gap-4 items-center py-1">
                <Smartphone strokeWidth={1.5} />
                <span className="text-sm">Authenticator app</span>
              </div>

              {data ? (
                <Badge variant={data.totp.length === 0 ? 'default' : 'success'}>
                  {data.totp.length} app{data.totp.length === 1 ? '' : 's'} configured
                </Badge>
              ) : null}
            </button>
          </CollapsibleTrigger>
          <CollapsibleContent className="group border-t border-default bg-surface-100 py-6 px-4 md:px-6 text-foreground">
            <TOTPFactors />
          </CollapsibleContent>
        </Collapsible>
      </PageContainer>
    </>
  )
}

Security.getLayout = (page) => (
  <AppLayout>
    <DefaultLayout headerTitle="Account">
      <AccountLayout title="Security">{page}</AccountLayout>
    </DefaultLayout>
  </AppLayout>
)

export default Security