import { useState, useEffect } from 'react'
import { useParams, useLocation, Link } from 'react-router-dom'
import { contentApi } from '@/api/admin'
import type { StaticContent } from '@/types'
import { GlassCard } from '@/components/ui'
import { ArrowLeft, Loader2, FileText } from 'lucide-react'

// Map routes to content keys
const ROUTE_KEY_MAP: Record<string, string> = {
  '/terms': 'terms_of_service',
  '/privacy': 'privacy_policy',
}

export function StaticContentPage() {
  const { key: paramKey } = useParams<{ key: string }>()
  const location = useLocation()
  const [content, setContent] = useState<StaticContent | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Determine content key from route or param
  const contentKey = ROUTE_KEY_MAP[location.pathname] || paramKey

  useEffect(() => {
    if (!contentKey) return

    const loadContent = async () => {
      setIsLoading(true)
      setError(null)
      try {
        const data = await contentApi.getPublicContent(contentKey)
        setContent(data)
      } catch {
        setError('Контент не найден')
      } finally {
        setIsLoading(false)
      }
    }

    loadContent()
  }, [contentKey])

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center py-24">
        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
        <p className="text-gray-400">Загрузка...</p>
      </div>
    )
  }

  if (error || !content) {
    return (
      <div className="max-w-3xl mx-auto">
        <GlassCard className="text-center py-16">
          <div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-dark-700 flex items-center justify-center">
            <FileText className="w-10 h-10 text-gray-600" />
          </div>
          <h3 className="text-xl font-semibold text-white mb-2">Страница не найдена</h3>
          <p className="text-gray-400 mb-6">Запрашиваемый контент не существует</p>
          <Link
            to="/"
            className="inline-flex items-center gap-2 text-neon-400 hover:text-neon-300 transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            На главную
          </Link>
        </GlassCard>
      </div>
    )
  }

  return (
    <div className="max-w-3xl mx-auto">
      <Link
        to="/"
        className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
      >
        <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
        На главную
      </Link>

      <GlassCard>
        <h1 className="text-2xl md:text-3xl font-bold text-white mb-6">{content.title}</h1>
        <div
          className="prose prose-invert prose-gray max-w-none
            prose-headings:text-white prose-headings:font-semibold
            prose-p:text-gray-300 prose-p:leading-relaxed
            prose-a:text-neon-400 prose-a:no-underline hover:prose-a:text-neon-300
            prose-strong:text-white
            prose-ul:text-gray-300 prose-ol:text-gray-300
            prose-li:marker:text-gray-500
            prose-hr:border-dark-600 prose-hr:my-6
            prose-img:rounded-xl prose-img:shadow-lg"
          dangerouslySetInnerHTML={{ __html: content.content }}
        />
        <div className="mt-8 pt-6 border-t border-dark-600 text-sm text-gray-500">
          Последнее обновление: {new Date(content.updated_at).toLocaleDateString('ru-RU', {
            day: 'numeric',
            month: 'long',
            year: 'numeric'
          })}
        </div>
      </GlassCard>
    </div>
  )
}