import React, { useState } from "react";
import { base44 } from "@/api/base44Client";
import { useQuery } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { FileText, Plus, Search, Eye, AlertTriangle, CheckCircle, Clock, DollarSign, Edit, TrendingUp, TrendingDown, Calendar, ArrowUpRight, Sparkles, BarChart3, PieChart, MapPin, User } from "lucide-react";
import { format, parseISO, isPast } from "date-fns";
import PageHeader from "@/components/common/PageHeader";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import AutoInvoiceGenerator from "@/components/invoices/AutoInvoiceGenerator";


const statusColors = {
  'Draft': 'bg-slate-100 text-slate-600 font-medium',
  'Open': 'bg-blue-100 text-blue-700 font-medium',
  'Pending Review': 'bg-blue-100 text-blue-700 font-medium',
  'Confirmed': 'bg-amber-100 text-amber-700 font-medium',
  'Approved': 'bg-emerald-100 text-emerald-700 font-medium',
  'Disputed': 'bg-red-100 text-red-700 font-medium',
  'Under Review': 'bg-orange-100 text-orange-700 font-medium',
  'Resolved': 'bg-cyan-100 text-cyan-700 font-medium',
  'Overdue': 'bg-red-100 text-red-700 font-medium',
  'Paid': 'bg-emerald-100 text-emerald-700 font-medium',
  'Reconciled': 'bg-purple-100 text-purple-700 font-medium',
  'Cancelled': 'bg-slate-100 text-slate-600 font-medium',
};

export default function Invoices() {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState("all");
  const [searchTerm, setSearchTerm] = useState("");


  const { data: user } = useQuery({
    queryKey: ['current-user-invoices'],
    queryFn: () => base44.auth.me(),
  });

  const { data: invoices = [], isLoading } = useQuery({
    queryKey: ['invoices'],
    queryFn: () => base44.entities.Invoice.list('-issue_date'),
    initialData: [],
  });

  const userRole = user?.user_role || user?.role;

  // Auto-mark overdue invoices
  React.useEffect(() => {
    invoices.forEach(async (invoice) => {
      if (invoice.status === "Approved" && isPast(parseISO(invoice.due_date))) {
        try {
          await base44.entities.Invoice.update(invoice.id, { status: "Overdue" });
        } catch (error) {
          console.error('Failed to mark invoice as overdue:', error);
        }
      }
    });
  }, [invoices]);

  // Filter invoices based on user role
  const visibleInvoices = React.useMemo(() => {
    if (userRole === "client") {
      return invoices.filter(inv =>
        inv.business_name === user?.company_name ||
        inv.manager_name === user?.full_name ||
        inv.created_by === user?.email
      );
    }
    if (userRole === "vendor") {
      return invoices.filter(inv =>
        inv.vendor_name === user?.company_name ||
        inv.vendor_id === user?.vendor_id
      );
    }
    return invoices;
  }, [invoices, userRole, user]);

  const getFilteredInvoices = () => {
    let filtered = visibleInvoices;

    if (activeTab !== "all") {
      const statusMap = {
        'pending': 'Pending Review',
        'approved': 'Approved',
        'disputed': 'Disputed',
        'overdue': 'Overdue',
        'paid': 'Paid',
        'reconciled': 'Reconciled',
      };
      filtered = filtered.filter(inv => inv.status === statusMap[activeTab]);
    }

    if (searchTerm) {
      filtered = filtered.filter(inv =>
        inv.invoice_number?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        inv.business_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        inv.manager_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        inv.event_name?.toLowerCase().includes(searchTerm.toLowerCase())
      );
    }

    return filtered;
  };

  const filteredInvoices = getFilteredInvoices();

  const getStatusCount = (status) => {
    if (status === "all") return visibleInvoices.length;
    return visibleInvoices.filter(inv => inv.status === status).length;
  };

  const getTotalAmount = (status) => {
    const filtered = status === "all"
      ? visibleInvoices
      : visibleInvoices.filter(inv => inv.status === status);
    return filtered.reduce((sum, inv) => sum + (inv.amount || 0), 0);
  };

  const metrics = {
    all: getTotalAmount("all"),
    pending: getTotalAmount("Pending Review"),
    approved: getTotalAmount("Approved"),
    disputed: getTotalAmount("Disputed"),
    overdue: getTotalAmount("Overdue"),
    paid: getTotalAmount("Paid"),
    outstanding: getTotalAmount("Pending Review") + getTotalAmount("Approved") + getTotalAmount("Overdue"),
  };

  // Smart Insights
  const insights = React.useMemo(() => {
    const currentMonth = visibleInvoices.filter(inv => {
      const issueDate = parseISO(inv.issue_date);
      const now = new Date();
      return issueDate.getMonth() === now.getMonth() && issueDate.getFullYear() === now.getFullYear();
    });

    const lastMonth = visibleInvoices.filter(inv => {
      const issueDate = parseISO(inv.issue_date);
      const now = new Date();
      const lastMonthDate = new Date(now.getFullYear(), now.getMonth() - 1);
      return issueDate.getMonth() === lastMonthDate.getMonth() && issueDate.getFullYear() === lastMonthDate.getFullYear();
    });

    const currentTotal = currentMonth.reduce((sum, inv) => sum + (inv.amount || 0), 0);
    const lastTotal = lastMonth.reduce((sum, inv) => sum + (inv.amount || 0), 0);
    const percentChange = lastTotal > 0 ? ((currentTotal - lastTotal) / lastTotal * 100).toFixed(1) : 0;

    const avgPaymentTime = visibleInvoices
      .filter(inv => inv.status === "Paid" && inv.paid_date && inv.issue_date)
      .map(inv => {
        const days = Math.floor((parseISO(inv.paid_date) - parseISO(inv.issue_date)) / (1000 * 60 * 60 * 24));
        return days;
      });
    const avgDays = avgPaymentTime.length > 0 ? Math.round(avgPaymentTime.reduce((a, b) => a + b, 0) / avgPaymentTime.length) : 0;

    const onTimePayments = visibleInvoices.filter(inv => 
      inv.status === "Paid" && inv.paid_date && inv.due_date && parseISO(inv.paid_date) <= parseISO(inv.due_date)
    ).length;
    const totalPaid = visibleInvoices.filter(inv => inv.status === "Paid").length;
    const onTimeRate = totalPaid > 0 ? ((onTimePayments / totalPaid) * 100).toFixed(0) : 0;

    const topClient = Object.entries(
      visibleInvoices.reduce((acc, inv) => {
        const client = inv.business_name || "Unknown";
        acc[client] = (acc[client] || 0) + (inv.amount || 0);
        return acc;
      }, {})
    ).sort((a, b) => b[1] - a[1])[0];

    // For clients: calculate best hub by reconciliation rate
    const bestHub = userRole === "client" ? (() => {
      const hubStats = visibleInvoices.reduce((acc, inv) => {
        const hub = inv.hub || "Unknown";
        if (!acc[hub]) {
          acc[hub] = { total: 0, reconciled: 0, paid: 0 };
        }
        acc[hub].total++;
        if (inv.status === "Reconciled") acc[hub].reconciled++;
        if (inv.status === "Paid" || inv.status === "Reconciled") acc[hub].paid++;
        return acc;
      }, {});

      const sortedHubs = Object.entries(hubStats)
        .map(([hub, stats]) => ({
          hub,
          rate: stats.total > 0 ? ((stats.paid / stats.total) * 100).toFixed(0) : 0,
          total: stats.total
        }))
        .sort((a, b) => b.rate - a.rate);

      return sortedHubs[0] || null;
    })() : null;

    return {
      percentChange,
      isGrowth: percentChange > 0,
      avgDays,
      onTimeRate,
      topClient: topClient ? { name: topClient[0], amount: topClient[1] } : null,
      bestHub,
      currentMonthCount: currentMonth.length,
      currentTotal,
    };
  }, [visibleInvoices, userRole]);

  return (
    <>
      <AutoInvoiceGenerator />
      
      <div className="p-4 md:p-6 bg-slate-100 min-h-screen">
        <div className="max-w-[1800px] mx-auto">
          <div className="flex gap-6">
            {/* Left Sidebar - Summary */}
            <div className="hidden lg:block w-72 flex-shrink-0 space-y-4">
              {/* Logo Card */}
              <Card className="border-0 bg-gradient-to-br from-[#0A39DF] to-[#1C323E] text-white overflow-hidden">
                <CardContent className="p-5">
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                      <FileText className="w-5 h-5" />
                    </div>
                    <div>
                      <h2 className="font-bold">Invoices</h2>
                      <p className="text-xs text-white/70">{visibleInvoices.length} total</p>
                    </div>
                  </div>
                  <div className="space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-sm text-white/70">Total Value</span>
                      <span className="font-bold text-lg">${metrics.all.toLocaleString()}</span>
                    </div>
                    <div className="h-2 bg-white/20 rounded-full overflow-hidden">
                      <div className="h-full bg-emerald-400 rounded-full" style={{ width: `${(metrics.paid / metrics.all) * 100 || 0}%` }} />
                    </div>
                    <p className="text-xs text-white/60">{((metrics.paid / metrics.all) * 100 || 0).toFixed(0)}% collected</p>
                  </div>
                  {userRole === "vendor" && (
                    <Button onClick={() => navigate(createPageUrl("InvoiceEditor"))} size="sm" className="w-full mt-4 bg-white text-[#0A39DF] hover:bg-white/90">
                      <Plus className="w-4 h-4 mr-1" /> New Invoice
                    </Button>
                  )}
                </CardContent>
              </Card>

              {/* Status Breakdown */}
              <Card className="border-0 shadow-sm">
                <CardContent className="p-4">
                  <h3 className="font-semibold text-slate-900 mb-3 text-sm">Status Breakdown</h3>
                  <div className="space-y-2">
                    {[
                      { label: "Pending", status: "Pending Review", color: "bg-blue-500", value: getStatusCount("Pending Review"), amount: getTotalAmount("Pending Review") },
                      { label: "Approved", status: "Approved", color: "bg-emerald-500", value: getStatusCount("Approved"), amount: getTotalAmount("Approved") },
                      { label: "Disputed", status: "Disputed", color: "bg-red-500", value: getStatusCount("Disputed"), amount: getTotalAmount("Disputed") },
                      { label: "Overdue", status: "Overdue", color: "bg-amber-500", value: getStatusCount("Overdue"), amount: getTotalAmount("Overdue") },
                      { label: "Paid", status: "Paid", color: "bg-green-500", value: getStatusCount("Paid"), amount: getTotalAmount("Paid") },
                      { label: "Reconciled", status: "Reconciled", color: "bg-purple-500", value: getStatusCount("Reconciled"), amount: getTotalAmount("Reconciled") },
                    ].map(item => (
                      <button
                        key={item.status}
                        onClick={() => setActiveTab(item.label.toLowerCase())}
                        className={`w-full flex items-center gap-3 p-2 rounded-lg transition-all hover:bg-slate-50 ${activeTab === item.label.toLowerCase() ? 'bg-slate-100' : ''}`}
                      >
                        <div className={`w-2 h-2 rounded-full ${item.color}`} />
                        <span className="text-sm text-slate-700 flex-1 text-left">{item.label}</span>
                        <span className="text-xs text-slate-500 mr-1">${item.amount.toLocaleString()}</span>
                        <Badge variant="outline" className="text-xs">{item.value}</Badge>
                      </button>
                    ))}
                  </div>
                </CardContent>
              </Card>

              {/* Sales & Revenue - Vendor Focused */}
              <Card className="border-0 shadow-sm bg-emerald-50">
                <CardContent className="p-4">
                  <div className="flex items-center gap-2 mb-3">
                    <TrendingUp className="w-4 h-4 text-emerald-600" />
                    <h3 className="font-semibold text-emerald-900 text-sm">Sales & Revenue</h3>
                  </div>
                  <div className="space-y-3 text-sm">
                    <div className="flex justify-between">
                      <span className="text-emerald-700">Total Sales</span>
                      <span className="font-semibold text-emerald-900">${metrics.all.toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-emerald-700">Collected</span>
                      <span className="font-semibold text-emerald-900">${metrics.paid.toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-emerald-700">Pending Revenue</span>
                      <span className="font-semibold text-emerald-900">${metrics.outstanding.toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-emerald-700">Collection Rate</span>
                      <span className="font-semibold text-emerald-900">{((metrics.paid / metrics.all) * 100 || 0).toFixed(0)}%</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-emerald-700">Avg. Invoice</span>
                      <span className="font-semibold text-emerald-900">${visibleInvoices.length > 0 ? Math.round(metrics.all / visibleInvoices.length).toLocaleString() : 0}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Quick Insights */}
              <Card className="border-0 shadow-sm bg-amber-50">
                <CardContent className="p-4">
                  <div className="flex items-center gap-2 mb-3">
                    <Sparkles className="w-4 h-4 text-amber-600" />
                    <h3 className="font-semibold text-amber-900 text-sm">Performance</h3>
                  </div>
                  <div className="space-y-3 text-sm">
                    <div className="flex justify-between">
                      <span className="text-amber-700">Avg. Payment</span>
                      <span className="font-semibold text-amber-900">{insights.avgDays} days</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-amber-700">On-Time Rate</span>
                      <span className="font-semibold text-amber-900">{insights.onTimeRate}%</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-amber-700">This Month</span>
                      <span className="font-semibold text-amber-900">${insights.currentTotal.toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-amber-700">Monthly Count</span>
                      <span className="font-semibold text-amber-900">{insights.currentMonthCount} invoices</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-amber-700">MoM Change</span>
                      <span className={`font-semibold ${insights.isGrowth ? 'text-emerald-700' : 'text-red-700'}`}>
                        {insights.isGrowth ? '+' : ''}{insights.percentChange}%
                      </span>
                    </div>
                    {insights.topClient && (
                      <div className="flex justify-between">
                        <span className="text-amber-700">Top Client</span>
                        <span className="font-semibold text-amber-900 truncate max-w-[100px]" title={insights.topClient.name}>
                          {insights.topClient.name}
                        </span>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Alerts */}
              {(metrics.disputed > 0 || metrics.overdue > 0) && (
                <Card className="border-0 shadow-sm border-l-4 border-l-red-500 bg-red-50">
                  <CardContent className="p-4">
                    <h3 className="font-semibold text-red-900 text-sm mb-2">Requires Attention</h3>
                    {metrics.disputed > 0 && (
                      <p className="text-xs text-red-700 mb-1">• {getStatusCount("Disputed")} disputed (${metrics.disputed.toLocaleString()})</p>
                    )}
                    {metrics.overdue > 0 && (
                      <p className="text-xs text-red-700">• {getStatusCount("Overdue")} overdue (${metrics.overdue.toLocaleString()})</p>
                    )}
                  </CardContent>
                </Card>
              )}
            </div>

            {/* Main Content */}
            <div className="flex-1 min-w-0">
              {/* Top Bar */}
              <div className="bg-white rounded-xl shadow-sm mb-4 p-3 flex items-center gap-3 flex-wrap">
                <div className="relative flex-1 min-w-[200px] max-w-md">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                  <Input
                    placeholder="Search by invoice #, client, event..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-9 h-10 bg-slate-50 border-0"
                  />
                </div>
                <div className="lg:hidden">
                  {userRole === "vendor" && (
                    <Button onClick={() => navigate(createPageUrl("InvoiceEditor"))} size="sm" className="bg-[#0A39DF]">
                      <Plus className="w-4 h-4" />
                    </Button>
                  )}
                </div>
              </div>

              {/* Stats Row - Mobile */}
              <div className="lg:hidden grid grid-cols-4 gap-2 mb-4">
                <Card className="border-0 shadow-sm">
                  <CardContent className="p-3 text-center">
                    <p className="text-lg font-bold text-slate-900">${(metrics.all / 1000).toFixed(0)}K</p>
                    <p className="text-[10px] text-slate-500">Total</p>
                  </CardContent>
                </Card>
                <Card className="border-0 shadow-sm">
                  <CardContent className="p-3 text-center">
                    <p className="text-lg font-bold text-amber-600">${(metrics.outstanding / 1000).toFixed(0)}K</p>
                    <p className="text-[10px] text-slate-500">Pending</p>
                  </CardContent>
                </Card>
                <Card className="border-0 shadow-sm">
                  <CardContent className="p-3 text-center">
                    <p className="text-lg font-bold text-red-600">{getStatusCount("Disputed")}</p>
                    <p className="text-[10px] text-slate-500">Disputed</p>
                  </CardContent>
                </Card>
                <Card className="border-0 shadow-sm">
                  <CardContent className="p-3 text-center">
                    <p className="text-lg font-bold text-emerald-600">${(metrics.paid / 1000).toFixed(0)}K</p>
                    <p className="text-[10px] text-slate-500">Paid</p>
                  </CardContent>
                </Card>
              </div>

              {/* Invoice Table */}
              <Card className="border-0 shadow-sm overflow-hidden">
                <div className="overflow-x-auto">
                  <Table>
                    <TableHeader>
                      <TableRow className="bg-slate-50 hover:bg-slate-50 border-b border-slate-200">
                        <TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide py-4">Invoice</TableHead>
                                                    <TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide">Client</TableHead>
                                                    <TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide">Event / Hub</TableHead>
                        <TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide">Date</TableHead>
                        <TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide text-right">Amount</TableHead>
                        <TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide text-center">Status</TableHead>
                        <TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide text-center">Due</TableHead>
                        <TableHead className="font-semibold text-slate-700 text-xs uppercase tracking-wide text-right">Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {filteredInvoices.length === 0 ? (
                        <TableRow>
                          <TableCell colSpan={8} className="text-center py-16">
                            <FileText className="w-12 h-12 mx-auto mb-3 text-slate-200" />
                            <p className="font-medium text-slate-500">No invoices found</p>
                            <p className="text-sm text-slate-400 mt-1">Try adjusting your search or filters</p>
                          </TableCell>
                        </TableRow>
                      ) : (
                        filteredInvoices.map((invoice) => {
                          const invoiceDate = invoice.issue_date ? parseISO(invoice.issue_date) : new Date();
                          const dateFormatted = format(invoiceDate, 'MMM d, yyyy');
                          const dueDate = invoice.due_date ? format(parseISO(invoice.due_date), 'MMM d') : '—';
                          const isOverdue = invoice.due_date && isPast(parseISO(invoice.due_date)) && invoice.status !== "Paid" && invoice.status !== "Reconciled";

                          return (
                            <TableRow 
                              key={invoice.id} 
                              className={`hover:bg-blue-50/50 cursor-pointer transition-all border-b border-slate-100 ${isOverdue ? 'bg-red-50/30' : ''}`}
                              onClick={() => navigate(createPageUrl(`InvoiceDetail?id=${invoice.id}`))}
                            >
                              <TableCell className="py-4">
                                <div className="flex items-center gap-3">
                                  <div className={`w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 ${
                                    invoice.status === 'Paid' || invoice.status === 'Reconciled' ? 'bg-emerald-100' :
                                    invoice.status === 'Disputed' ? 'bg-red-100' :
                                    invoice.status === 'Overdue' ? 'bg-amber-100' : 'bg-blue-100'
                                  }`}>
                                    <FileText className={`w-4 h-4 ${
                                      invoice.status === 'Paid' || invoice.status === 'Reconciled' ? 'text-emerald-600' :
                                      invoice.status === 'Disputed' ? 'text-red-600' :
                                      invoice.status === 'Overdue' ? 'text-amber-600' : 'text-blue-600'
                                    }`} />
                                  </div>
                                  <div>
                                    <p className="font-bold text-slate-900">{invoice.invoice_number}</p>
                                    <p className="text-xs text-slate-500">{invoice.manager_name || '—'}</p>
                                  </div>
                                </div>
                              </TableCell>
                              <TableCell>
                                <p className="font-medium text-slate-900 truncate max-w-[150px]">{invoice.business_name || '—'}</p>
                              </TableCell>
                              <TableCell>
                                <p className="font-medium text-slate-900 truncate max-w-[200px]">{invoice.event_name || 'Untitled'}</p>
                                <div className="flex items-center gap-1 mt-0.5">
                                  <MapPin className="w-3 h-3 text-slate-400" />
                                  <span className="text-xs text-slate-500">{invoice.hub || '—'}</span>
                                </div>
                              </TableCell>
                              <TableCell>
                                <span className="text-sm text-slate-700">{dateFormatted}</span>
                              </TableCell>
                              <TableCell className="text-right">
                                <span className="font-bold text-slate-900 text-lg">${invoice.amount?.toLocaleString() || 0}</span>
                              </TableCell>
                              <TableCell className="text-center">
                                <Badge className={`${statusColors[invoice.status]} px-2.5 py-1`}>
                                  {invoice.status}
                                </Badge>
                              </TableCell>
                              <TableCell className="text-center">
                                <span className={`text-sm font-medium ${isOverdue ? 'text-red-600' : 'text-slate-600'}`}>
                                  {dueDate}
                                </span>
                              </TableCell>
                              <TableCell className="text-right">
                                <Button size="sm" variant="ghost" className="hover:bg-blue-100 hover:text-blue-700">
                                  <Eye className="w-4 h-4" />
                                </Button>
                                <Button size="sm" variant="ghost" className="hover:bg-slate-100">
                                  <Edit className="w-4 h-4" />
                                </Button>
                              </TableCell>
                            </TableRow>
                          );
                        })
                      )}
                    </TableBody>
                  </Table>
                </div>

                {/* Table Footer */}
                {filteredInvoices.length > 0 && (
                  <div className="p-4 border-t border-slate-100 bg-slate-50 flex items-center justify-between">
                    <p className="text-sm text-slate-500">
                      Showing <span className="font-medium text-slate-700">{filteredInvoices.length}</span> of <span className="font-medium text-slate-700">{visibleInvoices.length}</span> invoices
                    </p>
                    <div className="flex items-center gap-2">
                      <span className="text-sm text-slate-500">Total: </span>
                      <span className="font-bold text-slate-900">${filteredInvoices.reduce((sum, inv) => sum + (inv.amount || 0), 0).toLocaleString()}</span>
                    </div>
                  </div>
                )}
              </Card>
            </div>
          </div>
        </div>
      </div>


    </>
  );
}