'use client'

import { useState } from 'react'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import { formatRupiah, formatDate, getOrderStatusConfig } from '@/lib/utils'

export default function CheckOrderPage() {
  const [orderId, setOrderId] = useState('')
  const [loading, setLoading] = useState(false)
  const [order, setOrder] = useState<any>(null)
  const [error, setError] = useState('')

  const handleCheck = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!orderId) return
    
    setLoading(true)
    setError('')
    setOrder(null)

    try {
      const res = await fetch(`/api/orders/${orderId}`)
      const data = await res.json()
      
      if (!res.ok) throw new Error(data.error || 'Pesanan tidak ditemukan')
      setOrder(data.order)
    } catch (err: any) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <main style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <Navbar />
      <div style={{ paddingTop: '80px', flex: 1, paddingBottom: '60px' }}>
        <div style={{ maxWidth: '600px', margin: '0 auto', padding: '40px 24px' }}>
          <div style={{ textAlign: 'center', marginBottom: '32px' }}>
            <h1 className="font-game" style={{ fontSize: '32px', fontWeight: 700, color: '#f1f5f9', marginBottom: '8px' }}>
              🔍 Cek Status Pesanan
            </h1>
            <p style={{ color: '#64748b', fontSize: '15px' }}>Lacak transaksi kamu menggunakan Order ID (Invoice)</p>
          </div>

          <form onSubmit={handleCheck} className="card" style={{ padding: '32px', marginBottom: '32px' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              <div>
                <label className="label">Order ID</label>
                <input
                  className="input"
                  placeholder="Contoh: cm6s7..."
                  value={orderId}
                  onChange={e => setOrderId(e.target.value)}
                  style={{ fontSize: '16px', padding: '14px 16px' }}
                />
              </div>
              <button type="submit" className="btn btn-primary" style={{ padding: '14px', fontSize: '15px' }} disabled={loading || !orderId}>
                {loading ? <span className="spinner" /> : 'Lacak Pesanan'}
              </button>
            </div>
            {error && (
              <div style={{ marginTop: '16px', padding: '12px', background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.2)', borderRadius: '10px', color: '#ef4444', fontSize: '14px', textAlign: 'center' }}>
                ❌ {error}
              </div>
            )}
          </form>

          {/* Result Card */}
          {order && (
            <div className="card" style={{ padding: '32px' }}>
              <div style={{ textAlign: 'center', marginBottom: '24px' }}>
                <div style={{ fontSize: '13px', color: '#64748b', marginBottom: '4px' }}>Status Pembayaran / Pesanan</div>
                <div style={{ display: 'inline-flex', padding: '6px 16px', borderRadius: '100px', background: getOrderStatusConfig(order.status).bg, color: getOrderStatusConfig(order.status).color, fontWeight: 600, fontSize: '16px', border: `1px solid ${getOrderStatusConfig(order.status).bg.replace('0.15', '0.3')}` }}>
                  {getOrderStatusConfig(order.status).label}
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '12px', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
                  <span style={{ color: '#64748b' }}>Waktu Transaksi</span>
                  <span style={{ color: '#e2e8f0' }}>{formatDate(order.createdAt)}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '12px', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
                  <span style={{ color: '#64748b' }}>Produk</span>
                  <span style={{ color: '#e2e8f0', fontWeight: 500, textAlign: 'right' }}>
                    {order.productType === 'VIP' ? `${order.vipProduct?.gameName} - ${order.vipProduct?.productName}` : order.digitalProduct?.name}
                  </span>
                </div>
                {order.targetId && (
                  <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '12px', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
                    <span style={{ color: '#64748b' }}>Target ID</span>
                    <span style={{ color: '#e2e8f0', fontFamily: 'monospace' }}>
                      {order.targetId} {order.zone ? `(${order.zone})` : ''}
                    </span>
                  </div>
                )}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: '4px' }}>
                  <span style={{ color: '#64748b' }}>Total Harga</span>
                  <span style={{ color: '#f59e0b', fontSize: '20px', fontWeight: 700 }}>{formatRupiah(order.price)}</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
      <Footer />
    </main>
  )
}