'use client'

import type {
  DevModeIntegrationLoader,
  DevModeIntegrationMetadata
} from './dev-mode/dev-mode-types'
import type { Setting } from '@admin/actions/settings'
import { Button } from '@admin/components/ui/button'
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger
} from '@admin/components/ui/drawer'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@admin/components/ui/tabs'
import { useDevModeIntegration } from '@admin/hooks/use-dev-mode-integration'
import { useSetting } from '@admin/hooks/use-settings'
import { Code2 } from 'lucide-react'
import { CopyableCodeBlock } from './dev-mode/copyable-code-block'
import { LifecycleHooksTab } from './dev-mode/lifecycle-hooks-tab'
import { SnippetsTab } from './dev-mode/snippets-tab'

interface DevModeIntegrateButtonProps {
  integration: DevModeIntegrationMetadata
  loadIntegration: DevModeIntegrationLoader
  initialSettings?: Setting | null
}

export function DevModeIntegrateButton({
  integration,
  loadIntegration,
  initialSettings
}: DevModeIntegrateButtonProps) {
  const { data: settings } = useSetting({ initialData: initialSettings })
  const {
    integration: loadedIntegration,
    isPending,
    loadError,
    handleOpenChange
  } = useDevModeIntegration(loadIntegration)

  if (settings?.devMode === false) {
    return null
  }

  return (
    <Drawer swipeDirection="right" onOpenChange={handleOpenChange}>
      <DrawerTrigger render={<Button type="button" variant="outline" />}>
        <Code2 />
        <span className="inline">Dev Mode</span>
      </DrawerTrigger>
      <DrawerContent className="w-full overflow-hidden data-[swipe-direction=right]:max-w-4xl">
        <DrawerHeader className="pb-4">
          <DrawerTitle>{integration.schemaLabel}</DrawerTitle>
          <DrawerDescription>
            Generated {integration.schemaType} integration details.
          </DrawerDescription>
        </DrawerHeader>

        {loadedIntegration ? (
          <Tabs defaultValue="snippets" className="min-h-0 flex-1 gap-4 overflow-hidden px-6 pb-4">
            <TabsList className="w-full">
              <TabsTrigger value="snippets">Snippets</TabsTrigger>
              <TabsTrigger value="lifecycle-hooks">Lifecycle Hooks</TabsTrigger>
              <TabsTrigger value="schema">Schema</TabsTrigger>
            </TabsList>
            <TabsContent value="snippets" className="flex min-h-0 flex-col overflow-auto">
              <SnippetsTab snippets={loadedIntegration.snippets} />
            </TabsContent>
            <TabsContent value="lifecycle-hooks" className="flex min-h-0 flex-col overflow-auto">
              <LifecycleHooksTab lifecycleHooks={loadedIntegration.lifecycleHooks} />
            </TabsContent>
            <TabsContent value="schema" className="flex min-h-0 flex-col overflow-hidden">
              <CopyableCodeBlock
                label={`${integration.schemaLabel} schema`}
                code={loadedIntegration.schemaJson}
                language="json"
              />
            </TabsContent>
          </Tabs>
        ) : isPending ? (
          <div className="flex min-h-80 items-center justify-center px-6 text-sm text-muted-foreground">
            Loading integration details…
          </div>
        ) : loadError ? (
          <div
            role="alert"
            className="flex min-h-80 items-center justify-center px-6 text-sm text-destructive"
          >
            {loadError}
          </div>
        ) : null}
      </DrawerContent>
    </Drawer>
  )
}

export type {
  DevModeIntegration,
  DevModeIntegrationLoader,
  DevModeIntegrationMetadata,
  DevModeLifecycleHookExample,
  DevModeSnippet
} from './dev-mode/dev-mode-types'