'use client'

import { useEffect, useState, useCallback } from 'react'
import { Pencil, X, Loader2 } from 'lucide-react'
import toast from 'react-hot-toast'
import { SUBSCRIPTION_STATUSES } from '@/lib/constants'
import Pagination from '@/components/Pagination'

function formatCurrency(amount: number | string): string {
  const num = typeof amount === 'string' ? parseFloat(amount) : amount
  return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(num)
}

interface Subscription {
  id: string
  status: string
  billingCycle: string
  amount: number
  startDate: string
  endDate: string
  createdAt: string
  tenant: { id: string; name: string; slug: string }
  plan: { id: string; name: string; slug: string }
}

interface Plan {
  id: string
  name: string
  price: number
  yearlyPrice: number
}

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

export default function SubscriptionsPage() {
  const [subscriptions, setSubscriptions] = useState<Subscription[]>([])
  const [pagination, setPagination] = useState<Pagination>({ page: 1, limit: 20, total: 0, totalPages: 0 })
  const [loading, setLoading] = useState(true)
  const [statusFilter, setStatusFilter] = useState('')
  const [plans, setPlans] = useState<Plan[]>([])
  const [showModal, setShowModal] = useState(false)
  const [editing, setEditing] = useState<Subscription | null>(null)
  const [saving, setSaving] = useState(false)
  const [form, setForm] = useState({
    planId: '',
    status: '',
    endDate: '',
    billingCycle: '',
    amount: 0,
  })

  const fetchSubscriptions = useCallback(async (page = 1) => {
    setLoading(true)
    try {
      const params = new URLSearchParams()
      params.set('page', String(page))
      if (statusFilter) params.set('status', statusFilter)
      const res = await fetch(`/api/superadmin/subscriptions?${params.toString()}`)
      const data = await res.json()
      setSubscriptions(data.subscriptions || [])
      setPagination(data.pagination || { page: 1, limit: 20, total: 0, totalPages: 0 })
    } catch (err) {
      toast.error('Gagal memuat data langganan')
    } finally {
      setLoading(false)
    }
  }, [statusFilter])

  const fetchPlans = async () => {
    try {
      const res = await fetch('/api/superadmin/plans')
      const data = await res.json()
      setPlans(data.plans || [])
    } catch (err) {
      console.error('Failed to load plans')
    }
  }

  useEffect(() => { fetchSubscriptions(1) }, [fetchSubscriptions])
  useEffect(() => { fetchPlans() }, [])

  const openEdit = (sub: Subscription) => {
    setEditing(sub)
    setForm({
      planId: sub.plan.id,
      status: sub.status,
      endDate: sub.endDate ? new Date(sub.endDate).toISOString().split('T')[0] : '',
      billingCycle: sub.billingCycle,
      amount: sub.amount,
    })
    setShowModal(true)
  }

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!editing) return
    setSaving(true)
    try {
      const res = await fetch(`/api/superadmin/subscriptions/${editing.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      if (!res.ok) {
        const data = await res.json()
        throw new Error(data.error)
      }
      toast.success('Langganan berhasil diupdate')
      setShowModal(false)
      setEditing(null)
      fetchSubscriptions(pagination.page)
    } catch (err: any) {
      toast.error(err.message || 'Gagal mengupdate langganan')
    } finally {
      setSaving(false)
    }
  }

  if (loading && subscriptions.length === 0) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
      </div>
    )
  }

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900">Manajemen Langganan</h1>
        <p className="text-gray-600 mt-1">Kelola langganan tenant di platform.</p>
      </div>

      {/* Status Filter */}
      <div className="card mb-6">
        <div className="flex items-center gap-3">
          <label className="text-sm font-medium text-gray-700">Filter Status:</label>
          <select
            className="input-field w-48"
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
          >
            <option value="">Semua</option>
            {Object.entries(SUBSCRIPTION_STATUSES).map(([key, val]) => (
              <option key={key} value={key}>{val.label}</option>
            ))}
          </select>
        </div>
      </div>

      {/* Table */}
      <div className="card">
        {subscriptions.length === 0 ? (
          <p className="text-gray-500 text-center py-8">Tidak ada langganan ditemukan</p>
        ) : (
          <>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="text-left py-3 px-3 font-medium text-gray-600">Tenant</th>
                    <th className="text-left py-3 px-3 font-medium text-gray-600">Paket</th>
                    <th className="text-left py-3 px-3 font-medium text-gray-600">Status</th>
                    <th className="text-left py-3 px-3 font-medium text-gray-600">Siklus Bayar</th>
                    <th className="text-left py-3 px-3 font-medium text-gray-600">Jumlah</th>
                    <th className="text-left py-3 px-3 font-medium text-gray-600">Mulai</th>
                    <th className="text-left py-3 px-3 font-medium text-gray-600">Berakhir</th>
                    <th className="text-left py-3 px-3 font-medium text-gray-600">Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  {subscriptions.map((sub) => {
                    const statusInfo = SUBSCRIPTION_STATUSES[sub.status]
                    return (
                      <tr key={sub.id} className="border-b border-gray-100 hover:bg-gray-50">
                        <td className="py-3 px-3 font-medium text-gray-900">{sub.tenant.name}</td>
                        <td className="py-3 px-3">
                          <span className="badge bg-indigo-100 text-indigo-800">{sub.plan.name}</span>
                        </td>
                        <td className="py-3 px-3">
                          <span className={`badge ${statusInfo?.color || 'bg-gray-100 text-gray-800'}`}>
                            {statusInfo?.label || sub.status}
                          </span>
                        </td>
                        <td className="py-3 px-3 text-gray-700">
                          {sub.billingCycle === 'monthly' ? 'Bulanan' : sub.billingCycle === 'yearly' ? 'Tahunan' : sub.billingCycle}
                        </td>
                        <td className="py-3 px-3 font-medium text-gray-900">{formatCurrency(sub.amount)}</td>
                        <td className="py-3 px-3 text-gray-500">
                          {sub.startDate
                            ? new Date(sub.startDate).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })
                            : '-'}
                        </td>
                        <td className="py-3 px-3 text-gray-500">
                          {sub.endDate
                            ? new Date(sub.endDate).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' })
                            : '-'}
                        </td>
                        <td className="py-3 px-3">
                          <button
                            onClick={() => openEdit(sub)}
                            className="btn-ghost text-xs p-1.5"
                            title="Edit Langganan"
                          >
                            <Pencil className="w-4 h-4" />
                          </button>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>

            <Pagination pagination={pagination} onPageChange={(page) => fetchSubscriptions(page)} itemLabel="langganan" />
          </>
        )}
      </div>

      {/* Edit Modal */}
      {showModal && editing && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="bg-white rounded-xl w-full max-w-md p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold">Edit Langganan</h3>
              <button onClick={() => setShowModal(false)}>
                <X className="w-5 h-5 text-gray-400" />
              </button>
            </div>
            <p className="text-sm text-gray-500 mb-4">
              Tenant: <span className="font-medium text-gray-900">{editing.tenant.name}</span>
            </p>
            <form onSubmit={handleSave} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Paket</label>
                <select
                  className="input-field"
                  value={form.planId}
                  onChange={(e) => setForm({ ...form, planId: e.target.value })}
                >
                  {plans.map((plan) => (
                    <option key={plan.id} value={plan.id}>{plan.name}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <select
                  className="input-field"
                  value={form.status}
                  onChange={(e) => setForm({ ...form, status: e.target.value })}
                >
                  {Object.entries(SUBSCRIPTION_STATUSES).map(([key, val]) => (
                    <option key={key} value={key}>{val.label}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Siklus Bayar</label>
                <select
                  className="input-field"
                  value={form.billingCycle}
                  onChange={(e) => setForm({ ...form, billingCycle: e.target.value })}
                >
                  <option value="monthly">Bulanan</option>
                  <option value="yearly">Tahunan</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Jumlah (IDR)</label>
                <input
                  type="number"
                  className="input-field"
                  value={form.amount}
                  onChange={(e) => setForm({ ...form, amount: Number(e.target.value) })}
                  min={0}
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Tanggal Berakhir</label>
                <input
                  type="date"
                  className="input-field"
                  value={form.endDate}
                  onChange={(e) => setForm({ ...form, endDate: e.target.value })}
                />
              </div>
              <div className="flex gap-2 justify-end pt-2">
                <button type="button" onClick={() => setShowModal(false)} className="btn-secondary">
                  Batal
                </button>
                <button type="submit" disabled={saving} className="btn-primary flex items-center gap-2">
                  {saving && <Loader2 className="w-4 h-4 animate-spin" />}
                  {saving ? 'Menyimpan...' : 'Simpan'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  )
}