'use client'

import type {
  DevModeLifecycleHookExample,
  DevModeLifecycleHookPhase,
  DevModeSnippetIcon
} from './dev-mode-types'
import type { LucideIcon } from 'lucide-react'
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from '@admin/components/ui/accordion'
import { Badge } from '@admin/components/ui/badge'
import { getDevModeCodeBlockHeight } from '@admin/utils/dev-mode/code-block-height'
import { Eye, FileCode2, Inbox, List, Pencil, Plus, Save, Send, Trash2 } from 'lucide-react'
import { CopyableCodeBlock } from './copyable-code-block'

interface LifecycleHooksTabProps {
  lifecycleHooks: DevModeLifecycleHookExample[]
}

const LIFECYCLE_HOOK_ICONS = {
  eye: Eye,
  'file-code': FileCode2,
  inbox: Inbox,
  list: List,
  pencil: Pencil,
  plus: Plus,
  save: Save,
  send: Send,
  trash: Trash2
} satisfies Record<DevModeSnippetIcon, LucideIcon>

const LIFECYCLE_HOOK_PHASE_LABELS = {
  before: 'Before',
  after: 'After'
} satisfies Record<DevModeLifecycleHookPhase, string>

export function LifecycleHooksTab({ lifecycleHooks }: LifecycleHooksTabProps) {
  const firstHook = lifecycleHooks[0]

  if (!firstHook) {
    return (
      <div className="flex min-h-80 items-center justify-center rounded-sm border border-dashed border-border px-6 text-center text-sm text-muted-foreground">
        Lifecycle hook examples are generated for entity and form schemas.
      </div>
    )
  }

  return (
    <Accordion defaultValue={[firstHook.id]} className="min-h-0 shrink-0 rounded-sm">
      {lifecycleHooks.map((hook) => {
        const HookIcon = LIFECYCLE_HOOK_ICONS[hook.icon]
        const phaseLabel = LIFECYCLE_HOOK_PHASE_LABELS[hook.phase]

        return (
          <AccordionItem key={hook.id} value={hook.id}>
            <AccordionTrigger>
              <span className="flex min-w-0 flex-1 items-center justify-between gap-3">
                <span className="flex min-w-0 items-center gap-3">
                  <HookIcon aria-hidden="true" className="size-3.5 shrink-0" />
                  <div className="flex items-center gap-1.5">
                    <span className="truncate">{hook.label}</span>
                    <Badge variant={hook.phase === 'before' ? 'outline' : 'secondary'}>
                      {phaseLabel}
                    </Badge>
                  </div>
                </span>
              </span>
            </AccordionTrigger>
            <AccordionContent className="pb-5">
              <div className="flex min-h-0 flex-col gap-2">
                <div
                  className="flex min-h-0"
                  style={{ height: getDevModeCodeBlockHeight(hook.code, 34) }}
                >
                  <CopyableCodeBlock label={hook.label} code={hook.code} language={hook.language} />
                </div>

                <div
                  className="flex min-h-0"
                  style={{
                    height: getDevModeCodeBlockHeight(hook.contextExample.code, 24)
                  }}
                >
                  <CopyableCodeBlock
                    label={hook.contextExample.label}
                    code={hook.contextExample.code}
                    language={hook.contextExample.language}
                  />
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        )
      })}
    </Accordion>
  )
}