import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { adminAppsApi, AppDefinition, LocalizedText, AppStep, AppButton } from '../api/adminApps'

// Icons
const AppsIcon = () => (
  <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
  </svg>
)

const PlusIcon = () => (
  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
  </svg>
)

const EditIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
  </svg>
)

const TrashIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
  </svg>
)

const ChevronUpIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
  </svg>
)

const ChevronDownIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
  </svg>
)

const CopyIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
  </svg>
)

const StarIcon = ({ filled }: { filled: boolean }) => (
  <svg className={`w-4 h-4 ${filled ? 'fill-yellow-400 text-yellow-400' : 'text-dark-500'}`} viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
  </svg>
)

const PLATFORM_LABELS: Record<string, string> = {
  ios: 'iOS',
  android: 'Android',
  macos: 'macOS',
  windows: 'Windows',
  linux: 'Linux',
  androidTV: 'Android TV',
  appleTV: 'Apple TV',
}

const PLATFORMS = ['ios', 'android', 'macos', 'windows', 'linux', 'androidTV', 'appleTV']

// Helper to create empty localized text
const emptyLocalizedText = (): LocalizedText => ({
  en: '',
  ru: '',
  zh: '',
  fa: '',
})

// Helper to create empty app step
const emptyAppStep = (): AppStep => ({
  description: emptyLocalizedText(),
  buttons: [],
})

// Helper to create empty app
const createEmptyApp = (platform: string): AppDefinition => ({
  id: `new-app-${platform}-${Date.now()}`,
  name: '',
  isFeatured: false,
  urlScheme: '',
  installationStep: emptyAppStep(),
  addSubscriptionStep: emptyAppStep(),
  connectAndUseStep: emptyAppStep(),
})

interface AppEditorModalProps {
  app: AppDefinition
  platform: string
  isNew: boolean
  onSave: (app: AppDefinition) => void
  onClose: () => void
}

function AppEditorModal({ app, platform, isNew, onSave, onClose }: AppEditorModalProps) {
  const { t } = useTranslation()
  const [editedApp, setEditedApp] = useState<AppDefinition>({ ...app })
  const [activeTab, setActiveTab] = useState<'basic' | 'installation' | 'subscription' | 'connect' | 'additional'>('basic')

  const updateField = <K extends keyof AppDefinition>(field: K, value: AppDefinition[K]) => {
    setEditedApp((prev) => ({ ...prev, [field]: value }))
  }

  const updateLocalizedText = (
    stepKey: 'installationStep' | 'addSubscriptionStep' | 'connectAndUseStep' | 'additionalBeforeAddSubscriptionStep' | 'additionalAfterAddSubscriptionStep',
    field: 'description' | 'title',
    lang: keyof LocalizedText,
    value: string
  ) => {
    setEditedApp((prev) => {
      const step = prev[stepKey] || emptyAppStep()
      const fieldValue = step[field] || emptyLocalizedText()
      return {
        ...prev,
        [stepKey]: {
          ...step,
          [field]: { ...fieldValue, [lang]: value },
        },
      }
    })
  }

  const updateButtons = (
    stepKey: 'installationStep' | 'addSubscriptionStep' | 'connectAndUseStep' | 'additionalBeforeAddSubscriptionStep' | 'additionalAfterAddSubscriptionStep',
    buttons: AppButton[]
  ) => {
    setEditedApp((prev) => {
      const step = prev[stepKey] || emptyAppStep()
      return {
        ...prev,
        [stepKey]: { ...step, buttons },
      }
    })
  }

  const addButton = (stepKey: 'installationStep' | 'additionalBeforeAddSubscriptionStep' | 'additionalAfterAddSubscriptionStep') => {
    const step = editedApp[stepKey] || emptyAppStep()
    const buttons = step.buttons || []
    updateButtons(stepKey, [...buttons, { buttonLink: '', buttonText: emptyLocalizedText() }])
  }

  const removeButton = (stepKey: 'installationStep' | 'additionalBeforeAddSubscriptionStep' | 'additionalAfterAddSubscriptionStep', index: number) => {
    const step = editedApp[stepKey] || emptyAppStep()
    const buttons = step.buttons || []
    updateButtons(stepKey, buttons.filter((_, i) => i !== index))
  }

  const updateButton = (
    stepKey: 'installationStep' | 'additionalBeforeAddSubscriptionStep' | 'additionalAfterAddSubscriptionStep',
    index: number,
    field: 'buttonLink' | 'buttonText',
    value: string | LocalizedText
  ) => {
    const step = editedApp[stepKey] || emptyAppStep()
    const buttons = [...(step.buttons || [])]
    buttons[index] = { ...buttons[index], [field]: value }
    updateButtons(stepKey, buttons)
  }

  const renderLocalizedTextInputs = (
    stepKey: 'installationStep' | 'addSubscriptionStep' | 'connectAndUseStep' | 'additionalBeforeAddSubscriptionStep' | 'additionalAfterAddSubscriptionStep',
    field: 'description' | 'title',
    label: string
  ) => {
    const step = editedApp[stepKey]
    const value = step?.[field] || emptyLocalizedText()

    return (
      <div className="space-y-2">
        <label className="block text-sm font-medium text-dark-300">{label}</label>
        {(['en', 'ru'] as const).map((lang) => (
          <div key={lang} className="flex gap-2 items-center">
            <span className="w-8 text-xs text-dark-500 uppercase">{lang}</span>
            <textarea
              value={value[lang] || ''}
              onChange={(e) => updateLocalizedText(stepKey, field, lang, e.target.value)}
              className="input flex-1 text-sm"
              rows={2}
            />
          </div>
        ))}
      </div>
    )
  }

  const renderButtonsEditor = (stepKey: 'installationStep' | 'additionalBeforeAddSubscriptionStep' | 'additionalAfterAddSubscriptionStep') => {
    const step = editedApp[stepKey]
    const buttons = step?.buttons || []

    return (
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium text-dark-300">{t('admin.apps.buttons')}</label>
          <button
            type="button"
            onClick={() => addButton(stepKey)}
            className="text-xs text-accent-400 hover:text-accent-300"
          >
            + {t('admin.apps.addButton')}
          </button>
        </div>
        {buttons.map((button, index) => (
          <div key={index} className="p-3 bg-dark-800/50 rounded-lg space-y-2">
            <div className="flex items-center justify-between">
              <span className="text-xs text-dark-400">{t('admin.apps.button')} #{index + 1}</span>
              <button
                type="button"
                onClick={() => removeButton(stepKey, index)}
                className="text-error-400 hover:text-error-300"
              >
                <TrashIcon />
              </button>
            </div>
            <input
              type="url"
              value={button.buttonLink}
              onChange={(e) => updateButton(stepKey, index, 'buttonLink', e.target.value)}
              placeholder="https://..."
              className="input w-full text-sm"
            />
            {(['en', 'ru'] as const).map((lang) => (
              <div key={lang} className="flex gap-2 items-center">
                <span className="w-8 text-xs text-dark-500 uppercase">{lang}</span>
                <input
                  type="text"
                  value={button.buttonText[lang] || ''}
                  onChange={(e) => {
                    const newButtonText = { ...button.buttonText, [lang]: e.target.value }
                    updateButton(stepKey, index, 'buttonText', newButtonText)
                  }}
                  placeholder={t('admin.apps.buttonText')}
                  className="input flex-1 text-sm"
                />
              </div>
            ))}
          </div>
        ))}
      </div>
    )
  }

  return (
    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
      <div className="bg-dark-900 rounded-xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
        {/* Header */}
        <div className="p-4 border-b border-dark-700 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-dark-100">
            {isNew ? t('admin.apps.createApp') : t('admin.apps.editApp')} - {PLATFORM_LABELS[platform]}
          </h2>
          <button onClick={onClose} className="text-dark-400 hover:text-dark-200">
            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Tabs */}
        <div className="flex border-b border-dark-700 overflow-x-auto">
          {(['basic', 'installation', 'subscription', 'connect', 'additional'] as const).map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`px-4 py-2 text-sm font-medium whitespace-nowrap ${
                activeTab === tab
                  ? 'text-accent-400 border-b-2 border-accent-400'
                  : 'text-dark-400 hover:text-dark-200'
              }`}
            >
              {t(`admin.apps.tabs.${tab}`)}
            </button>
          ))}
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-4 space-y-4">
          {activeTab === 'basic' && (
            <>
              <div>
                <label className="block text-sm font-medium text-dark-300 mb-1">{t('admin.apps.appId')}</label>
                <input
                  type="text"
                  value={editedApp.id}
                  onChange={(e) => updateField('id', e.target.value)}
                  className="input w-full"
                  disabled={!isNew}
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-dark-300 mb-1">{t('admin.apps.appName')}</label>
                <input
                  type="text"
                  value={editedApp.name}
                  onChange={(e) => updateField('name', e.target.value)}
                  className="input w-full"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-dark-300 mb-1">{t('admin.apps.urlScheme')}</label>
                <input
                  type="text"
                  value={editedApp.urlScheme}
                  onChange={(e) => updateField('urlScheme', e.target.value)}
                  className="input w-full"
                  placeholder="app://add/"
                />
              </div>
              <div className="flex items-center gap-4">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={editedApp.isFeatured}
                    onChange={(e) => updateField('isFeatured', e.target.checked)}
                    className="w-4 h-4 accent-accent-500"
                  />
                  <span className="text-sm text-dark-300">{t('admin.apps.featured')}</span>
                </label>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={editedApp.isNeedBase64Encoding || false}
                    onChange={(e) => updateField('isNeedBase64Encoding', e.target.checked || undefined)}
                    className="w-4 h-4 accent-accent-500"
                  />
                  <span className="text-sm text-dark-300">{t('admin.apps.base64Encoding')}</span>
                </label>
              </div>
            </>
          )}

          {activeTab === 'installation' && (
            <>
              {renderLocalizedTextInputs('installationStep', 'description', t('admin.apps.installDescription'))}
              {renderButtonsEditor('installationStep')}
            </>
          )}

          {activeTab === 'subscription' && (
            <>
              {renderLocalizedTextInputs('addSubscriptionStep', 'description', t('admin.apps.subscriptionDescription'))}
            </>
          )}

          {activeTab === 'connect' && (
            <>
              {renderLocalizedTextInputs('connectAndUseStep', 'description', t('admin.apps.connectDescription'))}
            </>
          )}

          {activeTab === 'additional' && (
            <>
              <div className="space-y-4">
                <h3 className="text-sm font-semibold text-dark-200">{t('admin.apps.beforeSubscription')}</h3>
                {renderLocalizedTextInputs('additionalBeforeAddSubscriptionStep', 'title', t('admin.apps.stepTitle'))}
                {renderLocalizedTextInputs('additionalBeforeAddSubscriptionStep', 'description', t('admin.apps.stepDescription'))}
                {renderButtonsEditor('additionalBeforeAddSubscriptionStep')}
              </div>
              <div className="border-t border-dark-700 pt-4 space-y-4">
                <h3 className="text-sm font-semibold text-dark-200">{t('admin.apps.afterSubscription')}</h3>
                {renderLocalizedTextInputs('additionalAfterAddSubscriptionStep', 'title', t('admin.apps.stepTitle'))}
                {renderLocalizedTextInputs('additionalAfterAddSubscriptionStep', 'description', t('admin.apps.stepDescription'))}
                {renderButtonsEditor('additionalAfterAddSubscriptionStep')}
              </div>
            </>
          )}
        </div>

        {/* Footer */}
        <div className="p-4 border-t border-dark-700 flex justify-end gap-3">
          <button onClick={onClose} className="btn-secondary">
            {t('common.cancel')}
          </button>
          <button onClick={() => onSave(editedApp)} className="btn-primary">
            {t('common.save')}
          </button>
        </div>
      </div>
    </div>
  )
}

export default function AdminApps() {
  const { t } = useTranslation()
  const queryClient = useQueryClient()
  const [selectedPlatform, setSelectedPlatform] = useState<string>('ios')
  const [editingApp, setEditingApp] = useState<{ app: AppDefinition; isNew: boolean } | null>(null)
  const [copyTarget, setCopyTarget] = useState<{ appId: string; platform: string } | null>(null)

  const { data: apps, isLoading } = useQuery({
    queryKey: ['admin-apps', selectedPlatform],
    queryFn: () => adminAppsApi.getPlatformApps(selectedPlatform),
  })

  const createMutation = useMutation({
    mutationFn: ({ platform, app }: { platform: string; app: AppDefinition }) =>
      adminAppsApi.createApp(platform, app),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] })
      setEditingApp(null)
    },
  })

  const updateMutation = useMutation({
    mutationFn: ({ platform, appId, app }: { platform: string; appId: string; app: AppDefinition }) =>
      adminAppsApi.updateApp(platform, appId, app),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] })
      setEditingApp(null)
    },
  })

  const deleteMutation = useMutation({
    mutationFn: ({ platform, appId }: { platform: string; appId: string }) =>
      adminAppsApi.deleteApp(platform, appId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] })
    },
  })

  const reorderMutation = useMutation({
    mutationFn: ({ platform, appIds }: { platform: string; appIds: string[] }) =>
      adminAppsApi.reorderApps(platform, appIds),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] })
    },
  })

  const copyMutation = useMutation({
    mutationFn: ({ platform, appId, targetPlatform }: { platform: string; appId: string; targetPlatform: string }) =>
      adminAppsApi.copyApp(platform, appId, targetPlatform),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-apps'] })
      setCopyTarget(null)
    },
  })

  const handleMoveUp = (index: number) => {
    if (!apps || index === 0) return
    const newOrder = [...apps]
    ;[newOrder[index - 1], newOrder[index]] = [newOrder[index], newOrder[index - 1]]
    reorderMutation.mutate({ platform: selectedPlatform, appIds: newOrder.map((a) => a.id) })
  }

  const handleMoveDown = (index: number) => {
    if (!apps || index === apps.length - 1) return
    const newOrder = [...apps]
    ;[newOrder[index], newOrder[index + 1]] = [newOrder[index + 1], newOrder[index]]
    reorderMutation.mutate({ platform: selectedPlatform, appIds: newOrder.map((a) => a.id) })
  }

  const handleSave = (app: AppDefinition) => {
    if (editingApp?.isNew) {
      createMutation.mutate({ platform: selectedPlatform, app })
    } else {
      updateMutation.mutate({ platform: selectedPlatform, appId: app.id, app })
    }
  }

  const handleDelete = (appId: string) => {
    if (confirm(t('admin.apps.confirmDelete'))) {
      deleteMutation.mutate({ platform: selectedPlatform, appId })
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <AppsIcon />
        <h1 className="text-2xl sm:text-3xl font-bold text-dark-50">{t('admin.apps.title')}</h1>
      </div>

      {/* Platform Tabs */}
      <div className="flex flex-wrap gap-2">
        {PLATFORMS.map((platform) => (
          <button
            key={platform}
            onClick={() => setSelectedPlatform(platform)}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              selectedPlatform === platform
                ? 'bg-accent-500 text-white'
                : 'bg-dark-800 text-dark-300 hover:bg-dark-700'
            }`}
          >
            {PLATFORM_LABELS[platform]}
          </button>
        ))}
      </div>

      {/* Add App Button */}
      <div className="flex justify-end">
        <button
          onClick={() => setEditingApp({ app: createEmptyApp(selectedPlatform), isNew: true })}
          className="btn-primary flex items-center gap-2"
        >
          <PlusIcon />
          {t('admin.apps.addApp')}
        </button>
      </div>

      {/* Apps List */}
      {isLoading ? (
        <div className="flex items-center justify-center py-12">
          <div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
        </div>
      ) : apps && apps.length > 0 ? (
        <div className="space-y-3">
          {apps.map((app, index) => (
            <div
              key={app.id}
              className="card flex items-center gap-4 p-4"
            >
              {/* Reorder buttons */}
              <div className="flex flex-col gap-1">
                <button
                  onClick={() => handleMoveUp(index)}
                  disabled={index === 0}
                  className="p-1 text-dark-400 hover:text-dark-200 disabled:opacity-30 disabled:cursor-not-allowed"
                >
                  <ChevronUpIcon />
                </button>
                <button
                  onClick={() => handleMoveDown(index)}
                  disabled={index === apps.length - 1}
                  className="p-1 text-dark-400 hover:text-dark-200 disabled:opacity-30 disabled:cursor-not-allowed"
                >
                  <ChevronDownIcon />
                </button>
              </div>

              {/* App Info */}
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <span className="font-medium text-dark-100">{app.name}</span>
                  {app.isFeatured && <StarIcon filled />}
                  {app.isNeedBase64Encoding && (
                    <span className="text-xs bg-dark-700 text-dark-400 px-2 py-0.5 rounded">Base64</span>
                  )}
                </div>
                <div className="text-xs text-dark-500 font-mono truncate">{app.id}</div>
                <div className="text-xs text-dark-400 mt-1">{app.urlScheme}</div>
              </div>

              {/* Actions */}
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setCopyTarget({ appId: app.id, platform: selectedPlatform })}
                  className="p-2 text-dark-400 hover:text-dark-200 hover:bg-dark-700 rounded"
                  title={t('admin.apps.copyTo')}
                >
                  <CopyIcon />
                </button>
                <button
                  onClick={() => setEditingApp({ app, isNew: false })}
                  className="p-2 text-dark-400 hover:text-dark-200 hover:bg-dark-700 rounded"
                  title={t('common.edit')}
                >
                  <EditIcon />
                </button>
                <button
                  onClick={() => handleDelete(app.id)}
                  className="p-2 text-error-400 hover:text-error-300 hover:bg-error-500/10 rounded"
                  title={t('common.delete')}
                >
                  <TrashIcon />
                </button>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="card text-center py-12">
          <AppsIcon />
          <p className="text-dark-400 mt-4">{t('admin.apps.noApps')}</p>
          <button
            onClick={() => setEditingApp({ app: createEmptyApp(selectedPlatform), isNew: true })}
            className="btn-primary mt-4"
          >
            {t('admin.apps.addFirstApp')}
          </button>
        </div>
      )}

      {/* Edit Modal */}
      {editingApp && (
        <AppEditorModal
          app={editingApp.app}
          platform={selectedPlatform}
          isNew={editingApp.isNew}
          onSave={handleSave}
          onClose={() => setEditingApp(null)}
        />
      )}

      {/* Copy Modal */}
      {copyTarget && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
          <div className="bg-dark-900 rounded-xl p-6 w-full max-w-md">
            <h3 className="text-lg font-semibold text-dark-100 mb-4">{t('admin.apps.copyTo')}</h3>
            <div className="grid grid-cols-2 gap-2">
              {PLATFORMS.filter((p) => p !== copyTarget.platform).map((platform) => (
                <button
                  key={platform}
                  onClick={() => copyMutation.mutate({
                    platform: copyTarget.platform,
                    appId: copyTarget.appId,
                    targetPlatform: platform,
                  })}
                  className="px-4 py-2 bg-dark-800 hover:bg-dark-700 rounded-lg text-dark-200 text-sm"
                >
                  {PLATFORM_LABELS[platform]}
                </button>
              ))}
            </div>
            <button
              onClick={() => setCopyTarget(null)}
              className="btn-secondary w-full mt-4"
            >
              {t('common.cancel')}
            </button>
          </div>
        </div>
      )}
    </div>
  )
}