import { Link } from 'react-router'
import {
  IconBooks,
  IconMap2,
  IconDownload,
  IconCheck,
  IconX,
  IconAlertTriangle,
  IconLoader2,
  IconTrash,
  IconEye,
} from '@tabler/icons-react'
import { useLang } from '../i18n/LanguageContext'
import { formatBytes, type CatalogItem } from '../lib/api'

export function DownloadCard({
  item,
  onStart,
  onCancel,
  onRemove,
  busy,
}: {
  item: CatalogItem
  onStart: (resourceId: string) => void
  onCancel: (taskId: string) => void
  onRemove: (resourceId: string) => void
  busy: boolean
}) {
  const { t, pick } = useLang()
  const { resource, downloaded, task } = item
  const active = task && (task.status === 'downloading' || task.status === 'queued')
  const failed = task?.status === 'failed'
  const TypeIcon = resource.type === 'wiki' ? IconBooks : IconMap2

  return (
    <div className="flex flex-col rounded-xl border border-arka-border bg-arka-surface p-4">
      <div className="mb-3 flex items-start justify-between gap-3">
        <div className="flex h-10 w-10 flex-none items-center justify-center rounded-lg bg-arka-surface-2 text-arka-accent">
          <TypeIcon size={22} stroke={1.6} />
        </div>
        <div className="flex items-center gap-2">
          <span className="text-[11px] text-arka-muted">
            {formatBytes(resource.sizeBytes)}
          </span>
          {resource.custom && (
            <button
              title={t('dl.remove')}
              onClick={() => {
                if (confirm(t('dl.removeConfirm'))) onRemove(resource.id)
              }}
              className="flex h-6 w-6 items-center justify-center rounded text-arka-muted transition-colors hover:bg-arka-offline/15 hover:text-arka-offline"
            >
              <IconTrash size={15} />
            </button>
          )}
        </div>
      </div>

      <div className="flex items-center gap-1.5">
        <h3 className="text-sm font-semibold text-arka-text">{pick(resource.name)}</h3>
        {resource.custom && (
          <span className="rounded bg-arka-accent-2/15 px-1.5 py-0.5 text-[10px] font-medium text-arka-accent-2">
            {t('dl.custom')}
          </span>
        )}
      </div>
      <p className="mt-1 flex-1 text-xs leading-relaxed text-arka-muted">
        {pick(resource.description)}
      </p>

      {/* Progreso juosta */}
      {active && (
        <div className="mt-3">
          <div className="mb-1 flex items-center justify-between text-[11px] text-arka-muted">
            <span>
              {task!.status === 'queued' ? t('dl.queued') : t('dl.downloading')}{' '}
              {task!.receivedBytes > 0 && `· ${formatBytes(task!.receivedBytes)}`}
            </span>
            <span className="font-semibold text-arka-accent">{task!.percent}%</span>
          </div>
          <div className="h-1.5 w-full overflow-hidden rounded-full bg-arka-surface-2">
            <div
              className="h-full rounded-full bg-arka-accent transition-all duration-500"
              style={{ width: `${task!.percent}%` }}
            />
          </div>
        </div>
      )}

      {/* Veiksmai */}
      <div className="mt-3 border-t border-arka-border pt-3">
        {downloaded ? (
          <div className="flex items-center gap-2">
            <span className="inline-flex items-center gap-1.5 rounded-full bg-arka-online/15 px-2.5 py-1 text-xs font-medium text-arka-online">
              <IconCheck size={14} />
              {t('dl.downloaded')}
            </span>
            <Link
              to={`/preview/${resource.id}`}
              className="inline-flex items-center gap-1.5 rounded-lg border border-arka-border px-3 py-1.5 text-xs font-medium text-arka-text transition-colors hover:border-arka-accent hover:text-arka-accent"
            >
              <IconEye size={14} />
              {t('dl.preview')}
            </Link>
          </div>
        ) : active ? (
          <button
            onClick={() => onCancel(task!.id)}
            className="inline-flex items-center gap-1.5 rounded-lg border border-arka-border px-3 py-1.5 text-xs font-medium text-arka-muted transition-colors hover:border-arka-offline hover:text-arka-offline"
          >
            <IconX size={14} />
            {t('dl.cancel')}
          </button>
        ) : (
          <div className="flex items-center gap-2">
            <button
              onClick={() => onStart(resource.id)}
              disabled={busy}
              className="inline-flex items-center gap-1.5 rounded-lg bg-arka-accent px-3 py-1.5 text-xs font-semibold text-arka-bg transition-opacity hover:opacity-90 disabled:opacity-50"
            >
              {busy ? (
                <IconLoader2 size={14} className="animate-spin" />
              ) : (
                <IconDownload size={14} />
              )}
              {failed ? t('dl.retry') : t('dl.download')}
            </button>
            {failed && (
              <span className="inline-flex items-center gap-1 text-xs text-arka-offline">
                <IconAlertTriangle size={13} />
                {t('dl.failed')}
              </span>
            )}
          </div>
        )}
      </div>
    </div>
  )
}
