import { useEffect, useState } from 'react'
import { Shell } from '@/layouts/Shell'
import { apiClient } from '@/services/apiClient'
import { adminService } from '@/services/adminService'
import { ordersService } from '@/services/ordersService'
import { formatCents } from '@/utils/format'
import { useAuth } from '@/context/AuthContext'
import { useNavigate } from 'react-router-dom'
import { ReviewModal } from '@/components/ReviewModal'
import { FaCartShopping, FaMoneyBillWave, FaBoxOpen } from 'react-icons/fa6'

interface Order {
    id: string
    buyer_id: string
    seller_id: string
    status: string
    total_cents: number
    created_at: string
}

const statusColors: Record<string, string> = {
    Pendente: 'bg-yellow-100 text-yellow-800 border-yellow-300',
    Pago: 'bg-blue-100 text-blue-800 border-blue-300',
    Faturado: 'bg-purple-100 text-purple-800 border-purple-300',
    Entregue: 'bg-green-100 text-green-800 border-green-300'
}

const statusIcons: Record<string, string> = {
    Pendente: '⏳',
    Pago: '💳',
    Faturado: '📄',
    Entregue: '✅'
}

type TabType = 'compras' | 'vendas'

export function OrdersPage() {
    const { user } = useAuth()
    const navigate = useNavigate()
    const [activeTab, setActiveTab] = useState<TabType>('compras')
    const [orders, setOrders] = useState<Order[]>([])
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState<string | null>(null)

    // Review Modal State
    const [reviewModalOpen, setReviewModalOpen] = useState(false)
    const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null)
    const [submittingReview, setSubmittingReview] = useState(false)

    const handleOpenReview = (orderId: string) => {
        setSelectedOrderId(orderId)
        setReviewModalOpen(true)
    }

    const handleSubmitReview = async (rating: number, comment: string) => {
        if (!selectedOrderId) return
        setSubmittingReview(true)
        try {
            await adminService.createReview(selectedOrderId, rating, comment)
            alert('Avaliação enviada com sucesso!')
            setReviewModalOpen(false)
        } catch (err) {
            console.error('Erro ao avaliar:', err)
            alert('Erro ao enviar avaliação.')
        } finally {
            setSubmittingReview(false)
            setSelectedOrderId(null)
        }
    }

    const handleReorder = async (orderId: string) => {
        if (!confirm('Deseja adicionar os itens deste pedido ao seu carrinho atual?')) return

        try {
            setLoading(true)
            const res = await ordersService.reorder(orderId)

            if (res.warnings && res.warnings.length > 0) {
                alert(`Itens adicionados com avisos:\n${res.warnings.join('\n')}`)
            } else {
                alert('Itens adicionados ao carrinho com sucesso!')
            }
            navigate('/cart')
        } catch (err) {
            console.error('Erro ao recomprar:', err)
            alert('Erro ao processar recompra')
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        loadOrders()
    }, [activeTab])

    const loadOrders = async () => {
        console.log('%c📦 [Orders] ========== CARREGANDO PEDIDOS ==========', 'color: #3B82F6; font-weight: bold; font-size: 14px')
        console.log('%c🔄 [Orders] Tab ativo:', 'color: #10B981; font-weight: bold', activeTab)

        try {
            setLoading(true)
            const endpoint = activeTab === 'compras'
                ? '/v1/orders?role=buyer'
                : '/v1/orders?role=seller'

            console.log('%c🌐 [Orders] Endpoint:', 'color: #8B5CF6; font-weight: bold', endpoint)
            console.log('%c🔑 [Orders] Chamando apiClient.get...', 'color: #F59E0B')

            const response = await apiClient.get<{ orders: Order[]; total: number }>(endpoint)

            console.log('%c✅ [Orders] Resposta recebida!', 'color: #10B981; font-weight: bold')
            console.log('%c📊 [Orders] Response completa:', 'color: #6366F1', response)
            console.log('%c📋 [Orders] Pedidos:', 'color: #6366F1', response?.orders)
            console.log('%c🔢 [Orders] Total:', 'color: #6366F1', response?.total)

            setOrders(response?.orders || [])
            setError(null)

            console.log('%c✅ [Orders] Estado atualizado com sucesso!', 'color: #10B981; font-weight: bold')
        } catch (err: any) {
            console.log('%c❌ [Orders] ERRO AO CARREGAR PEDIDOS!', 'color: #EF4444; font-weight: bold; font-size: 16px')
            console.log('%c❌ [Orders] Erro completo:', 'color: #EF4444', err)
            console.log('%c❌ [Orders] Response do erro:', 'color: #EF4444', err?.response)
            console.log('%c❌ [Orders] Status:', 'color: #EF4444', err?.response?.status)
            console.log('%c❌ [Orders] Data:', 'color: #EF4444', err?.response?.data)
            console.log('%c❌ [Orders] Message:', 'color: #EF4444', err?.message)

            setError('Erro ao carregar pedidos')
        } finally {
            setLoading(false)
            console.log('%c📦 [Orders] ========== FIM ==========', 'color: #3B82F6; font-weight: bold')
        }
    }

    const updateStatus = async (orderId: string, newStatus: string) => {
        try {
            await apiClient.post(`/v1/orders/${orderId}/status`, { status: newStatus })
            await loadOrders()
        } catch (err) {
            console.error('Erro ao atualizar status:', err)
        }
    }

    const formatCurrency = (cents: number | undefined | null) => formatCents(cents)

    // Calculate stats
    const pendingCount = orders.filter(o => o.status === 'Pendente').length
    const totalValue = orders.reduce((sum, o) => sum + (o.total_cents || 0), 0)

    return (
        <Shell>
            <div className="space-y-6">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div>
                        <h1 className="text-2xl font-bold text-gray-800">Gestão de Pedidos</h1>
                        <p className="text-gray-500">Acompanhe suas compras e vendas</p>
                    </div>
                    <button
                        onClick={loadOrders}
                        className="flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-semibold text-white hover:opacity-90 transition-colors"
                        style={{ backgroundColor: '#0F4C81' }}
                    >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                        </svg>
                        Atualizar
                    </button>
                </div>

                {/* Tabs */}
                <div className="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div className="flex border-b border-gray-200">
                        <button
                            onClick={() => setActiveTab('compras')}
                            className={`flex-1 py-4 px-6 text-center font-medium transition-all relative ${activeTab === 'compras'
                                ? 'text-blue-600 bg-blue-50'
                                : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
                                }`}
                        >
                            <div className="flex items-center justify-center gap-3">
                                <FaCartShopping size={22} color="black" />
                                <div className="text-left">
                                    <p className="font-semibold">Pedidos Feitos</p>
                                    <p className="text-xs text-gray-400">Suas compras de outras farmácias</p>
                                </div>
                            </div>
                            {activeTab === 'compras' && (
                                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600" />
                            )}
                        </button>
                        <button
                            onClick={() => setActiveTab('vendas')}
                            className={`flex-1 py-4 px-6 text-center font-medium transition-all relative ${activeTab === 'vendas'
                                ? 'text-green-600 bg-green-50'
                                : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
                                }`}
                        >
                            <div className="flex items-center justify-center gap-3">
                                <FaMoneyBillWave size={22} color="black" />
                                <div className="text-left">
                                    <p className="font-semibold">Pedidos Recebidos</p>
                                    <p className="text-xs text-gray-400">Vendas para outras farmácias</p>
                                </div>
                            </div>
                            {activeTab === 'vendas' && (
                                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-green-600" />
                            )}
                        </button>
                    </div>

                    {/* Stats Bar */}
                    <div className="flex items-center justify-between px-6 py-3 bg-gray-50 border-b border-gray-100">
                        <div className="flex items-center gap-6">
                            <div className="flex items-center gap-2">
                                <span className="text-sm text-gray-500">Total:</span>
                                <span className="font-bold text-gray-800">{orders.length} pedidos</span>
                            </div>
                            <div className="flex items-center gap-2">
                                <span className="text-sm text-gray-500">Valor:</span>
                                <span className="font-bold text-blue-600">{formatCurrency(totalValue)}</span>
                            </div>
                            {pendingCount > 0 && (
                                <div className="flex items-center gap-2 bg-yellow-100 px-3 py-1 rounded-full">
                                    <span className="text-sm text-yellow-700">{pendingCount} pendentes</span>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Content */}
                    <div className="p-6">
                        {loading && (
                            <div className="flex justify-center py-12">
                                <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600"></div>
                            </div>
                        )}

                        {error && (
                            <div className="rounded-lg bg-red-50 border border-red-200 p-4 text-red-700 flex items-center gap-3">
                                <span className="text-xl">⚠️</span>
                                {error}
                            </div>
                        )}

                        {!loading && orders.length === 0 && (
                            <div className="text-center py-12">
                                <FaBoxOpen size={40} color="black" className="mx-auto mb-4" />
                                <h3 className="text-lg font-medium text-gray-700">
                                    Nenhum pedido {activeTab === 'compras' ? 'feito' : 'recebido'} ainda
                                </h3>
                                <p className="text-gray-500 mt-1">
                                    {activeTab === 'compras'
                                        ? 'Pesquise produtos e comece a comprar!'
                                        : 'Cadastre produtos e aguarde as vendas!'
                                    }
                                </p>
                            </div>
                        )}

                        {/* Orders List */}
                        <div className="space-y-4">
                            {orders.map((order) => (
                                <div
                                    key={order.id}
                                    className="rounded-xl border border-gray-200 bg-white p-5 hover:shadow-md transition-shadow"
                                >
                                    <div className="flex items-start justify-between">
                                        <div className="flex items-start gap-4">
                                            <div className={`w-12 h-12 rounded-lg flex items-center justify-center text-2xl ${activeTab === 'compras' ? 'bg-blue-100' : 'bg-green-100'
                                                }`}>
                                                {statusIcons[order.status] || '📦'}
                                            </div>
                                            <div>
                                                <p className="font-semibold text-gray-800">
                                                    Pedido #{order.id.slice(0, 8).toUpperCase()}
                                                </p>
                                                <p className="text-sm text-gray-500 mt-0.5">
                                                    {new Date(order.created_at).toLocaleDateString('pt-BR', {
                                                        day: '2-digit',
                                                        month: 'long',
                                                        year: 'numeric',
                                                        hour: '2-digit',
                                                        minute: '2-digit'
                                                    })}
                                                </p>
                                            </div>
                                        </div>
                                        <div className="text-right">
                                            <p className="text-xl font-bold text-gray-800">
                                                {formatCurrency(order.total_cents)}
                                            </p>
                                            <span className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold border ${statusColors[order.status] || 'bg-gray-100'}`}>
                                                {statusIcons[order.status]} {order.status}
                                            </span>
                                        </div>
                                    </div>

                                    {/* Actions - only for sales */}
                                    {activeTab === 'vendas' && (
                                        <div className="mt-4 pt-4 border-t border-gray-100">
                                            {/* Timeline for Sales */}
                                            <div className="mb-4">
                                                <div className="flex items-center justify-between">
                                                    {['Pendente', 'Pago', 'Faturado', 'Entregue'].map((status, idx) => {
                                                        const isCompleted = ['Pendente', 'Pago', 'Faturado', 'Entregue'].indexOf(order.status) >= idx
                                                        return (
                                                            <div key={status} className="flex items-center">
                                                                <div
                                                                    className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold ${isCompleted
                                                                        ? 'text-white'
                                                                        : 'bg-gray-200 text-gray-500'
                                                                        }`}
                                                                    style={isCompleted ? { backgroundColor: '#0F4C81' } : {}}>
                                                                    {isCompleted ? '✓' : idx + 1}
                                                                </div>
                                                                {idx < 3 && (
                                                                    <div className={`w-16 h-1 mx-1 ${['Pendente', 'Pago', 'Faturado', 'Entregue'].indexOf(order.status) > idx
                                                                        ? 'bg-blue-600'
                                                                        : 'bg-gray-200'
                                                                        }`} />
                                                                )}
                                                            </div>
                                                        )
                                                    })}
                                                </div>
                                                <div className="flex justify-between mt-2 text-xs text-gray-500">
                                                    <span>Pendente</span>
                                                    <span>Pago</span>
                                                    <span>Faturado</span>
                                                    <span>Entregue</span>
                                                </div>
                                            </div>

                                            <div className="flex gap-2 justify-end">
                                                {order.status === 'Pendente' && (
                                                    <button
                                                        onClick={() => updateStatus(order.id, 'Pago')}
                                                        className="flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white hover:opacity-90 transition-colors"
                                                        style={{ backgroundColor: '#0F4C81' }}
                                                    >
                                                        💳 Confirmar Pagamento
                                                    </button>
                                                )}
                                                {order.status === 'Pago' && (
                                                    <button
                                                        onClick={() => updateStatus(order.id, 'Faturado')}
                                                        className="flex items-center gap-2 rounded-lg bg-purple-600 px-4 py-2 text-sm font-medium text-white hover:bg-purple-700 transition-colors"
                                                    >
                                                        📄 Faturar Pedido
                                                    </button>
                                                )}
                                                {order.status === 'Faturado' && (
                                                    <button
                                                        onClick={() => updateStatus(order.id, 'Entregue')}
                                                        className="flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 transition-colors"
                                                    >
                                                        ✅ Confirmar Entrega
                                                    </button>
                                                )}
                                                {order.status === 'Entregue' && (
                                                    <span className="text-green-600 text-sm font-medium flex items-center gap-2">
                                                        ✅ Pedido concluído com sucesso
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                    )}

                                    {/* Track progress for purchases */}
                                    {activeTab === 'compras' && (
                                        <div className="mt-4 pt-4 border-t border-gray-100">
                                            <div className="flex items-center justify-between">
                                                {['Pendente', 'Pago', 'Faturado', 'Entregue'].map((status, idx) => {
                                                    const isCompleted = ['Pendente', 'Pago', 'Faturado', 'Entregue'].indexOf(order.status) >= idx
                                                    return (
                                                        <div key={status} className="flex items-center">
                                                            <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold ${isCompleted
                                                                ? 'bg-blue-600 text-white'
                                                                : 'bg-gray-200 text-gray-500'
                                                                }`}>
                                                                {isCompleted ? '✓' : idx + 1}
                                                            </div>
                                                            {idx < 3 && (
                                                                <div className={`w-16 h-1 mx-1 ${['Pendente', 'Pago', 'Faturado', 'Entregue'].indexOf(order.status) > idx
                                                                    ? 'bg-blue-600'
                                                                    : 'bg-gray-200'
                                                                    }`} />
                                                            )}
                                                        </div>
                                                    )
                                                })}
                                            </div>
                                            <div className="flex justify-between mt-2 text-xs text-gray-500">
                                                <span>Pendente</span>
                                                <span>Pago</span>
                                                <span>Faturado</span>
                                                <span>Entregue</span>
                                            </div>

                                            {/* Confirm Receipt Action */}
                                            {order.status === 'Faturado' && (
                                                <div className="mt-4 flex justify-end">
                                                    <button
                                                        onClick={() => updateStatus(order.id, 'Entregue')}
                                                        className="flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 transition-colors"
                                                    >
                                                        ✅ Confirmar Recebimento
                                                    </button>
                                                </div>
                                            )}

                                            {order.status === 'Entregue' && (
                                                <div className="mt-4 flex justify-end gap-2">
                                                    <button
                                                        onClick={() => handleReorder(order.id)}
                                                        className="flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium hover:bg-blue-50 transition-colors shadow-sm"
                                                        style={{ borderColor: '#0F4C81', color: '#0F4C81' }}
                                                    >
                                                        🔄 Comprar Novamente
                                                    </button>
                                                    <button
                                                        onClick={() => handleOpenReview(order.id)}
                                                        className="flex items-center gap-2 rounded-lg bg-yellow-500 px-4 py-2 text-sm font-medium text-white hover:bg-yellow-600 transition-colors shadow-sm"
                                                    >
                                                        ⭐ Avaliar Pedido
                                                    </button>
                                                </div>
                                            )}
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>

            <ReviewModal
                isOpen={reviewModalOpen}
                onClose={() => setReviewModalOpen(false)}
                onSubmit={handleSubmitReview}
                isSubmitting={submittingReview}
            />
        </Shell>
    )
}
