'use client'

import { useEffect, useState } from 'react'
import { Edit, Plus, Trash2 } from 'lucide-react'
import { toast } from 'sonner'

import { useLanguage } from '@/contexts/LanguageContext'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { createAdminOffer, deleteAdminOffer, getAdminOffers, type AdminOfferItem, updateAdminOffer, uploadAdminMedia } from '@/services/data/admin-content'

const emptyForm: AdminOfferItem = {
  id: '',
  titleAr: '',
  titleEn: '',
  descAr: '',
  descEn: '',
  detailsAr: '',
  detailsEn: '',
  category: '',
  image: '',
  validUntil: '',
  requirementsAr: '',
  requirementsEn: '',
  applyLink: '',
  interestTitleAr: '',
  interestTitleEn: '',
  interestSubtitleAr: '',
  interestSubtitleEn: '',
  interestOpenTitleAr: '',
  interestOpenTitleEn: '',
  interestOpenSubtitleAr: '',
  interestOpenSubtitleEn: '',
  interestHighlightsTitleAr: '',
  interestHighlightsTitleEn: '',
  interestHighlight1Ar: '',
  interestHighlight1En: '',
  interestHighlight2Ar: '',
  interestHighlight2En: '',
  interestHighlight3Ar: '',
  interestHighlight3En: '',
  interestNoticeAr: '',
  interestNoticeEn: '',
  isActive: true,
  isPublished: true,
  displayOrder: 0,
}

export default function OffersPage() {
  const { t } = useLanguage()
  const [items, setItems] = useState<AdminOfferItem[]>([])
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingId, setEditingId] = useState<string | null>(null)
  const [formData, setFormData] = useState<AdminOfferItem>(emptyForm)
  const [selectedImage, setSelectedImage] = useState<File | null>(null)
  const [uploadingImage, setUploadingImage] = useState(false)

  useEffect(() => { void loadData() }, [])

  const loadData = async () => {
    setLoading(true)
    try {
      setItems(await getAdminOffers())
    } catch (error) {
      toast.error(error instanceof Error ? error.message : t('تعذر تحميل العروض', 'Failed to load offers'))
    } finally {
      setLoading(false)
    }
  }

  const openCreate = () => { setEditingId(null); setFormData(emptyForm); setSelectedImage(null); setIsDialogOpen(true) }
  const openEdit = (item: AdminOfferItem) => { setEditingId(item.id); setFormData(item); setSelectedImage(null); setIsDialogOpen(true) }
  const handleChange = (field: keyof AdminOfferItem, value: string | boolean | number) => setFormData((current) => ({ ...current, [field]: value }))

  const handleUploadImage = async () => {
    if (!selectedImage) {
      toast.error(t('اختر صورة أولًا', 'Choose an image first'))
      return
    }
    setUploadingImage(true)
    try {
      const uploaded = await uploadAdminMedia(selectedImage)
      handleChange('image', uploaded.fileUrl)
      toast.success(t('تم رفع الصورة', 'Image uploaded'))
      setSelectedImage(null)
    } catch (error) {
      toast.error(error instanceof Error ? error.message : t('تعذر رفع الصورة', 'Failed to upload image'))
    } finally {
      setUploadingImage(false)
    }
  }

  const handleSubmit = async () => {
    if (!formData.titleAr) {
      toast.error(t('عنوان العرض مطلوب', 'Offer title is required'))
      return
    }
    setSaving(true)
    try {
      const payload = {
        titleAr: formData.titleAr,
        titleEn: formData.titleEn,
        descAr: formData.descAr,
        descEn: formData.descEn,
        detailsAr: formData.detailsAr,
        detailsEn: formData.detailsEn,
        category: formData.category,
        image: formData.image,
        validUntil: formData.validUntil,
        requirementsAr: formData.requirementsAr,
        requirementsEn: formData.requirementsEn,
        applyLink: formData.applyLink,
        interestTitleAr: formData.interestTitleAr,
        interestTitleEn: formData.interestTitleEn,
        interestSubtitleAr: formData.interestSubtitleAr,
        interestSubtitleEn: formData.interestSubtitleEn,
        interestOpenTitleAr: formData.interestOpenTitleAr,
        interestOpenTitleEn: formData.interestOpenTitleEn,
        interestOpenSubtitleAr: formData.interestOpenSubtitleAr,
        interestOpenSubtitleEn: formData.interestOpenSubtitleEn,
        interestHighlightsTitleAr: formData.interestHighlightsTitleAr,
        interestHighlightsTitleEn: formData.interestHighlightsTitleEn,
        interestHighlight1Ar: formData.interestHighlight1Ar,
        interestHighlight1En: formData.interestHighlight1En,
        interestHighlight2Ar: formData.interestHighlight2Ar,
        interestHighlight2En: formData.interestHighlight2En,
        interestHighlight3Ar: formData.interestHighlight3Ar,
        interestHighlight3En: formData.interestHighlight3En,
        interestNoticeAr: formData.interestNoticeAr,
        interestNoticeEn: formData.interestNoticeEn,
        isActive: formData.isActive ? 1 : 0,
        isPublished: formData.isPublished ? 1 : 0,
        displayOrder: formData.displayOrder,
      }
      if (editingId) {
        await updateAdminOffer(editingId, payload)
        toast.success(t('تم تحديث العرض', 'Offer updated'))
      } else {
        await createAdminOffer(payload)
        toast.success(t('تمت إضافة العرض', 'Offer created'))
      }
      setIsDialogOpen(false)
      await loadData()
    } catch (error) {
      toast.error(error instanceof Error ? error.message : t('تعذر حفظ العرض', 'Failed to save offer'))
    } finally {
      setSaving(false)
    }
  }

  const handleDelete = async (id: string) => {
    if (!window.confirm(t('هل تريد حذف هذا العرض؟', 'Delete this offer?'))) return
    try {
      await deleteAdminOffer(id)
      toast.success(t('تم حذف العرض', 'Offer deleted'))
      await loadData()
    } catch (error) {
      toast.error(error instanceof Error ? error.message : t('تعذر حذف العرض', 'Failed to delete offer'))
    }
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold mb-2">{t('إدارة العروض', 'Offers Management')}</h1>
          <p className="text-muted-foreground">{t('إدارة المنح والخصومات والعروض التسويقية', 'Manage scholarships, discounts, and promotional offers')}</p>
        </div>
        <Button onClick={openCreate}><Plus className="w-4 h-4 mr-2" />{t('إضافة عرض', 'Add Offer')}</Button>
      </div>

      <div className="rounded-lg border bg-card">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>{t('العنوان', 'Title')}</TableHead>
              <TableHead>{t('الفئة', 'Category')}</TableHead>
              <TableHead>{t('الصلاحية', 'Valid Until')}</TableHead>
              <TableHead>{t('الحالة', 'Status')}</TableHead>
              <TableHead className="text-right">{t('الإجراءات', 'Actions')}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {loading ? (
              <TableRow><TableCell colSpan={5} className="py-8 text-center">{t('جاري التحميل...', 'Loading...')}</TableCell></TableRow>
            ) : items.length === 0 ? (
              <TableRow><TableCell colSpan={5} className="py-8 text-center">{t('لا توجد عروض', 'No offers found')}</TableCell></TableRow>
            ) : items.map((item) => (
              <TableRow key={item.id}>
                <TableCell className="font-medium">{item.titleAr || item.titleEn}</TableCell>
                <TableCell>{item.category || '-'}</TableCell>
                <TableCell>{item.validUntil || '-'}</TableCell>
                <TableCell className="space-x-2">
                  <Badge variant={item.isPublished ? 'default' : 'secondary'}>{item.isPublished ? t('منشور', 'Published') : t('مسودة', 'Draft')}</Badge>
                  <Badge variant={item.isActive ? 'outline' : 'secondary'}>{item.isActive ? t('فعال', 'Active') : t('متوقف', 'Inactive')}</Badge>
                </TableCell>
                <TableCell className="text-right">
                  <Button variant="ghost" size="icon" onClick={() => openEdit(item)}><Edit className="w-4 h-4" /></Button>
                  <Button variant="ghost" size="icon" onClick={() => handleDelete(item.id)}><Trash2 className="w-4 h-4" /></Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader><DialogTitle>{editingId ? t('تعديل عرض', 'Edit Offer') : t('إضافة عرض', 'Add Offer')}</DialogTitle></DialogHeader>
          <div className="grid gap-4">
            <div className="grid md:grid-cols-2 gap-4">
              <div className="space-y-2"><Label>{t('العنوان العربي', 'Arabic Title')}</Label><Input dir="rtl" value={formData.titleAr} onChange={(e) => handleChange('titleAr', e.target.value)} /></div>
              <div className="space-y-2"><Label>{t('العنوان الإنجليزي', 'English Title')}</Label><Input value={formData.titleEn} onChange={(e) => handleChange('titleEn', e.target.value)} /></div>
            </div>
            <div className="grid md:grid-cols-3 gap-4">
              <div className="space-y-2"><Label>{t('الفئة', 'Category')}</Label><Input value={formData.category} onChange={(e) => handleChange('category', e.target.value)} /></div>
              <div className="space-y-2"><Label>{t('صالح حتى', 'Valid Until')}</Label><Input type="date" value={formData.validUntil} onChange={(e) => handleChange('validUntil', e.target.value)} /></div>
              <div className="space-y-2"><Label>{t('ترتيب العرض', 'Display Order')}</Label><Input type="number" value={formData.displayOrder} onChange={(e) => handleChange('displayOrder', Number(e.target.value))} /></div>
            </div>
            <div className="space-y-2">
              <Label>{t('صورة العرض', 'Offer Image')}</Label>
              <div className="flex gap-2">
                <Input dir="ltr" value={formData.image} onChange={(e) => handleChange('image', e.target.value)} placeholder={t('رابط الصورة أو نتيجة الرفع', 'Image URL or uploaded file URL')} />
                <Button type="button" variant="outline" onClick={handleUploadImage} disabled={uploadingImage}>
                  {uploadingImage ? t('جارٍ الرفع...', 'Uploading...') : t('رفع', 'Upload')}
                </Button>
              </div>
              <Input type="file" accept="image/*" onChange={(e) => setSelectedImage(e.target.files?.[0] || null)} />
            </div>
            <div className="space-y-2"><Label>{t('رابط التقديم', 'Apply Link')}</Label><Input dir="ltr" value={formData.applyLink} onChange={(e) => handleChange('applyLink', e.target.value)} /></div>
            <div className="grid md:grid-cols-2 gap-4">
              <div className="space-y-2"><Label>{t('وصف مختصر عربي', 'Arabic Summary')}</Label><Textarea dir="rtl" rows={3} value={formData.descAr} onChange={(e) => handleChange('descAr', e.target.value)} /></div>
              <div className="space-y-2"><Label>{t('وصف مختصر إنجليزي', 'English Summary')}</Label><Textarea rows={3} value={formData.descEn} onChange={(e) => handleChange('descEn', e.target.value)} /></div>
            </div>
            <div className="grid md:grid-cols-2 gap-4">
              <div className="space-y-2"><Label>{t('تفاصيل عربية', 'Arabic Details')}</Label><Textarea dir="rtl" rows={5} value={formData.detailsAr} onChange={(e) => handleChange('detailsAr', e.target.value)} /></div>
              <div className="space-y-2"><Label>{t('تفاصيل إنجليزية', 'English Details')}</Label><Textarea rows={5} value={formData.detailsEn} onChange={(e) => handleChange('detailsEn', e.target.value)} /></div>
            </div>
            <div className="grid md:grid-cols-2 gap-4">
              <div className="space-y-2"><Label>{t('المتطلبات بالعربية', 'Arabic Requirements')}</Label><Textarea dir="rtl" rows={4} value={formData.requirementsAr} onChange={(e) => handleChange('requirementsAr', e.target.value)} /></div>
              <div className="space-y-2"><Label>{t('المتطلبات بالإنجليزية', 'English Requirements')}</Label><Textarea rows={4} value={formData.requirementsEn} onChange={(e) => handleChange('requirementsEn', e.target.value)} /></div>
            </div>
            <div className="border rounded-lg p-4 space-y-4">
              <p className="font-semibold">{t('قسم هل أنت مهتم بهذا العرض؟', 'Interested in this offer section')}</p>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2"><Label>{t('عنوان القسم (عربي)', 'Section Title (Arabic)')}</Label><Input dir="rtl" value={formData.interestTitleAr} onChange={(e) => handleChange('interestTitleAr', e.target.value)} /></div>
                <div className="space-y-2"><Label>{t('عنوان القسم (English)', 'Section Title (English)')}</Label><Input dir="ltr" value={formData.interestTitleEn} onChange={(e) => handleChange('interestTitleEn', e.target.value)} /></div>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2"><Label>{t('وصف القسم (عربي)', 'Section Description (Arabic)')}</Label><Textarea dir="rtl" rows={3} value={formData.interestSubtitleAr} onChange={(e) => handleChange('interestSubtitleAr', e.target.value)} /></div>
                <div className="space-y-2"><Label>{t('وصف القسم (English)', 'Section Description (English)')}</Label><Textarea dir="ltr" rows={3} value={formData.interestSubtitleEn} onChange={(e) => handleChange('interestSubtitleEn', e.target.value)} /></div>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2"><Label>{t('عنوان متاح للجميع (عربي)', 'Open Title (Arabic)')}</Label><Input dir="rtl" value={formData.interestOpenTitleAr} onChange={(e) => handleChange('interestOpenTitleAr', e.target.value)} /></div>
                <div className="space-y-2"><Label>{t('عنوان متاح للجميع (English)', 'Open Title (English)')}</Label><Input dir="ltr" value={formData.interestOpenTitleEn} onChange={(e) => handleChange('interestOpenTitleEn', e.target.value)} /></div>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2"><Label>{t('وصف متاح للجميع (عربي)', 'Open Subtitle (Arabic)')}</Label><Input dir="rtl" value={formData.interestOpenSubtitleAr} onChange={(e) => handleChange('interestOpenSubtitleAr', e.target.value)} /></div>
                <div className="space-y-2"><Label>{t('وصف متاح للجميع (English)', 'Open Subtitle (English)')}</Label><Input dir="ltr" value={formData.interestOpenSubtitleEn} onChange={(e) => handleChange('interestOpenSubtitleEn', e.target.value)} /></div>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2"><Label>{t('عنوان مميزات العرض (عربي)', 'Highlights Title (Arabic)')}</Label><Input dir="rtl" value={formData.interestHighlightsTitleAr} onChange={(e) => handleChange('interestHighlightsTitleAr', e.target.value)} /></div>
                <div className="space-y-2"><Label>{t('عنوان مميزات العرض (English)', 'Highlights Title (English)')}</Label><Input dir="ltr" value={formData.interestHighlightsTitleEn} onChange={(e) => handleChange('interestHighlightsTitleEn', e.target.value)} /></div>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2"><Label>{t('مميزة 1 (عربي)', 'Highlight 1 (Arabic)')}</Label><Input dir="rtl" value={formData.interestHighlight1Ar} onChange={(e) => handleChange('interestHighlight1Ar', e.target.value)} /></div>
                <div className="space-y-2"><Label>{t('مميزة 1 (English)', 'Highlight 1 (English)')}</Label><Input dir="ltr" value={formData.interestHighlight1En} onChange={(e) => handleChange('interestHighlight1En', e.target.value)} /></div>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2"><Label>{t('مميزة 2 (عربي)', 'Highlight 2 (Arabic)')}</Label><Input dir="rtl" value={formData.interestHighlight2Ar} onChange={(e) => handleChange('interestHighlight2Ar', e.target.value)} /></div>
                <div className="space-y-2"><Label>{t('مميزة 2 (English)', 'Highlight 2 (English)')}</Label><Input dir="ltr" value={formData.interestHighlight2En} onChange={(e) => handleChange('interestHighlight2En', e.target.value)} /></div>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2"><Label>{t('مميزة 3 (عربي)', 'Highlight 3 (Arabic)')}</Label><Input dir="rtl" value={formData.interestHighlight3Ar} onChange={(e) => handleChange('interestHighlight3Ar', e.target.value)} /></div>
                <div className="space-y-2"><Label>{t('مميزة 3 (English)', 'Highlight 3 (English)')}</Label><Input dir="ltr" value={formData.interestHighlight3En} onChange={(e) => handleChange('interestHighlight3En', e.target.value)} /></div>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2"><Label>{t('تنبيه القسم (عربي)', 'Notice (Arabic)')}</Label><Textarea dir="rtl" rows={3} value={formData.interestNoticeAr} onChange={(e) => handleChange('interestNoticeAr', e.target.value)} /></div>
                <div className="space-y-2"><Label>{t('تنبيه القسم (English)', 'Notice (English)')}</Label><Textarea dir="ltr" rows={3} value={formData.interestNoticeEn} onChange={(e) => handleChange('interestNoticeEn', e.target.value)} /></div>
              </div>
            </div>
            <div className="grid md:grid-cols-2 gap-4">
              <div className="flex items-center justify-between rounded-lg border p-4"><div><p className="font-medium">{t('فعال', 'Active')}</p></div><Switch checked={formData.isActive} onCheckedChange={(checked) => handleChange('isActive', checked)} /></div>
              <div className="flex items-center justify-between rounded-lg border p-4"><div><p className="font-medium">{t('منشور', 'Published')}</p></div><Switch checked={formData.isPublished} onCheckedChange={(checked) => handleChange('isPublished', checked)} /></div>
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="outline" onClick={() => setIsDialogOpen(false)}>{t('إلغاء', 'Cancel')}</Button>
              <Button onClick={handleSubmit} disabled={saving}>{saving ? t('جارٍ الحفظ...', 'Saving...') : t('حفظ', 'Save')}</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}