'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { getAdminPath } from '@/lib/admin-path'
import { formatCurrency } from '@/lib/utils'
import { UserPlus, Users, DollarSign, Search, Loader2, Eye, Check, X } from 'lucide-react'
import toast from 'react-hot-toast'

const basePath = '/' + getAdminPath()

export default function SuperAdminAffiliatesPage() {
  const [affiliates, setAffiliates] = useState<any[]>([])
  const [stats, setStats] = useState<any>({})
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [filter, setFilter] = useState('')
  const [showCreate, setShowCreate] = useState(false)
  const [creating, setCreating] = useState(false)
  const [createForm, setCreateForm] = useState({
    name: '', email: '', password: '', phone: '', bankName: '', bankAccount: '', bankHolder: '', isActive: true,
  })

  const loadData = () => {
    const params = new URLSearchParams()
    if (search) params.set('search', search)
    if (filter) params.set('status', filter)
    fetch(`/api/superadmin/affiliates?${params}`)
      .then(r => r.json())
      .then(data => {
        setAffiliates(data.affiliates || [])
        setStats(data.stats || {})
      })
      .catch(console.error)
      .finally(() => setLoading(false))
  }

  useEffect(() => { loadData() }, [search, filter])

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault()
    setCreating(true)
    try {
      const res = await fetch('/api/superadmin/affiliates', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(createForm),
      })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error)
      toast.success('Affiliate berhasil dibuat')
      setShowCreate(false)
      setCreateForm({ name: '', email: '', password: '', phone: '', bankName: '', bankAccount: '', bankHolder: '', isActive: true })
      loadData()
    } catch (err: any) {
      toast.error(err.message || 'Gagal membuat affiliate')
    } finally {
      setCreating(false)
    }
  }

  const handleApprove = async (id: string) => {
    try {
      const res = await fetch(`/api/superadmin/affiliates/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ isActive: true }),
      })
      if (!res.ok) throw new Error('Failed')
      toast.success('Affiliate disetujui')
      loadData()
    } catch {
      toast.error('Gagal menyetujui')
    }
  }

  if (loading) {
    return <div className="flex justify-center py-12"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div></div>
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Manajemen Afiliasi</h1>
        <button onClick={() => setShowCreate(true)} className="btn-primary flex items-center gap-2">
          <UserPlus className="w-4 h-4" /> Tambah Affiliate
        </button>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="card">
          <p className="text-sm text-gray-500">Total Affiliate</p>
          <p className="text-2xl font-bold text-gray-900">{stats.totalAffiliates || 0}</p>
        </div>
        <div className="card">
          <p className="text-sm text-gray-500">Aktif</p>
          <p className="text-2xl font-bold text-green-600">{stats.activeAffiliates || 0}</p>
        </div>
        <div className="card">
          <p className="text-sm text-gray-500">Menunggu Approval</p>
          <p className="text-2xl font-bold text-yellow-600">{stats.pendingAffiliates || 0}</p>
        </div>
        <div className="card">
          <p className="text-sm text-gray-500">Total Komisi Dibayar</p>
          <p className="text-2xl font-bold text-indigo-600">{formatCurrency(stats.totalCommission || 0)}</p>
        </div>
      </div>

      {/* Filters */}
      <div className="flex flex-col sm:flex-row gap-3">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input type="text" className="input-field pl-9" placeholder="Cari nama, email, atau kode..."
            value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <select className="input-field w-auto" value={filter} onChange={e => setFilter(e.target.value)}>
          <option value="">Semua Status</option>
          <option value="active">Aktif</option>
          <option value="pending">Menunggu Approval</option>
        </select>
      </div>

      {/* Table */}
      <div className="card overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-200 bg-gray-50">
                <th className="text-left py-3 px-4 font-medium text-gray-500">Nama</th>
                <th className="text-left py-3 px-4 font-medium text-gray-500">Email</th>
                <th className="text-left py-3 px-4 font-medium text-gray-500">Kode</th>
                <th className="text-center py-3 px-4 font-medium text-gray-500">Referral</th>
                <th className="text-center py-3 px-4 font-medium text-gray-500">Status</th>
                <th className="text-right py-3 px-4 font-medium text-gray-500">Aksi</th>
              </tr>
            </thead>
            <tbody>
              {affiliates.map((a: any) => (
                <tr key={a.id} className="border-b border-gray-100 hover:bg-gray-50">
                  <td className="py-3 px-4 font-medium text-gray-900">{a.name}</td>
                  <td className="py-3 px-4 text-gray-600">{a.email}</td>
                  <td className="py-3 px-4"><code className="text-xs bg-gray-100 px-2 py-1 rounded">{a.referralCode}</code></td>
                  <td className="py-3 px-4 text-center text-gray-600">{a.totalReferrals}</td>
                  <td className="py-3 px-4 text-center">
                    <span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${
                      a.isActive ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
                    }`}>{a.isActive ? 'Aktif' : 'Menunggu'}</span>
                  </td>
                  <td className="py-3 px-4 text-right">
                    <div className="flex items-center justify-end gap-2">
                      {!a.isActive && (
                        <button onClick={() => handleApprove(a.id)} className="text-green-600 hover:text-green-800" title="Setujui">
                          <Check className="w-4 h-4" />
                        </button>
                      )}
                      <Link href={`${basePath}/affiliates/${a.id}`} className="text-indigo-600 hover:text-indigo-800">
                        <Eye className="w-4 h-4" />
                      </Link>
                    </div>
                  </td>
                </tr>
              ))}
              {affiliates.length === 0 && (
                <tr><td colSpan={6} className="py-8 text-center text-gray-500">Belum ada affiliate</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Create Modal */}
      {showCreate && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
          <div className="bg-white rounded-xl p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Tambah Affiliate</h3>
            <form onSubmit={handleCreate} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nama</label>
                <input type="text" className="input-field" value={createForm.name}
                  onChange={e => setCreateForm({ ...createForm, name: e.target.value })} required />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
                <input type="email" className="input-field" value={createForm.email}
                  onChange={e => setCreateForm({ ...createForm, email: e.target.value })} required />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
                <input type="password" className="input-field" value={createForm.password}
                  onChange={e => setCreateForm({ ...createForm, password: e.target.value })} required />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Telepon</label>
                <input type="tel" className="input-field" value={createForm.phone}
                  onChange={e => setCreateForm({ ...createForm, phone: e.target.value })} />
              </div>
              <div className="border-t pt-4">
                <p className="text-sm font-medium text-gray-700 mb-3">Informasi Bank</p>
                <div className="space-y-3">
                  <input type="text" className="input-field" placeholder="Nama Bank"
                    value={createForm.bankName} onChange={e => setCreateForm({ ...createForm, bankName: e.target.value })} />
                  <input type="text" className="input-field" placeholder="Nomor Rekening"
                    value={createForm.bankAccount} onChange={e => setCreateForm({ ...createForm, bankAccount: e.target.value })} />
                  <input type="text" className="input-field" placeholder="Nama Pemilik Rekening"
                    value={createForm.bankHolder} onChange={e => setCreateForm({ ...createForm, bankHolder: e.target.value })} />
                </div>
              </div>
              <label className="flex items-center gap-2">
                <input type="checkbox" checked={createForm.isActive}
                  onChange={e => setCreateForm({ ...createForm, isActive: e.target.checked })} />
                <span className="text-sm text-gray-700">Langsung aktif (skip approval)</span>
              </label>
              <div className="flex gap-3 pt-2">
                <button type="button" onClick={() => setShowCreate(false)} className="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Batal</button>
                <button type="submit" disabled={creating} className="flex-1 btn-primary flex items-center justify-center gap-2">
                  {creating && <Loader2 className="w-4 h-4 animate-spin" />} Buat
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  )
}