'use client'
import { useState, useEffect, useCallback } from 'react'
import {
  Plus, Search, RefreshCw, Eye, Edit2, Trash2, Star,
  ToggleLeft, ToggleRight, ChevronLeft, ChevronRight, X, Check
} from 'lucide-react'
import ServiceForm from '@/components/ServiceForm/ServiceForm'
import { formatRupiah, formatDuration } from '@/lib/utils'
import styles from './page.module.css'

interface ServiceFormData {
  id: string
  name: string
  slug: string
  category: string
  description: string
  longDescription: string
  imageUrl: string
  thumbnailUrl: string
  duration: string
  price: string
  dpAmount: string
  isActive: boolean
  isFeatured: boolean
  sortOrder: string
  benefits: string[]
  inclusions: string[]
  contraindications: string[]
}

interface Service {
  id: string
  name: string
  slug: string
  category: string
  description: string
  longDescription?: string
  imageUrl?: string
  thumbnailUrl?: string
  duration: number
  price: number
  dpAmount?: number
  isActive: boolean
  isFeatured: boolean
  sortOrder: number
  benefits: string | string[]
  inclusions: string | string[]
  contraindications: string | string[]
  createdAt: string
  updatedAt: string
  _count: { bookingItems: number }
}

interface PaginationInfo {
  page: number
  limit: number
  total: number
  totalPages: number
}

const CATEGORY_LABEL: Record<string, string> = {
  SPA_PACKAGE: 'SPA Package',
  BODY_FACE_TREATMENT: 'Body & Face',
  HAIR_TREATMENT: 'Hair Treatment',
  MOM_BABY_TREATMENT: 'Mom & Baby',
  WEDDING_PACKAGE: 'Wedding',
  ADD_ON: 'Add-On',
}

export default function ServicesPage() {
  const [services, setServices] = useState<Service[]>([])
  const [pagination, setPagination] = useState<PaginationInfo>({ page: 1, limit: 20, total: 0, totalPages: 0 })
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Filters
  const [search, setSearch] = useState('')
  const [category, setCategory] = useState('')
  const [isActive, setIsActive] = useState<string>('')
  const [isFeatured, setIsFeatured] = useState<string>('')

  // Modal states
  const [showForm, setShowForm] = useState(false)
  const [editService, setEditService] = useState<ServiceFormData | null>(null)
  const [viewService, setViewService] = useState<Service | null>(null)
  const [deleteService, setDeleteService] = useState<Service | null>(null)
  const [deleting, setDeleting] = useState(false)

  // Fetch services
  const fetchServices = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const params = new URLSearchParams()
      if (search) params.set('search', search)
      if (category) params.set('category', category)
      if (isActive) params.set('isActive', isActive)
      if (isFeatured) params.set('isFeatured', isFeatured)
      params.set('page', String(pagination.page))
      params.set('limit', '20')
      params.set('sortBy', 'sortOrder')
      params.set('sortOrder', 'asc')

      const res = await fetch(`/api/admin/services?${params}`)
      if (!res.ok) throw new Error(`HTTP ${res.status}`)

      const data = await res.json()
      setServices(data.services || [])
      setPagination(data.pagination || pagination)
    } catch (err) {
      setError('Gagal memuat layanan')
      console.error(err)
    } finally {
      setLoading(false)
    }
  }, [search, category, isActive, isFeatured, pagination.page])

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

  // Debounced search
  useEffect(() => {
    const timer = setTimeout(() => {
      if (pagination.page !== 1) {
        setPagination(p => ({ ...p, page: 1 }))
      } else {
        fetchServices()
      }
    }, 300)
    return () => clearTimeout(timer)
  }, [search, category, isActive, isFeatured])

  // Toggle active status
  async function toggleActive(service: Service) {
    try {
      const res = await fetch(`/api/admin/services/${service.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ isActive: !service.isActive }),
      })
      if (res.ok) {
        fetchServices()
      }
    } catch (err) {
      console.error(err)
    }
  }

  // Toggle featured status
  async function toggleFeatured(service: Service) {
    try {
      const res = await fetch(`/api/admin/services/${service.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ isFeatured: !service.isFeatured }),
      })
      if (res.ok) {
        fetchServices()
      }
    } catch (err) {
      console.error(err)
    }
  }

  // Delete service
  async function handleDelete() {
    if (!deleteService) return
    setDeleting(true)
    try {
      const res = await fetch(`/api/admin/services/${deleteService.id}?hard=false`, {
        method: 'DELETE',
      })
      const data = await res.json()
      if (res.ok || data.success) {
        fetchServices()
        setDeleteService(null)
      } else {
        alert(data.message || 'Gagal menghapus layanan')
      }
    } catch (err) {
      console.error(err)
      alert('Terjadi kesalahan')
    } finally {
      setDeleting(false)
    }
  }

  // Parse JSON fields
  function parseJsonField(field: string | string[]): string[] {
    if (Array.isArray(field)) return field
    try {
      return JSON.parse(field)
    } catch {
      return []
    }
  }

  function handleEdit(service: Service) {
    setEditService({
      id: service.id,
      name: service.name,
      slug: service.slug,
      category: service.category,
      description: service.description,
      longDescription: service.longDescription ?? '',
      imageUrl: service.imageUrl ?? '',
      thumbnailUrl: service.thumbnailUrl ?? '',
      duration: String(service.duration),
      price: String(service.price),
      dpAmount: service.dpAmount != null ? String(service.dpAmount) : '',
      isActive: service.isActive,
      isFeatured: service.isFeatured,
      sortOrder: String(service.sortOrder),
      benefits: parseJsonField(service.benefits),
      inclusions: parseJsonField(service.inclusions),
      contraindications: parseJsonField(service.contraindications),
    })
    setShowForm(true)
  }

  function handleAdd() {
    setEditService(null)
    setShowForm(true)
  }

  function handleView(service: Service) {
    setViewService(service)
  }

  return (
    <div className={styles.page}>
      {/* Header */}
      <div className={styles.topBar}>
        <div>
          <h1 className={styles.pageTitle}>Manajemen Layanan</h1>
          <p className={styles.pageSub}>
            {pagination.total} layanan terdaftar
            {loading && ' • Memuat...'}
          </p>
        </div>
        <div className={styles.topRight}>
          <button className={styles.refreshBtn} onClick={fetchServices} title="Refresh data">
            <RefreshCw size={16} className={loading ? styles.spinning : ''} />
          </button>
          <button className="btn btn-primary" onClick={handleAdd}>
            <Plus size={18} /> Tambah Layanan
          </button>
        </div>
      </div>

      {/* Filters */}
      <div className={styles.filterBar}>
        <div className={styles.searchBox}>
          <Search size={18} className={styles.searchIcon} />
          <input
            type="text"
            className={styles.searchInput}
            placeholder="Cari layanan..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
          {search && (
            <button className={styles.clearSearch} onClick={() => setSearch('')}>
              <X size={16} />
            </button>
          )}
        </div>

        <select
          className={styles.filterSelect}
          value={category}
          onChange={(e) => setCategory(e.target.value)}
        >
          <option value="">Semua Kategori</option>
          {Object.entries(CATEGORY_LABEL).map(([k, v]) => (
            <option key={k} value={k}>{v}</option>
          ))}
        </select>

        <select
          className={styles.filterSelect}
          value={isActive}
          onChange={(e) => setIsActive(e.target.value)}
        >
          <option value="">Semua Status</option>
          <option value="true">Aktif</option>
          <option value="false">Nonaktif</option>
        </select>

        <select
          className={styles.filterSelect}
          value={isFeatured}
          onChange={(e) => setIsFeatured(e.target.value)}
        >
          <option value="">Semua</option>
          <option value="true">Featured</option>
          <option value="false">Non-Featured</option>
        </select>
      </div>

      {/* Error */}
      {error && (
        <div className={styles.errorBanner}>
          <span>⚠️</span> {error}
          <button onClick={fetchServices}>Coba Lagi</button>
        </div>
      )}

      {/* Table */}
      <div className="table-wrapper">
        <div className="table-scroll">
          <table className="table">
            <thead>
              <tr>
                <th>#</th>
                <th>Layanan</th>
                <th>Kategori</th>
                <th>Durasi</th>
                <th>Harga</th>
                <th>Dipesan</th>
                <th>Featured</th>
                <th>Status</th>
                <th>Aksi</th>
              </tr>
            </thead>
            <tbody>
              {loading && services.length === 0 ? (
                <tr>
                  <td colSpan={9} className={styles.loadingCell}>Memuat...</td>
                </tr>
              ) : services.length === 0 ? (
                <tr>
                  <td colSpan={9} className={styles.emptyCell}>
                    <div className={styles.emptyState}>
                      <span className={styles.emptyIcon}>📋</span>
                      <p>Belum ada layanan ditemukan</p>
                      <button className="btn btn-ghost btn-sm" onClick={handleAdd}>
                        <Plus size={16} /> Tambah Layanan Pertama
                      </button>
                    </div>
                  </td>
                </tr>
              ) : (
                services.map((service, index) => (
                  <tr key={service.id} className={!service.isActive ? styles.rowInactive : ''}>
                    <td>{(pagination.page - 1) * pagination.limit + index + 1}</td>
                    <td className="td-primary">{service.name}</td>
                    <td>
                      <span className={styles.categoryBadge}>
                        {CATEGORY_LABEL[service.category] || service.category}
                      </span>
                    </td>
                    <td>{formatDuration(service.duration)}</td>
                    <td className={styles.priceCell}>{formatRupiah(Number(service.price))}</td>
                    <td>
                      <span className={styles.countBadge}>
                        {service._count.bookingItems}x
                      </span>
                    </td>
                    <td>
                      <button
                        className={styles.featureBtn}
                        onClick={() => toggleFeatured(service)}
                        title={service.isFeatured ? 'Hapus dari featured' : 'Tambahkan ke featured'}
                      >
                        {service.isFeatured ? (
                          <Star size={18} className={styles.featured} fill="currentColor" />
                        ) : (
                          <Star size={18} className={styles.notFeatured} />
                        )}
                      </button>
                    </td>
                    <td>
                      <button
                        className={styles.toggleBtn}
                        onClick={() => toggleActive(service)}
                        title={service.isActive ? 'Nonaktifkan' : 'Aktifkan'}
                      >
                        {service.isActive ? (
                          <ToggleRight size={24} className={styles.activeToggle} />
                        ) : (
                          <ToggleLeft size={24} className={styles.inactiveToggle} />
                        )}
                      </button>
                    </td>
                    <td>
                      <div className={styles.actionBtns}>
                        <button
                          className={styles.actionBtn}
                          onClick={() => handleView(service)}
                          title="Lihat Detail"
                        >
                          <Eye size={16} />
                        </button>
                        <button
                          className={styles.actionBtn}
                          onClick={() => handleEdit(service)}
                          title="Edit"
                        >
                          <Edit2 size={16} />
                        </button>
                        <button
                          className={`${styles.actionBtn} ${styles.deleteBtn}`}
                          onClick={() => setDeleteService(service)}
                          title="Hapus"
                        >
                          <Trash2 size={16} />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Pagination */}
      {pagination.totalPages > 1 && (
        <div className={styles.pagination}>
          <span className={styles.paginationInfo}>
            Halaman {pagination.page} dari {pagination.totalPages}
            {' • '}
            {pagination.total} total
          </span>
          <div className={styles.paginationBtns}>
            <button
              className={styles.pageBtn}
              disabled={pagination.page <= 1}
              onClick={() => setPagination(p => ({ ...p, page: p.page - 1 }))}
            >
              <ChevronLeft size={18} /> Prev
            </button>
            <button
              className={styles.pageBtn}
              disabled={pagination.page >= pagination.totalPages}
              onClick={() => setPagination(p => ({ ...p, page: p.page + 1 }))}
            >
              Next <ChevronRight size={18} />
            </button>
          </div>
        </div>
      )}

      {/* Add/Edit Form Modal */}
      <ServiceForm
        isOpen={showForm}
        onClose={() => setShowForm(false)}
        onSuccess={fetchServices}
        service={editService}
      />

      {/* View Detail Modal */}
      {viewService && (
        <div className={styles.modalOverlay} onClick={(e) => e.target === e.currentTarget && setViewService(null)}>
          <div className={styles.detailModal}>
            <div className={styles.modalHeader}>
              <h2>Detail Layanan</h2>
              <button className={styles.modalClose} onClick={() => setViewService(null)}>✕</button>
            </div>
            <div className={styles.modalBody}>
              <div className={styles.detailHeader}>
                <div>
                  <h3 className={styles.detailTitle}>{viewService.name}</h3>
                  <span className={styles.categoryBadge}>
                    {CATEGORY_LABEL[viewService.category] || viewService.category}
                  </span>
                </div>
                <div className={styles.detailBadges}>
                  {viewService.isActive ? (
                    <span className="badge badge-confirmed">Aktif</span>
                  ) : (
                    <span className="badge badge-cancelled">Nonaktif</span>
                  )}
                  {viewService.isFeatured && (
                    <span className="badge badge-confirmed">⭐ Featured</span>
                  )}
                </div>
              </div>

              {viewService.imageUrl && (
                <div className={styles.detailImage}>
                  <img src={viewService.imageUrl} alt={viewService.name} />
                </div>
              )}

              <div className={styles.detailGrid}>
                <div className={styles.detailItem}>
                  <label>Harga</label>
                  <span className={styles.priceValue}>{formatRupiah(Number(viewService.price))}</span>
                </div>
                {viewService.dpAmount && (
                  <div className={styles.detailItem}>
                    <label>DP</label>
                    <span>{formatRupiah(Number(viewService.dpAmount))}</span>
                  </div>
                )}
                <div className={styles.detailItem}>
                  <label>Durasi</label>
                  <span>{formatDuration(viewService.duration)}</span>
                </div>
                <div className={styles.detailItem}>
                  <label>Dipesan</label>
                  <span>{viewService._count.bookingItems}x</span>
                </div>
                <div className={styles.detailItem}>
                  <label>Slug</label>
                  <code className={styles.slugCode}>{viewService.slug}</code>
                </div>
                <div className={styles.detailItem}>
                  <label>Urutan</label>
                  <span>{viewService.sortOrder}</span>
                </div>
              </div>

              <div className={styles.detailSection}>
                <label>Deskripsi</label>
                <p>{viewService.description}</p>
              </div>

              {viewService.longDescription && (
                <div className={styles.detailSection}>
                  <label>Deskripsi Lengkap</label>
                  <p>{viewService.longDescription}</p>
                </div>
              )}

              {parseJsonField(viewService.benefits).length > 0 && (
                <div className={styles.detailSection}>
                  <label>Benefit / Keunggulan</label>
                  <ul className={styles.tagList}>
                    {parseJsonField(viewService.benefits).map((b, i) => (
                      <li key={i}><Check size={14} /> {b}</li>
                    ))}
                  </ul>
                </div>
              )}

              {parseJsonField(viewService.inclusions).length > 0 && (
                <div className={styles.detailSection}>
                  <label>Yang Termasuk</label>
                  <ul className={styles.tagList}>
                    {parseJsonField(viewService.inclusions).map((item, i) => (
                      <li key={i}><Check size={14} /> {item}</li>
                    ))}
                  </ul>
                </div>
              )}

              {parseJsonField(viewService.contraindications).length > 0 && (
                <div className={styles.detailSection}>
                  <label>Kontraindikasi</label>
                  <ul className={styles.tagList}>
                    {parseJsonField(viewService.contraindications).map((item, i) => (
                      <li key={i}><Check size={14} /> {item}</li>
                    ))}
                  </ul>
                </div>
              )}

              <div className={styles.detailMeta}>
                <span>Dibuat: {new Date(viewService.createdAt).toLocaleDateString('id-ID')}</span>
                <span>Diubah: {new Date(viewService.updatedAt).toLocaleDateString('id-ID')}</span>
              </div>
            </div>
            <div className={styles.modalFooter}>
              <button className="btn btn-ghost" onClick={() => setViewService(null)}>Tutup</button>
              <button className="btn btn-primary" onClick={() => { setViewService(null); handleEdit(viewService) }}>
                <Edit2 size={16} /> Edit Layanan
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Delete Confirmation */}
      {deleteService && (
        <div className={styles.modalOverlay} onClick={(e) => e.target === e.currentTarget && setDeleteService(null)}>
          <div className={styles.confirmModal}>
            <div className={styles.modalHeader}>
              <h2>Konfirmasi Hapus</h2>
              <button className={styles.modalClose} onClick={() => setDeleteService(null)}>✕</button>
            </div>
            <div className={styles.modalBody}>
              <div className={styles.confirmIcon}>⚠️</div>
              <p className={styles.confirmText}>
                Anda yakin ingin menghapus layanan <strong>{deleteService.name}</strong>?
              </p>
              {deleteService._count.bookingItems > 0 && (
                <p className={styles.warningText}>
                  Layanan ini memiliki {deleteService._count.bookingItems} booking. Layanan akan dinonaktifkan bukan dihapus permanen.
                </p>
              )}
            </div>
            <div className={styles.modalFooter}>
              <button className="btn btn-ghost" onClick={() => setDeleteService(null)} disabled={deleting}>
                Batal
              </button>
              <button className="btn btn-danger" onClick={handleDelete} disabled={deleting}>
                {deleting ? 'Menghapus...' : 'Ya, Hapus'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}