"use client";

import { useEffect, useState, useMemo } from "react";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";
import { PageHeader } from "@/components/ui/page-header";
import { Trophy, TrendingUp, TrendingDown, DollarSign, ShoppingBag, ArrowLeft } from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";

interface ClientRankingData {
  id: string;
  name: string;
  company_name: string | null;
  type: "pf" | "pj";
  active: boolean;
  totalSpent: number;
  ordersCount: number;
  averageTicket: number;
  lastOrderDate: Date | null;
}

export default function ClientRankingPage() {
  const [rankingData, setRankingData] = useState<ClientRankingData[]>([]);
  const [loading, setLoading] = useState(true);

  async function fetchRanking() {
    setLoading(true);
    try {
      const supabase = getSupabaseClient();
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) return;
      
      const ctx = await getCompanyContext(supabase, user);
      const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];

      // Fetch clients and their orders
      const { data: clients, error } = await supabase
        .from("clients")
        .select("id, name, company_name, type, active, is_deleted, is_system_placeholder, orders(id, total_amount, created_at, status)")
        .in("user_id", tenantIds);

      if (error) throw error;

      const validClients = (clients || []).filter(c => !c.is_deleted && !c.is_system_placeholder);

      const processedData: ClientRankingData[] = validClients.map(client => {
        // Only consider orders that are not canceled
        const validOrders = (client.orders || []).filter(o => o.status !== "canceled");
        
        const totalSpent = validOrders.reduce((acc, order) => acc + (order.total_amount || 0), 0);
        const ordersCount = validOrders.length;
        const averageTicket = ordersCount > 0 ? totalSpent / ordersCount : 0;
        
        const lastOrderDate = validOrders.length > 0 
          ? new Date(Math.max(...validOrders.map(o => new Date(o.created_at).getTime())))
          : null;

        return {
          id: client.id,
          name: client.name || "",
          company_name: client.company_name,
          type: client.type,
          active: client.active !== false,
          totalSpent,
          ordersCount,
          averageTicket,
          lastOrderDate
        };
      });

      // Sort by total spent descending
      const sortedData = processedData.sort((a, b) => b.totalSpent - a.totalSpent);
      
      setRankingData(sortedData);
    } catch (err) {
      console.error("Erro ao buscar ranking:", err);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    fetchRanking();
  }, []);

  const totalRevenue = useMemo(() => rankingData.reduce((acc, c) => acc + c.totalSpent, 0), [rankingData]);
  const activeBuyersCount = useMemo(() => rankingData.filter(c => c.ordersCount > 0).length, [rankingData]);
  const overallAverageTicket = useMemo(() => activeBuyersCount > 0 ? totalRevenue / rankingData.reduce((acc, c) => acc + c.ordersCount, 0) : 0, [totalRevenue, rankingData, activeBuyersCount]);

  const formatCurrency = (val: number) => {
    return (val).toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Link href="/dashboard/clients">
          <Button variant="ghost" className="w-10 h-10 p-0 rounded-xl" title="Voltar para clientes">
            <ArrowLeft size={18} />
          </Button>
        </Link>
        <PageHeader
          title="Ranking de Clientes"
          subtitle="Descubra quem são seus melhores clientes e como eles impactam seu negócio."
        />
      </div>

      {loading ? (
        <div className="bg-white rounded-2xl border border-gray-100 p-16 flex items-center justify-center">
          <div className="w-6 h-6 border-2 border-indigo-600 border-t-transparent rounded-full animate-spin" />
        </div>
      ) : (
        <>
          {/* Global KPIs */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div className="bg-white rounded-2xl border border-gray-100 p-5 flex items-center gap-4">
              <div className="w-12 h-12 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0">
                <DollarSign size={24} />
              </div>
              <div>
                <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Receita Total Gerada</p>
                <p className="text-2xl font-bold text-gray-900">{formatCurrency(totalRevenue)}</p>
              </div>
            </div>
            
            <div className="bg-white rounded-2xl border border-gray-100 p-5 flex items-center gap-4">
              <div className="w-12 h-12 rounded-full bg-indigo-50 text-indigo-600 flex items-center justify-center shrink-0">
                <Trophy size={24} />
              </div>
              <div>
                <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Clientes Compradores</p>
                <p className="text-2xl font-bold text-gray-900">{activeBuyersCount}</p>
              </div>
            </div>

            <div className="bg-white rounded-2xl border border-gray-100 p-5 flex items-center gap-4">
              <div className="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
                <TrendingUp size={24} />
              </div>
              <div>
                <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-1">Ticket Médio Global</p>
                <p className="text-2xl font-bold text-gray-900">{formatCurrency(overallAverageTicket)}</p>
              </div>
            </div>
          </div>

          {/* Ranking List */}
          <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-sm text-left">
                <thead className="bg-gray-50/50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                  <tr>
                    <th className="px-4 py-3 w-16">Posição</th>
                    <th className="px-4 py-3">Cliente</th>
                    <th className="px-4 py-3 text-right">Total Comprado</th>
                    <th className="px-4 py-3 text-center">Pedidos</th>
                    <th className="px-4 py-3 text-right">Ticket Médio</th>
                    <th className="px-4 py-3 text-right">Última Compra</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-50">
                  {rankingData.filter(c => c.ordersCount > 0).length === 0 ? (
                    <tr>
                      <td colSpan={6} className="px-4 py-12 text-center text-gray-400">
                        Nenhum pedido registrado ainda para montar o ranking.
                      </td>
                    </tr>
                  ) : (
                    rankingData.filter(c => c.ordersCount > 0).map((client, index) => {
                      const clientName = client.company_name || client.name;
                      const typeLabel = client.type === "pj" ? "PJ" : "PF";
                      
                      let medalColor = "text-gray-400 bg-gray-50";
                      if (index === 0) medalColor = "text-yellow-600 bg-yellow-50 border border-yellow-100";
                      else if (index === 1) medalColor = "text-gray-600 bg-gray-100 border border-gray-200";
                      else if (index === 2) medalColor = "text-amber-700 bg-amber-50 border border-amber-100";

                      return (
                        <tr key={client.id} className="hover:bg-gray-50/50 transition-colors">
                          <td className="px-4 py-3 whitespace-nowrap">
                            <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs ${medalColor}`}>
                              {index + 1}º
                            </div>
                          </td>
                          <td className="px-4 py-3 w-full max-w-0">
                            <div className="flex items-center gap-3">
                              <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0 ${
                                  ['bg-blue-600', 'bg-indigo-600', 'bg-purple-600', 'bg-teal-600'][((clientName?.charCodeAt(0) || 0) + (clientName?.length || 0)) % 4]
                                }`}>
                                  {clientName?.substring(0, 2).toUpperCase()}
                              </div>
                              <div className="flex flex-col min-w-0">
                                <div className="flex items-center gap-2">
                                  <span className="font-semibold text-gray-900 truncate block" title={clientName}>{clientName}</span>
                                  <span className={`px-1.5 py-0.5 rounded text-[9px] font-bold tracking-wide uppercase shrink-0 ${
                                    client.type === 'pj' ? 'bg-indigo-50 text-indigo-700' : 'bg-emerald-50 text-emerald-700'
                                  }`}>
                                    {typeLabel}
                                  </span>
                                </div>
                                {client.company_name && (
                                  <span className="text-xs text-gray-500 truncate block mt-0.5">{client.name}</span>
                                )}
                              </div>
                            </div>
                          </td>
                          <td className="px-4 py-3 text-right font-bold text-gray-900 whitespace-nowrap">
                            {formatCurrency(client.totalSpent)}
                          </td>
                          <td className="px-4 py-3 text-center whitespace-nowrap">
                            <span className="inline-flex items-center justify-center w-6 h-6 rounded-md bg-gray-100 text-gray-700 text-xs font-semibold">
                              {client.ordersCount}
                            </span>
                          </td>
                          <td className="px-4 py-3 text-right text-gray-600 font-medium whitespace-nowrap">
                            {formatCurrency(client.averageTicket)}
                          </td>
                          <td className="px-4 py-3 text-right text-gray-500 text-sm whitespace-nowrap">
                            {client.lastOrderDate ? client.lastOrderDate.toLocaleDateString("pt-BR") : "-"}
                          </td>
                        </tr>
                      );
                    })
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </>
      )}
    </div>
  );
}