import { EnterFullScreenIcon } from '@radix-ui/react-icons'

import { cva, type VariantProps } from 'class-variance-authority'
import { type PropsWithChildren, type ReactNode } from 'react'

import { Button } from '@components/ui/button/button'
import { Loader } from '@components/ui/loader/loader'
import { cn } from '@lib/utils'

const gridContentFrameVariants = cva('flex flex-col border-1 border-(--discreet-border) h-full w-full', {
  variants: {
    variant: {
      default: '',
      inverted: 'bg-sidebar-border border-background border-e-transparent border-t-0',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
})

const gridContentFrameHeaderVariants = cva('flex items-center overflow-hidden p-3 min-h-10 border-b-1', {
  variants: {
    variant: {
      default: 'border-(--discreet-border)',
      inverted: 'border-t-0 border-t-sidebar-border border-b-background',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
})

type Props = PropsWithChildren<{
  title: string
  controls?: ReactNode[]
  indicators?: ReactNode[]
  onExpand?: () => void
  collapsed?: boolean
  titleLink?: ReactNode
  isLoading?: boolean
}> &
  VariantProps<typeof gridContentFrameVariants>

export const ContentFrame = ({
  title = '',
  controls = [],
  indicators = [],
  children,
  onExpand,
  variant,
  collapsed,
  titleLink,
  isLoading = false,
}: Props) => {
  return (
    <div className={cn(gridContentFrameVariants({ variant }))}>
      {collapsed ? (
        <div className="flex gap-2.5 min-w-0 items-center [writing-mode:vertical-lr]">
          <h2 className="text-xl flex self-center ms-4">{title}</h2>
          {indicators.length > 0 && <div className="flex gap-2 whitespace-nowrap">{indicators}</div>}
        </div>
      ) : (
        <>
          {/* header */}
          <div className={cn(gridContentFrameHeaderVariants({ variant }))}>
            {/* Title + Indicators */}
            <div className="flex flex-grow gap-2 overflow-hidden">
              <h2 className="text-xl overflow-hidden text-ellipsis whitespace-nowrap">{titleLink ?? title}</h2>
              {indicators.length > 0 && <div className="flex gap-2 whitespace-nowrap">{indicators}</div>}
            </div>

            {/* Controls */}
            {controls.length > 0 && <div className="flex gap-2 whitespace-nowrap">{controls}</div>}

            {/* Expand button */}
            {onExpand && (
              <Button
                title="Expand"
                onClick={onExpand}
                variant="outline"
                size="icon"
                className="size-6 ml-2"
                __e2e_test_id__={`${title.toLowerCase().replaceAll(' ', '-')}-modal-button`}
              >
                <EnterFullScreenIcon />
              </Button>
            )}
          </div>

          {/* content */}
          <div className="h-full min-h-0 overflow-auto relative">
            {children}
            {isLoading && <Loader label="Loading..." />}
          </div>
        </>
      )}
    </div>
  )
}
