'use client'

import { useState, useEffect } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { ArrowLeft, Save, Trash2 } from 'lucide-react'
import { isAuthenticated } from '@/lib/auth'
import { apiGet, apiPut, apiDelete } from '@/lib/apiClient'
import LoadingSpinner from '@/components/LoadingSpinner'

interface NewsTicker {
  _id: string
  text: string
  link?: string
  isActive: boolean
  order: number
}

export default function EditNewsTickerPage() {
  const router = useRouter()
  const params = useParams()
  const tickerId = params.id as string

  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [formData, setFormData] = useState({
    text: '',
    link: '',
    isActive: true,
    order: 0,
  })

  useEffect(() => {
    if (!isAuthenticated()) {
      router.push('/admin')
      return
    }
    fetchTicker()
  }, [tickerId, router])

  const fetchTicker = async () => {
    try {
      const result = await apiGet<NewsTicker>(`/news-ticker/${tickerId}`)
      if (result.success && result.data) {
        setFormData({
          text: result.data.text,
          link: result.data.link || '',
          isActive: result.data.isActive,
          order: result.data.order,
        })
      }
    } catch (error: any) {
      console.error('Error fetching news ticker item:', error)
      alert(error.message || 'Failed to load news ticker item')
      router.push('/admin/news-ticker')
    } finally {
      setLoading(false)
    }
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value, type } = e.target
    const checked = (e.target as HTMLInputElement).checked

    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }))
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSaving(true)

    try {
      const result = await apiPut(`/news-ticker/${tickerId}`, {
        text: formData.text,
        link: formData.link || null,
        isActive: formData.isActive,
        order: parseInt(formData.order.toString()) || 0,
      })

      if (result.success) {
        router.push('/admin/news-ticker')
      }
    } catch (error: any) {
      console.error('Error updating news ticker item:', error)
      alert(error.message || 'Failed to update news ticker item')
    } finally {
      setSaving(false)
    }
  }

  const handleDelete = async () => {
    if (!confirm('Are you sure you want to delete this news ticker item?')) return

    try {
      const result = await apiDelete(`/news-ticker/${tickerId}`)
      if (result.success) {
        router.push('/admin/news-ticker')
      }
    } catch (error: any) {
      console.error('Error deleting news ticker item:', error)
      alert(error.message || 'Failed to delete news ticker item')
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen">
        <LoadingSpinner />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <button
          onClick={() => router.back()}
          className="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-all"
        >
          <ArrowLeft className="w-5 h-5" />
        </button>
        <div className="flex-1">
          <h1 className="text-3xl font-bold text-white mb-2">Edit News Ticker Item</h1>
          <p className="text-white/70">Update news ticker item details</p>
        </div>
        <button
          onClick={handleDelete}
          className="flex items-center gap-2 px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg transition-all"
        >
          <Trash2 className="w-5 h-5" />
          Delete
        </button>
      </div>

      {/* Form */}
      <form onSubmit={handleSubmit} className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20 space-y-6">
        {/* Text */}
        <div>
          <label htmlFor="text" className="block text-white font-medium mb-2">
            Text <span className="text-red-400">*</span>
          </label>
          <textarea
            id="text"
            name="text"
            value={formData.text}
            onChange={handleChange}
            required
            rows={3}
            className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary"
            placeholder="Enter news ticker text..."
          />
        </div>

        {/* Link */}
        <div>
          <label htmlFor="link" className="block text-white font-medium mb-2">
            Link (Optional)
          </label>
          <input
            type="url"
            id="link"
            name="link"
            value={formData.link}
            onChange={handleChange}
            className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary"
            placeholder="https://example.com"
          />
        </div>

        {/* Order */}
        <div>
          <label htmlFor="order" className="block text-white font-medium mb-2">
            Display Order
          </label>
          <input
            type="number"
            id="order"
            name="order"
            value={formData.order}
            onChange={handleChange}
            min="0"
            className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary"
          />
          <p className="text-white/50 text-sm mt-1">Lower numbers appear first</p>
        </div>

        {/* Active Status */}
        <div className="flex items-center gap-3">
          <input
            type="checkbox"
            id="isActive"
            name="isActive"
            checked={formData.isActive}
            onChange={handleChange}
            className="w-5 h-5 rounded border-white/20 bg-white/10 text-primary focus:ring-primary"
          />
          <label htmlFor="isActive" className="text-white font-medium">
            Active (visible on website)
          </label>
        </div>

        {/* Actions */}
        <div className="flex items-center gap-3 pt-4 border-t border-white/10">
          <button
            type="submit"
            disabled={saving}
            className="flex items-center gap-2 px-6 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <Save className="w-5 h-5" />
            {saving ? 'Saving...' : 'Save Changes'}
          </button>
          <button
            type="button"
            onClick={() => router.back()}
            className="px-6 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-all"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  )
}