'use client'

import type { DevModeSnippet, DevModeSnippetIcon, DevModeSnippetKind } 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 SnippetsTabProps {
  snippets: DevModeSnippet[]
}

const SNIPPET_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 SNIPPET_KIND_LABELS = {
  jsx: 'JSX',
  query: 'Query',
  mutation: 'Mutation'
} satisfies Record<DevModeSnippetKind, string>

function getSnippetCodes(snippet: DevModeSnippet): string[] {
  return snippet.codeTabs?.map((tab) => tab.code) ?? [snippet.code]
}

export function SnippetsTab({ snippets }: SnippetsTabProps) {
  const firstSnippet = snippets[0]

  if (!firstSnippet) {
    return null
  }

  return (
    <Accordion defaultValue={[firstSnippet.id]} className="min-h-0 shrink-0 rounded-sm">
      {snippets.map((snippet) => {
        const SnippetIcon = SNIPPET_ICONS[snippet.icon]
        const snippetKindLabel = SNIPPET_KIND_LABELS[snippet.kind]

        return (
          <AccordionItem key={snippet.id} value={snippet.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">
                  <SnippetIcon aria-hidden="true" className="size-3.5 shrink-0" />
                  <div className="flex items-center gap-1.5">
                    <span className="truncate">{snippet.label}</span>
                    <Badge variant={snippet.kind === 'query' ? 'outline' : 'secondary'}>
                      {snippetKindLabel}
                    </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(
                      getSnippetCodes(snippet),
                      34,
                      (snippet.codeTabs?.length ?? 0) > 1
                    )
                  }}
                >
                  <CopyableCodeBlock
                    label={snippet.label}
                    code={snippet.code}
                    language={snippet.language}
                    tabs={snippet.codeTabs}
                  />
                </div>

                {[snippet.payloadExample, snippet.responseExample].flatMap((example) =>
                  example ? (
                    <div
                      key={example.label}
                      className="flex min-h-0"
                      style={{
                        height: getDevModeCodeBlockHeight(example.code, 24)
                      }}
                    >
                      <CopyableCodeBlock
                        label={example.label}
                        code={example.code}
                        language={example.language}
                      />
                    </div>
                  ) : (
                    []
                  )
                )}
              </div>
            </AccordionContent>
          </AccordionItem>
        )
      })}
    </Accordion>
  )
}