import { useTemplate } from '@/templates/hooks/use-template'

function MyComponent() {
  const {
    template, // Current template object
    templateId, // 'default' | 'whatsapp' | 'telegram' | 'slack' | 'discord'
    colors, // Theme colors
    features, // Feature config
    terminology, // Custom labels
    switchTemplate, // Function to switch templates
  } = useTemplate()

  return (
    <div style={{ backgroundColor: colors.surfaceColor }}>
      <h1>{template.name}</h1>
    </div>
  )
}

import { useTemplate } from '@/templates/hooks/use-template'

function TemplateSwitcher() {
  const { switchTemplate, templateId, isLoading } = useTemplate()

  return (
    <select
      value={templateId}
      onChange={(e) => switchTemplate(e.target.value)}
      disabled={isLoading}
    >
      <option value="default">ɳChat</option>
      <option value="whatsapp">WhatsApp</option>
      <option value="telegram">Telegram</option>
      <option value="slack">Slack</option>
      <option value="discord">Discord</option>
    </select>
  )
}

import { useThemeColors } from '@/templates/hooks/use-template'

function Card() {
  const colors = useThemeColors()

  return (
    <div
      style={{
        backgroundColor: colors.cardColor,
        color: colors.textColor,
        border: `1px solid ${colors.borderColor}`,
      }}
    >
      <h2 style={{ color: colors.primaryColor }}>Title</h2>
      <p style={{ color: colors.textMutedColor }}>Description</p>
    </div>
  )
}

import { useFeature } from '@/templates/hooks/use-template'

function ThreadButton({ messageId }) {
  const hasThreads = useFeature('threads')

  // Hide button if template doesn't support threads
  if (!hasThreads) return null

  return <button onClick={() => openThread(messageId)}>Reply in thread</button>
}

import { useTerminology } from '@/templates/hooks/use-template'

function CreateChannelButton() {
  const { t } = useTerminology()

  return (
    <button>
      {t('createChannel')}
      {/*
        Returns:
        - "Create Channel" for ɳChat/Slack/Discord
        - "New Chat" for WhatsApp
        - "New Chat" for Telegram
      */}
    </button>
  )
}

function MessageActions({ message }) {
  const { features } = useTemplate()

  return (
    <div>
      {features.threads && <ThreadButton />}
      {features.reactions && <ReactButton />}
      {features.voiceMessages && <VoiceButton />}
      {features.codeBlocks && <CodeButton />}
    </div>
  )
}

function Message({ message }) {
  const { template } = useTemplate()

  // Use template-specific message component if available
  const MessageComponent = template.components?.MessageItem ?? DefaultMessage

  return <MessageComponent {...message} />
}

function StatusBadge({ status }) {
  const colors = useThemeColors()

  const bgColor = {
    online: colors.successColor,
    away: colors.warningColor,
    offline: colors.errorColor,
  }[status]

  return (
    <span
      style={{
        backgroundColor: bgColor,
        color: 'white',
        padding: '4px 8px',
        borderRadius: '4px',
      }}
    >
      {status}
    </span>
  )
}

function TemplatePreview() {
  const { switchTemplate, templateId } = useTemplate()
  const [originalTemplate, setOriginalTemplate] = useState(templateId)

  const handlePreview = async (id) => {
    setOriginalTemplate(templateId)
    await switchTemplate(id)
  }

  const handleRevert = async () => {
    await switchTemplate(originalTemplate)
  }

  return (
    <div>
      <button onClick={() => handlePreview('whatsapp')}>Preview WhatsApp</button>
      <button onClick={handleRevert}>Revert</button>
    </div>
  )
}

import { ThemeEditor } from '@/components/admin/theme-editor'
;<ThemeEditor
  onSave={(colors) => console.log('Saved', colors)}
  onExport={(colors) => console.log('Exported', colors)}
/>

import { TemplateGallery } from '@/components/admin/template-gallery'
;<TemplateGallery />