import { useState, useEffect, useContext, useRef } from 'react'
import { Tag, Plus, Edit2, Trash2, Upload, Image } from 'lucide-react'
import { api } from '../utils/api'
import { useLanguage } from '../i18n/LanguageContext'
import { useAuth } from '../contexts/AuthContext'
import { AppContext } from '../App'
import Modal from '../components/Modal'
import { SkeletonCard } from '../components/SkeletonLoader'

const API_BASE = '/api'

const EMPTY_BRAND = { name: '', name_ar: '', priority: 2, icon: '' }

export default function Brands() {
  const { t, lang } = useLanguage()
  const { user } = useAuth()
  const { getBrandName } = useContext(AppContext)
  const isSuperadminOrManager = user?.role === 'superadmin' || user?.role === 'manager'

  const [brands, setBrands] = useState([])
  const [loading, setLoading] = useState(true)
  const [showModal, setShowModal] = useState(false)
  const [editingBrand, setEditingBrand] = useState(null)
  const [brandForm, setBrandForm] = useState(EMPTY_BRAND)
  const [showDeleteModal, setShowDeleteModal] = useState(false)
  const [brandToDelete, setBrandToDelete] = useState(null)
  const [uploading, setUploading] = useState(false)
  const fileInputRef = useRef(null)

  useEffect(() => {
    loadBrands()
  }, [])

  const loadBrands = async () => {
    try {
      const data = await api.get('/brands')
      setBrands(Array.isArray(data) ? data : [])
    } catch (err) {
      console.error('Failed to load brands:', err)
    } finally {
      setLoading(false)
    }
  }

  const openNewBrand = () => {
    setEditingBrand(null)
    setBrandForm(EMPTY_BRAND)
    setShowModal(true)
  }

  const openEditBrand = (brand) => {
    setEditingBrand(brand)
    setBrandForm({
      name: brand.name || '',
      name_ar: brand.name_ar || '',
      priority: brand.priority ?? 2,
      icon: brand.icon || '',
    })
    setShowModal(true)
  }

  const saveBrand = async () => {
    try {
      const data = {
        name: brandForm.name,
        name_ar: brandForm.name_ar || null,
        priority: brandForm.priority ? Number(brandForm.priority) : 2,
        icon: brandForm.icon || null,
      }
      if (editingBrand) {
        await api.patch(`/brands/${editingBrand.Id || editingBrand._id || editingBrand.id}`, data)
      } else {
        await api.post('/brands', data)
      }
      setShowModal(false)
      setEditingBrand(null)
      loadBrands()
    } catch (err) {
      console.error('Failed to save brand:', err)
    }
  }

  const confirmDelete = async () => {
    if (!brandToDelete) return
    try {
      await api.delete(`/brands/${brandToDelete.Id || brandToDelete._id || brandToDelete.id}`)
      setBrandToDelete(null)
      setShowDeleteModal(false)
      loadBrands()
    } catch (err) {
      console.error('Failed to delete brand:', err)
    }
  }

  const handleLogoUpload = async (brand, file) => {
    const brandId = brand.Id || brand._id || brand.id
    setUploading(true)
    try {
      const formData = new FormData()
      formData.append('file', file)
      const res = await fetch(`${API_BASE}/brands/${brandId}/logo`, {
        method: 'POST',
        body: formData,
        credentials: 'include',
      })
      if (!res.ok) throw new Error('Upload failed')
      loadBrands()
    } catch (err) {
      console.error('Failed to upload logo:', err)
    } finally {
      setUploading(false)
    }
  }

  const getBrandId = (brand) => brand.Id || brand._id || brand.id

  if (loading) {
    return (
      <div className="space-y-6">
        <div className="h-12 bg-surface-tertiary rounded-xl animate-pulse"></div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {[...Array(3)].map((_, i) => <SkeletonCard key={i} />)}
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-6 animate-fade-in">
      {/* Header */}
      <div className="flex items-center justify-between">
        <p className="text-sm text-text-tertiary">{t('brands.manageBrands')}</p>
        {isSuperadminOrManager && (
          <button
            onClick={openNewBrand}
            className="flex items-center gap-2 px-4 py-2.5 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm transition-colors"
          >
            <Plus className="w-4 h-4" />
            {t('brands.addBrand')}
          </button>
        )}
      </div>

      {/* Brand Cards Grid */}
      {brands.length === 0 ? (
        <div className="bg-white rounded-xl border border-border py-16 text-center">
          <Tag className="w-12 h-12 text-text-quaternary mx-auto mb-3" />
          <p className="text-sm text-text-tertiary">{t('brands.noBrands')}</p>
        </div>
      ) : (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 stagger-children">
          {brands.map(brand => {
            const displayName = lang === 'ar' && brand.name_ar ? brand.name_ar : brand.name
            return (
              <div
                key={getBrandId(brand)}
                className={`bg-white rounded-xl border border-border overflow-hidden hover:shadow-md transition-all aspect-square flex flex-col ${isSuperadminOrManager ? 'cursor-pointer' : ''}`}
                onClick={() => isSuperadminOrManager && openEditBrand(brand)}
              >
                {/* Logo area */}
                <div className="flex-1 bg-surface-secondary flex items-center justify-center relative min-h-0">
                  {brand.logo ? (
                    <img
                      src={`${API_BASE}/uploads/${brand.logo}`}
                      alt={displayName}
                      className="w-full h-full object-contain p-4"
                    />
                  ) : (
                    <div className="text-3xl">
                      {brand.icon || <Image className="w-10 h-10 text-text-quaternary" />}
                    </div>
                  )}
                  {isSuperadminOrManager && (
                    <div className="absolute top-1.5 right-1.5 flex gap-1 opacity-0 group-hover:opacity-100" onClick={e => e.stopPropagation()}>
                      <button
                        onClick={() => openEditBrand(brand)}
                        className="p-1 bg-white/90 hover:bg-white rounded-md text-text-tertiary hover:text-text-primary shadow-sm"
                        title={t('common.edit')}
                      >
                        <Edit2 className="w-3 h-3" />
                      </button>
                      <button
                        onClick={() => { setBrandToDelete(brand); setShowDeleteModal(true) }}
                        className="p-1 bg-white/90 hover:bg-white rounded-md text-text-tertiary hover:text-red-500 shadow-sm"
                        title={t('common.delete')}
                      >
                        <Trash2 className="w-3 h-3" />
                      </button>
                    </div>
                  )}
                </div>

                {/* Card body */}
                <div className="p-3">
                  <div className="flex items-center gap-1.5 mb-0.5">
                    {brand.icon && <span className="text-sm">{brand.icon}</span>}
                    <h3 className="text-xs font-semibold text-text-primary truncate">{displayName}</h3>
                  </div>
                  <p className="text-[10px] text-text-tertiary truncate">
                    {brand.name_ar && lang !== 'ar' ? brand.name_ar : brand.name}
                  </p>
                </div>
              </div>
            )
          })}
        </div>
      )}

      {/* Create/Edit Modal */}
      <Modal
        isOpen={showModal}
        onClose={() => { setShowModal(false); setEditingBrand(null) }}
        title={editingBrand ? t('brands.editBrand') : t('brands.addBrand')}
      >
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandName')} *</label>
            <input
              type="text"
              value={brandForm.name}
              onChange={e => setBrandForm(f => ({ ...f, name: e.target.value }))}
              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
              placeholder="Brand name in English"
              dir="ltr"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandNameAr')}</label>
            <input
              type="text"
              value={brandForm.name_ar}
              onChange={e => setBrandForm(f => ({ ...f, name_ar: e.target.value }))}
              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
              placeholder="اسم العلامة بالعربي"
              dir="rtl"
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandPriority')}</label>
              <input
                type="number"
                value={brandForm.priority}
                onChange={e => setBrandForm(f => ({ ...f, priority: e.target.value }))}
                min="1"
                max="10"
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandIcon')}</label>
              <input
                type="text"
                value={brandForm.icon}
                onChange={e => setBrandForm(f => ({ ...f, icon: e.target.value }))}
                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
                placeholder="emoji"
              />
            </div>
          </div>

          {/* Logo upload — only for existing brands */}
          {editingBrand && (
            <div>
              <label className="block text-sm font-medium text-text-primary mb-1">{t('brands.logo')}</label>
              {editingBrand.logo && (
                <div className="mb-2 p-2 bg-surface-secondary rounded-lg inline-block">
                  <img
                    src={`${API_BASE}/uploads/${editingBrand.logo}`}
                    alt="Logo"
                    className="h-16 object-contain"
                  />
                </div>
              )}
              <div className="flex items-center gap-2">
                <input
                  ref={fileInputRef}
                  type="file"
                  accept="image/*"
                  className="hidden"
                  onChange={e => {
                    const file = e.target.files?.[0]
                    if (file) handleLogoUpload(editingBrand, file)
                    e.target.value = ''
                  }}
                />
                <button
                  type="button"
                  onClick={() => fileInputRef.current?.click()}
                  disabled={uploading}
                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border border-border rounded-lg hover:bg-surface-secondary transition-colors disabled:opacity-50"
                >
                  <Upload className="w-3.5 h-3.5" />
                  {uploading ? t('common.loading') : editingBrand.logo ? t('brands.changeLogo') : t('brands.uploadLogo')}
                </button>
              </div>
            </div>
          )}

          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
            <button
              onClick={() => { setShowModal(false); setEditingBrand(null) }}
              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
            >
              {t('common.cancel')}
            </button>
            <button
              onClick={saveBrand}
              disabled={!brandForm.name}
              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
            >
              {t('common.save')}
            </button>
          </div>
        </div>
      </Modal>

      {/* Delete Confirmation */}
      <Modal
        isOpen={showDeleteModal}
        onClose={() => { setShowDeleteModal(false); setBrandToDelete(null) }}
        title={t('brands.deleteBrand')}
        isConfirm
        danger
        confirmText={t('common.delete')}
        onConfirm={confirmDelete}
      >
        {t('brands.deleteBrandConfirm')}
      </Modal>
    </div>
  )
}