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";
import CreateInvoiceModal from "../components/invoices/CreateInvoiceModal";

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 [showCreateModal, setShowCreateModal] = useState(false);

  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-8 bg-slate-50 min-h-screen">
        <div className="max-w-[1600px] mx-auto">
          <PageHeader
            title="Invoices"
            subtitle={`${filteredInvoices.length} invoices • $${metrics.all.toLocaleString()} total`}
            actions={
              userRole === "vendor" && (
                <Button onClick={() => setShowCreateModal(true)} className="bg-[#0A39DF] hover:bg-[#0A39DF]/90">
                  <Plus className="w-5 h-5 mr-2" />
                  Create Invoice
                </Button>
              )
            }
          />

          {/* Alert Banners */}
          {metrics.disputed > 0 && (
            <div className="mb-6 p-4 bg-red-50 border-l-4 border-red-500 rounded-lg flex items-center gap-3">
              <AlertTriangle className="w-5 h-5 text-red-600" />
              <div>
                <p className="font-semibold text-red-900">Disputed Invoices Require Attention</p>
                <p className="text-sm text-red-700">{getStatusCount("Disputed")} invoices are currently disputed</p>
              </div>
            </div>
          )}

          {metrics.overdue > 0 && userRole === "client" && (
            <div className="mb-6 p-4 bg-amber-50 border-l-4 border-amber-500 rounded-lg flex items-center gap-3">
              <Clock className="w-5 h-5 text-amber-600" />
              <div>
                <p className="font-semibold text-amber-900">Overdue Payments</p>
                <p className="text-sm text-amber-700">${metrics.overdue.toLocaleString()} in overdue invoices</p>
              </div>
            </div>
          )}

          {/* Status Tabs */}
          <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
            <TabsList className="bg-slate-100 border border-slate-200 h-auto p-1.5 flex-wrap gap-1">
              <TabsTrigger 
                value="all" 
                className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
              >
                <FileText className="w-4 h-4 mr-2" />
                All 
                <Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("all")}</Badge>
              </TabsTrigger>
              <TabsTrigger 
                value="PENDING"
                className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
              >
                <Clock className="w-4 h-4 mr-2" />
                Pending 
                <Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Pending Review")}</Badge>
              </TabsTrigger>
              <TabsTrigger 
                value="approved"
                className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
              >
                <CheckCircle className="w-4 h-4 mr-2" />
                Approved 
                <Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Approved")}</Badge>
              </TabsTrigger>
              <TabsTrigger 
                value="disputed"
                className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
              >
                <AlertTriangle className="w-4 h-4 mr-2" />
                Disputed 
                <Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Disputed")}</Badge>
              </TabsTrigger>
              <TabsTrigger 
                value="overdue"
                className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
              >
                <AlertTriangle className="w-4 h-4 mr-2" />
                Overdue 
                <Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Overdue")}</Badge>
              </TabsTrigger>
              <TabsTrigger 
                value="paid"
                className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
              >
                <CheckCircle className="w-4 h-4 mr-2" />
                Paid 
                <Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Paid")}</Badge>
              </TabsTrigger>
              <TabsTrigger 
                value="reconciled"
                className="data-[state=active]:bg-blue-600 data-[state=active]:text-white bg-white text-slate-700 hover:bg-slate-50 transition-all rounded-md px-3 py-2"
              >
                <CheckCircle className="w-4 h-4 mr-2" />
                Reconciled 
                <Badge className="ml-2 bg-yellow-400 text-yellow-900 hover:bg-yellow-400 border-0 font-bold">{getStatusCount("Reconciled")}</Badge>
              </TabsTrigger>
            </TabsList>
          </Tabs>

          {/* Metric Cards */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <Card className="border-0 bg-blue-50 shadow-sm hover:shadow-md transition-all">
              <CardContent className="p-5">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center flex-shrink-0">
                    <FileText className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-xs text-blue-600 uppercase tracking-wider font-semibold mb-0.5">Total Value</p>
                    <p className="text-2xl font-bold text-blue-700">${metrics.all.toLocaleString()}</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="border-0 bg-amber-50 shadow-sm hover:shadow-md transition-all">
              <CardContent className="p-5">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-amber-500 rounded-xl flex items-center justify-center flex-shrink-0">
                    <DollarSign className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-xs text-amber-600 uppercase tracking-wider font-semibold mb-0.5">Outstanding</p>
                    <p className="text-2xl font-bold text-amber-700">${metrics.outstanding.toLocaleString()}</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="border-0 bg-red-50 shadow-sm hover:shadow-md transition-all">
              <CardContent className="p-5">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-red-500 rounded-xl flex items-center justify-center flex-shrink-0">
                    <AlertTriangle className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-xs text-red-600 uppercase tracking-wider font-semibold mb-0.5">Disputed</p>
                    <p className="text-2xl font-bold text-red-700">${metrics.disputed.toLocaleString()}</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="border-0 bg-emerald-50 shadow-sm hover:shadow-md transition-all">
              <CardContent className="p-5">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-emerald-500 rounded-xl flex items-center justify-center flex-shrink-0">
                    <CheckCircle className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <p className="text-xs text-emerald-600 uppercase tracking-wider font-semibold mb-0.5">Paid</p>
                    <p className="text-2xl font-bold text-emerald-700">${metrics.paid.toLocaleString()}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Smart Insights Banner */}
          <div className="mb-6 bg-slate-100 rounded-2xl p-6 shadow-sm border border-slate-200">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-amber-500 rounded-xl flex items-center justify-center">
                <Sparkles className="w-5 h-5 text-white" />
              </div>
              <div>
                <h3 className="text-lg font-bold text-slate-900">Smart Insights</h3>
                <p className="text-sm text-slate-500">AI-powered analysis of your invoice performance</p>
              </div>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div className="bg-white rounded-xl p-4 border border-slate-200">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium text-slate-500">This Month</span>
                  <div className={`flex items-center gap-1 ${insights.isGrowth ? 'text-emerald-600' : 'text-red-600'}`}>
                    {insights.isGrowth ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
                    <span className="text-xs font-bold">{insights.percentChange}%</span>
                  </div>
                </div>
                <p className="text-2xl font-bold text-slate-900">${insights.currentTotal.toLocaleString()}</p>
                <p className="text-xs text-slate-400 mt-1">{insights.currentMonthCount} invoices</p>
              </div>

              <div className="bg-white rounded-xl p-4 border border-slate-200">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium text-slate-500">Avg. Payment Time</span>
                  <Calendar className="w-4 h-4 text-slate-400" />
                </div>
                <p className="text-2xl font-bold text-slate-900">{insights.avgDays} days</p>
                <p className="text-xs text-slate-400 mt-1">From issue to payment</p>
              </div>

              <div className="bg-white rounded-xl p-4 border border-slate-200">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium text-slate-500">On-Time Rate</span>
                  <CheckCircle className="w-4 h-4 text-slate-400" />
                </div>
                <p className="text-2xl font-bold text-slate-900">{insights.onTimeRate}%</p>
                <p className="text-xs text-slate-400 mt-1">Paid before due date</p>
              </div>

              <div className="bg-white rounded-xl p-4 border border-slate-200">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium text-slate-500">
                    {userRole === "client" ? "Best Hub" : "Top Client"}
                  </span>
                  <ArrowUpRight className="w-4 h-4 text-slate-400" />
                </div>
                {userRole === "client" ? (
                  <>
                    <p className="text-lg font-bold text-slate-900 truncate">{insights.bestHub?.hub || "—"}</p>
                    <p className="text-xs text-slate-400 mt-1">{insights.bestHub?.rate || 0}% on-time</p>
                  </>
                ) : (
                  <>
                    <p className="text-lg font-bold text-slate-900 truncate">{insights.topClient?.name || "—"}</p>
                    <p className="text-xs text-slate-400 mt-1">${insights.topClient?.amount.toLocaleString() || 0}</p>
                  </>
                )}
              </div>
            </div>
          </div>

          {/* Search */}
          <div className="bg-white rounded-lg p-4 mb-6 border border-slate-200">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
              <Input
                placeholder="Search by invoice number, client, event..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>

          {/* Invoices Table */}
          <Card className="border-slate-200 shadow-lg">
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow className="bg-slate-50 hover:bg-slate-50">
                    <TableHead className="text-slate-600 font-semibold uppercase text-xs">Invoice #</TableHead>
                    <TableHead className="text-slate-600 font-semibold uppercase text-xs">Hub</TableHead>
                    <TableHead className="text-slate-600 font-semibold uppercase text-xs">Event</TableHead>
                    <TableHead className="text-slate-600 font-semibold uppercase text-xs">Manager</TableHead>
                    <TableHead className="text-slate-600 font-semibold uppercase text-xs">Date & Time</TableHead>
                    <TableHead className="text-slate-600 font-semibold uppercase text-xs">Amount</TableHead>
                    <TableHead className="text-slate-600 font-semibold uppercase text-xs">Status</TableHead>
                    <TableHead className="text-slate-600 font-semibold uppercase text-xs">Action</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredInvoices.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={8} className="text-center py-12 text-slate-500">
                        <FileText className="w-12 h-12 mx-auto mb-3 text-slate-300" />
                        <p className="font-medium">No invoices found</p>
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredInvoices.map((invoice) => {
                      const invoiceDate = parseISO(invoice.issue_date);
                      const dayOfWeek = format(invoiceDate, 'EEEE');
                      const dateFormatted = format(invoiceDate, 'MM.dd.yy');

                      return (
                        <TableRow key={invoice.id} className="hover:bg-slate-50 transition-all border-b border-slate-100">
                          <TableCell className="font-bold text-slate-900">{invoice.invoice_number}</TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <MapPin className="w-4 h-4 text-purple-600" />
                              <span className="text-slate-900 font-medium">{invoice.hub || "—"}</span>
                            </div>
                          </TableCell>
                          <TableCell className="text-slate-900 font-medium">{invoice.event_name}</TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <User className="w-4 h-4 text-slate-400" />
                              <span className="text-slate-700">{invoice.manager_name || invoice.created_by || "—"}</span>
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="space-y-0.5">
                              <div className="text-slate-900 font-medium">{dateFormatted}</div>
                              <div className="flex items-center gap-1.5 text-xs text-slate-500">
                                <Clock className="w-3 h-3" />
                                <span>{dayOfWeek}</span>
                              </div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                                <DollarSign className="w-3 h-3 text-white" />
                              </div>
                              <span className="font-bold text-slate-900">${invoice.amount?.toLocaleString()}</span>
                            </div>
                          </TableCell>
                          <TableCell>
                            <Badge className={`${statusColors[invoice.status]} px-3 py-1 rounded-md text-xs`}>
                              {invoice.status}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => navigate(createPageUrl(`InvoiceDetail?id=${invoice.id}`))}
                              className="font-semibold hover:bg-blue-50 hover:text-[#0A39DF]"
                            >
                              <Eye className="w-4 h-4 mr-2" />
                              View
                            </Button>
                          </TableCell>
                        </TableRow>
                      );
                    })
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </div>
      </div>

      <CreateInvoiceModal
        open={showCreateModal}
        onClose={() => setShowCreateModal(false)}
      />
    </>
  );
}