'use client'

import { useEffect, useState } from 'react'
import { getBalancesAsCreator, getBalancesAsSubmittor, getSessionUser } from '@/app/actions'
import { Card, CardContent } from '@/components/ui/card'
import { Wallet, ArrowDownRight, ArrowUpRight, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'

export default function BalancesPage() {
  const [activeTab, setActiveTab] = useState<'SUBMITTOR' | 'CREATOR'>('SUBMITTOR')
  const [userId, setUserId] = useState<string | null>(null)
  const [submittorBalances, setSubmittorBalances] = useState<any[]>([])
  const [creatorBalances, setCreatorBalances] = useState<any[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const init = async () => {
      const user = await getSessionUser()
      if (user?.id) {
        setUserId(user.id)
        loadData(user.id)
      }
    }
    init()
  }, [])

  const loadData = async (id: string) => {
    setLoading(true)
    const [subRes, creRes] = await Promise.all([
      getBalancesAsSubmittor(id),
      getBalancesAsCreator(id)
    ])
    setSubmittorBalances(subRes)
    setCreatorBalances(creRes)
    setLoading(false)
  }

  const formatRupiah = (n: number) =>
    new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n)

  return (
    <div className="space-y-6 animate-in fade-in duration-500 pb-12">
      <div>
        <span className="text-xs font-semibold text-slate-400">Keuangan / Saldo</span>
        <h2 className="text-xl font-black text-slate-900 dark:text-white flex items-center gap-2 tracking-tight">
          <Wallet className="w-6 h-6 text-[#1B2CC1]" />
          Buku Saldo
        </h2>
        <p className="text-sm text-slate-500 mt-1">
          Pantau riwayat saldo lebih atau kurang dari transaksi pesanan.
        </p>
      </div>

      <div className="flex bg-slate-100 dark:bg-slate-900 p-1 rounded-xl w-full max-w-sm border border-slate-200 dark:border-slate-800">
        <button
          onClick={() => setActiveTab('SUBMITTOR')}
          className={cn(
            "flex-1 text-xs font-bold py-2 rounded-lg transition-all",
            activeTab === 'SUBMITTOR' 
              ? "bg-white dark:bg-slate-800 shadow-sm text-slate-900 dark:text-white" 
              : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
          )}
        >
          Saldo Saya (Penitip)
        </button>
        <button
          onClick={() => setActiveTab('CREATOR')}
          className={cn(
            "flex-1 text-xs font-bold py-2 rounded-lg transition-all",
            activeTab === 'CREATOR' 
              ? "bg-white dark:bg-slate-800 shadow-sm text-slate-900 dark:text-white" 
              : "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
          )}
        >
          Saldo Orang (Kreator)
        </button>
      </div>

      {loading ? (
        <div className="flex flex-col items-center justify-center min-h-[30vh] gap-3">
          <Loader2 className="animate-spin text-[#1B2CC1] w-8 h-8" />
          <span className="text-xs text-slate-500 font-semibold">Memuat saldo...</span>
        </div>
      ) : activeTab === 'SUBMITTOR' ? (
        <div className="space-y-4">
          <div className="bg-blue-50 dark:bg-blue-950/30 p-4 rounded-xl border border-blue-100 dark:border-blue-900/50 mb-6">
            <h3 className="font-bold text-blue-900 dark:text-blue-100 text-sm mb-1">Saldo Anda di Kreator Lain</h3>
            <p className="text-xs text-blue-700 dark:text-blue-300 leading-relaxed">
              Jika saldo <strong>positif</strong> (hijau), Anda memiliki deposit yang bisa digunakan untuk pesanan berikutnya di kreator tersebut. Jika <strong>negatif</strong> (merah), Anda berhutang.
            </p>
          </div>

          {submittorBalances.length === 0 ? (
            <div className="text-center p-12 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm">
              <p className="text-xs text-slate-500 font-medium">Belum ada catatan saldo.</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
              {submittorBalances.map((b, i) => (
                <Card key={i} className="rounded-2xl border-slate-200/90 dark:border-slate-800 overflow-hidden hover:border-[#1B2CC1]/30 transition-all shadow-sm">
                  <div className="p-4 flex items-center gap-3 bg-slate-50/50 dark:bg-slate-800/40 border-b border-slate-100 dark:border-slate-800">
                    {b.creator.photo ? (
                      <img src={b.creator.photo} alt={b.creator.name} className="w-10 h-10 rounded-full object-cover ring-2 ring-white dark:ring-slate-900 shadow-sm" />
                    ) : (
                      <div className="w-10 h-10 rounded-full bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center font-bold text-sm ring-2 ring-white dark:ring-slate-900 shadow-sm">
                        {b.creator.name.charAt(0).toUpperCase()}
                      </div>
                    )}
                    <div>
                      <p className="font-bold text-slate-900 dark:text-white text-sm">{b.creator.name}</p>
                      <p className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Kreator</p>
                    </div>
                  </div>
                  <CardContent className="p-4 bg-white dark:bg-slate-900">
                    <div className="flex flex-col gap-1">
                      <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Total Saldo</span>
                      <div className={cn("text-xl font-black flex items-center gap-1.5", b.amount > 0 ? "text-emerald-600" : "text-rose-600")}>
                        {b.amount > 0 ? <ArrowUpRight className="w-5 h-5" /> : <ArrowDownRight className="w-5 h-5" />}
                        {formatRupiah(b.amount)}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      ) : (
        <div className="space-y-4">
          <div className="bg-amber-50 dark:bg-amber-950/30 p-4 rounded-xl border border-amber-100 dark:border-amber-900/50 mb-6">
            <h3 className="font-bold text-amber-900 dark:text-amber-100 text-sm mb-1">Saldo Orang Lain di Anda</h3>
            <p className="text-xs text-amber-700 dark:text-amber-300 leading-relaxed">
              Jika saldo <strong>positif</strong> (merah bagi Anda), artinya Anda memegang uang lebih milik penitip (Hutang Anda ke mereka). Jika <strong>negatif</strong> (hijau), mereka berhutang ke Anda.
            </p>
          </div>

          {creatorBalances.length === 0 ? (
            <div className="text-center p-12 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm">
              <p className="text-xs text-slate-500 font-medium">Belum ada penitip yang memiliki catatan saldo dengan Anda.</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
              {creatorBalances.map((b, i) => (
                <Card key={i} className="rounded-2xl border-slate-200/90 dark:border-slate-800 overflow-hidden hover:border-[#1B2CC1]/30 transition-all shadow-sm">
                  <div className="p-4 flex items-center gap-3 bg-slate-50/50 dark:bg-slate-800/40 border-b border-slate-100 dark:border-slate-800">
                    {b.user.photo ? (
                      <img src={b.user.photo} alt={b.user.name} className="w-10 h-10 rounded-full object-cover ring-2 ring-white dark:ring-slate-900 shadow-sm" />
                    ) : (
                      <div className="w-10 h-10 rounded-full bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 flex items-center justify-center font-bold text-sm ring-2 ring-white dark:ring-slate-900 shadow-sm">
                        {b.user.name.charAt(0).toUpperCase()}
                      </div>
                    )}
                    <div>
                      <p className="font-bold text-slate-900 dark:text-white text-sm">{b.user.name}</p>
                      <p className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Penitip</p>
                    </div>
                  </div>
                  <CardContent className="p-4 bg-white dark:bg-slate-900">
                    <div className="flex flex-col gap-1">
                      <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Saldo Penitip</span>
                      {/* From Creator perspective: positive balance of submittor is bad for creator (creator holds their money) */}
                      <div className={cn("text-xl font-black flex items-center gap-1.5", b.amount > 0 ? "text-rose-600" : "text-emerald-600")}>
                        {b.amount > 0 ? <ArrowDownRight className="w-5 h-5" /> : <ArrowUpRight className="w-5 h-5" />}
                        {formatRupiah(b.amount)}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  )
}