"use client";

import { useState, useEffect } from "react";
import { Plus, TrendingUp, Filter, Receipt } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  fetchExpenses,
  fetchExpensesSummary,
  updateExpenseStatus,
} from "@/lib/supabase/expenses-actions";
import {
  STATUS_LABELS,
  STATUS_COLORS,
  formatCurrency,
  formatDateShort,
  type ExpenseStatus,
  type ExpenseWithCategory,
} from "@/lib/supabase/expenses-types";
import PageSkeleton from "./PageSkeleton";

const TABS: { label: string; value: ExpenseStatus | "all" }[] = [
  { label: "All", value: "all" },
  { label: "Draft", value: "draft" },
  { label: "Submitted", value: "submitted" },
  { label: "Approved", value: "approved" },
  { label: "Reimbursed", value: "reimbursed" },
];

export default function ExpensesListPage({ onAddExpense }: { onAddExpense: () => void }) {
  const [expenses, setExpenses] = useState<ExpenseWithCategory[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<ExpenseStatus | "all">("all");
  const [summary, setSummary] = useState<{ total: number } | null>(null);

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      fetchExpenses(activeTab),
      fetchExpensesSummary(),
    ])
      .then(([exps, sum]) => {
        if (!cancelled) {
          setExpenses(exps);
          setSummary(sum);
        }
      })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [activeTab]);

  const handleStatusChange = async (expenseId: string, newStatus: ExpenseStatus) => {
    await updateExpenseStatus(expenseId, newStatus);
    setExpenses((prev) => prev.map((e) => e.id === expenseId ? { ...e, status: newStatus } : e));
  };

  if (loading) return <PageSkeleton name="Expenses" />;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Expenses</h1>
          <p className="text-gray-500 mt-1">Track and manage business expenses</p>
        </div>
        <Button
          onClick={onAddExpense}
          className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
        >
          <Plus className="w-4 h-4" />
          Add Expense
        </Button>
      </div>

      {/* Summary cards */}
      {summary && (
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
          <div className="bg-white rounded-lg border border-gray-200 p-4">
            <p className="text-xs text-gray-500">Total Expenses</p>
            <p className="text-xl font-bold text-gray-900 mt-1">{formatCurrency(summary.total)}</p>
          </div>
          <div className="bg-white rounded-lg border border-gray-200 p-4">
            <p className="text-xs text-gray-500">Submitted</p>
            <p className="text-xl font-bold text-amber-600 mt-1">{formatCurrency(summary.total)}</p>
          </div>
          <div className="bg-white rounded-lg border border-gray-200 p-4">
            <p className="text-xs text-gray-500">Approved</p>
            <p className="text-xl font-bold text-blue-600 mt-1">{formatCurrency(summary.total)}</p>
          </div>
          <div className="bg-white rounded-lg border border-gray-200 p-4">
            <p className="text-xs text-gray-500">Reimbursed</p>
            <p className="text-xl font-bold text-emerald-600 mt-1">{formatCurrency(summary.total)}</p>
          </div>
        </div>
      )}

      {/* Tabs */}
      <div className="flex items-center gap-1 overflow-x-auto border-b border-gray-200">
        {TABS.map((tab) => (
          <button
            key={tab.value}
            onClick={() => setActiveTab(tab.value)}
            className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap cursor-pointer ${
              activeTab === tab.value
                ? "border-[#1D9E75] text-[#1D9E75]"
                : "border-transparent text-gray-500 hover:text-gray-700"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Expense list */}
      {expenses.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-center bg-white rounded-lg border border-gray-200">
          <div className="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4">
            <Receipt className="w-8 h-8 text-gray-300" />
          </div>
          <p className="text-sm text-gray-500 font-medium">No expenses found</p>
          <p className="text-xs text-gray-400 mt-1 mb-4">
            {activeTab !== "all" ? "Try a different filter" : "Add your first expense to get started"}
          </p>
          <Button
            onClick={onAddExpense}
            size="sm"
            className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
          >
            <Plus className="w-3.5 h-3.5" />
            Add Expense
          </Button>
        </div>
      ) : (
        <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-100">
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">Date</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">Vendor</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden md:table-cell">Category</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden lg:table-cell">Employee</th>
                <th className="text-right text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">Amount</th>
                <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">Status</th>
                <th className="w-10"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-50">
              {expenses.map((exp) => (
                <tr key={exp.id} className="hover:bg-gray-50/50 transition-colors">
                  <td className="py-3 px-4 text-sm text-gray-500">{formatDateShort(exp.expense_date)}</td>
                  <td className="py-3 px-4">
                    <p className="text-sm font-medium text-gray-900">{exp.vendor || "—"}</p>
                    {exp.description && <p className="text-xs text-gray-500 truncate max-w-[200px]">{exp.description}</p>}
                  </td>
                  <td className="py-3 px-4 hidden md:table-cell">
                    {exp.category ? (
                      <span className="inline-flex items-center gap-1.5 text-sm text-gray-600">
                        <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: exp.category.color }} />
                        {exp.category.name}
                      </span>
                    ) : (
                      <span className="text-sm text-gray-400">—</span>
                    )}
                  </td>
                  <td className="py-3 px-4 text-sm text-gray-600 hidden lg:table-cell">
                    {exp.employee ? `${exp.employee.first_name} ${exp.employee.last_name}` : "—"}
                  </td>
                  <td className="py-3 px-4 text-right text-sm font-semibold text-gray-900">
                    {formatCurrency(exp.amount, exp.currency)}
                  </td>
                  <td className="py-3 px-4 text-center">
                    <Badge variant="outline" className={`text-xs border ${STATUS_COLORS[exp.status as ExpenseStatus]}`}>
                      {STATUS_LABELS[exp.status as ExpenseStatus]}
                    </Badge>
                  </td>
                  <td className="py-3 px-4">
                    {/* Quick actions for submitted expenses */}
                    {exp.status === "submitted" && (
                      <div className="flex items-center gap-1 justify-end">
                        <button
                          onClick={() => handleStatusChange(exp.id, "approved")}
                          className="text-xs text-emerald-600 hover:underline font-medium cursor-pointer"
                        >
                          Approve
                        </button>
                        <button
                          onClick={() => handleStatusChange(exp.id, "rejected")}
                          className="text-xs text-red-500 hover:underline font-medium cursor-pointer"
                        >
                          Reject
                        </button>
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}