'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/auth';
import { expenseApi } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { formatDate, formatCurrency } from '@/lib/utils';
import { toast } from '@/lib/toast';
import { useConfirm } from '@/components/common/feedback/ConfirmProvider';
import { useTranslation } from '@/hooks/useTranslation';
import { PageState } from '@/components/common/feedback/PageState';
import { buildLoginRedirectUrl, getCurrentRelativePath } from '@/lib/auth-redirect';

export default function ExpensesPage() {
  const router = useRouter();
  const { isAuthenticated } = useAuth();
  const { t } = useTranslation();
  const [expenses, setExpenses] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<'all' | 'draft' | 'pending' | 'approved'>('all');
  const confirm = useConfirm();

  useEffect(() => {
    if (!isAuthenticated) {
      router.replace(buildLoginRedirectUrl(getCurrentRelativePath()));
      return;
    }
    loadExpenses();
  }, [isAuthenticated, filter]);

  const loadExpenses = async () => {
    try {
      setLoading(true);
      const response: any = await expenseApi.getMyExpenses(
        filter !== 'all' ? { status: filter.toUpperCase() } : {}
      );
      setExpenses(response.data?.data || []);
    } catch (error) {
      console.error('Failed to load expenses:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id: string) => {
    const confirmed = await confirm({
      title: t.expenses.confirm.deleteTitle,
      variant: 'danger',
    });
    if (!confirmed) return;
    try {
      await expenseApi.deleteExpense(id);
      loadExpenses();
    } catch (error) {
      console.error('Failed to delete expense:', error);
      toast.error(t.expenses.error.deleteFailed);
    }
  };

  const getStatusBadge = (status: string) => {
    const colors = {
      DRAFT: 'bg-gray-200 text-gray-800',
      PENDING: 'bg-yellow-200 text-yellow-800',
      APPROVED: 'bg-green-200 text-green-800',
      REJECTED: 'bg-red-200 text-red-800',
    };
    const labels = {
      DRAFT: t.expenses.status.DRAFT,
      PENDING: t.expenses.status.PENDING,
      APPROVED: t.expenses.status.APPROVED,
      REJECTED: t.expenses.status.REJECTED,
    };
    return (
      <span className={`px-2 py-1 text-xs font-semibold rounded-full ${colors[status as keyof typeof colors]}`}>
        {labels[status as keyof typeof labels]}
      </span>
    );
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <nav className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <button onClick={() => router.push('/overview')} className="mr-4">
                <svg className="h-6 w-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
              </button>
              <h1 className="text-xl font-semibold text-gray-900">{t.expenses.title}</h1>
            </div>
            <div className="flex items-center">
              <Button onClick={() => router.push('/expenses/new')}>
                <svg className="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                </svg>
                {t.expenses.create}
              </Button>
            </div>
          </div>
        </div>
      </nav>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 筛选器 */}
        <div className="bg-white rounded-lg shadow p-4 mb-6">
          <div className="flex space-x-2">
            <Button
              variant={filter === 'all' ? 'default' : 'outline'}
              size="sm"
              onClick={() => setFilter('all')}
            >
              {t.expenses.filters.all}
            </Button>
            <Button
              variant={filter === 'draft' ? 'default' : 'outline'}
              size="sm"
              onClick={() => setFilter('draft')}
            >
              {t.expenses.filters.draft}
            </Button>
            <Button
              variant={filter === 'pending' ? 'default' : 'outline'}
              size="sm"
              onClick={() => setFilter('pending')}
            >
              {t.expenses.filters.pending}
            </Button>
            <Button
              variant={filter === 'approved' ? 'default' : 'outline'}
              size="sm"
              onClick={() => setFilter('approved')}
            >
              {t.expenses.filters.approved}
            </Button>
          </div>
        </div>

        {/* 报销单列表 */}
        {loading ? (
          <PageState
            variant="loading"
            title={t.expenses.loading}
            layout="card"
            className="mx-auto w-full max-w-2xl"
          />
        ) : expenses.length === 0 ? (
          <PageState
            variant="empty"
            title={t.expenses.emptyTitle}
            description={t.expenses.emptyDesc}
            actionLabel={t.expenses.emptyAction}
            onAction={() => router.push('/expenses/new')}
            layout="card"
            className="mx-auto w-full max-w-2xl"
          />
        ) : (
          <div className="bg-white rounded-lg shadow overflow-hidden">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {t.expenses.columns.number}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {t.expenses.columns.title}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {t.expenses.columns.amount}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {t.expenses.columns.status}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {t.expenses.columns.createdAt}
                  </th>
                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                    {t.expenses.columns.actions}
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {expenses.map((expense) => (
                  <tr key={expense.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                      {expense.expenseNo}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {expense.title}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {formatCurrency(expense.totalAmount)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap">
                      {getStatusBadge(expense.status)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      {formatDate(expense.createdAt)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => router.push(`/expenses/${expense.id}`)}
                      >
                        {t.expenses.actions.view}
                      </Button>
                      {expense.status === 'DRAFT' && (
                        <>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => router.push(`/expenses/${expense.id}/edit`)}
                          >
                            {t.expenses.actions.edit}
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDelete(expense.id)}
                          >
                            {t.expenses.actions.delete}
                          </Button>
                        </>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}