import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import api from '../utils/api';
import Icon from '../components/Icon';
import { formatStoreCurrency } from '../Helpers';
import { useToast } from '../App';
import LoadingState from '../components/LoadingState';
import ConfirmDialog from '../components/ConfirmDialog';

const CATEGORY_CLASS = {
    Operating: 'cat-operating',
    Marketing: 'cat-marketing',
    Inventory: 'cat-inventory',
    Shipping: 'cat-shipping',
    Software: 'cat-software',
    Salaries: 'cat-salaries',
    Other: 'cat-other',
};

const getCategoryClass = (category) => CATEGORY_CLASS[category] || CATEGORY_CLASS.Other;

// View modal for a single expense
const ExpenseViewModal = ({ expense, onClose }) => {
    if (!expense) return null;
    const formatDate = (d) => new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' });
    const isRecurring = expense.is_recurring == 1;

    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content expense-view-modal" onClick={e => e.stopPropagation()}>
                <div className="expense-view-header">
                    <div className="expense-view-title-group">
                        <div className="expense-view-icon">
                            <Icon name="receipt" size={20} />
                        </div>
                        <div>
                            <h3 className="expense-view-name">{expense.name}</h3>
                            <span className="expense-view-date">{formatDate(expense.expense_date)}</span>
                        </div>
                    </div>
                    <button className="expense-view-close" onClick={onClose}>×</button>
                </div>
                <div className="expense-view-body">
                    <div className="expense-view-grid">
                        <div className="expense-view-field">
                            <div className="expense-view-field-label">Amount</div>
                            <div className="expense-view-field-value is-amount">{formatStoreCurrency(expense.amount)}</div>
                        </div>
                        <div className="expense-view-field">
                            <div className="expense-view-field-label">Category</div>
                            <div className="expense-view-field-value">{expense.category}</div>
                        </div>
                    </div>
                    <div className="expense-view-grid">
                        <div className="expense-view-field">
                            <div className="expense-view-field-label">Recurring</div>
                            <div className={`expense-view-field-value ${isRecurring ? 'is-recurring-yes' : 'is-recurring-no'}`}>
                                {isRecurring ? '✓ Yes' : 'No'}
                            </div>
                        </div>
                        <div className="expense-view-field">
                            <div className="expense-view-field-label">Date</div>
                            <div className="expense-view-field-value">{new Date(expense.expense_date).toLocaleDateString()}</div>
                        </div>
                    </div>
                    {expense.notes && (
                        <div className="expense-view-field">
                            <div className="expense-view-field-label">Notes</div>
                            <div className="expense-view-notes-value">{expense.notes}</div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

const Expenses = () => {
    const [expenses, setExpenses] = useState([]);
    const [loading, setLoading] = useState(true);
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [totalAmount, setTotalAmount] = useState(0);
    const [deleteConfirm, setDeleteConfirm] = useState({ isOpen: false, id: null });
    const [viewExpense, setViewExpense] = useState(null);
    const { showSuccess, showError } = useToast();
    const navigate = useNavigate();
    const limit = 50;

    const formatDate = (d) => new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });

    useEffect(() => { loadExpenses(); }, [page]);

    const loadExpenses = async () => {
        setLoading(true);
        try {
            const offset = (page - 1) * limit;
            const res = await api.getExpenses({ limit, offset });
            if (res.success) {
                setExpenses(res.expenses || []);
                setTotal(res.total || 0);
                setTotalAmount(res.total_amount || 0);
            }
        } catch (err) {
            showError('Failed to load expenses');
        } finally {
            setLoading(false);
        }
    };

    const handleDelete = async () => {
        if (!deleteConfirm.id) return;
        try {
            const res = await api.deleteExpense(deleteConfirm.id);
            if (res.success) { showSuccess('Expense deleted'); loadExpenses(); }
        } catch { showError('Failed to delete expense'); }
        finally { setDeleteConfirm({ isOpen: false, id: null }); }
    };

    const totalPages = Math.ceil(total / limit);

    return (
        <div className="page expenses-page">

            {/* Header */}
            <div className="expenses-header">
                <div>
                    <h1 className="expenses-title">Expenses</h1>
                    <p className="expenses-subtitle">Track and manage your business operating costs</p>
                </div>
                <button className="btn btn-primary expenses-add-btn" onClick={() => navigate('/expenses/add')}>
                    <Icon name="plus" size={16} /> Add Expense
                </button>
            </div>

            {/* Summary cards */}
            {!loading && expenses.length > 0 && (
                <div className="expenses-summary">
                    <div className="expenses-summary-card">
                        <div className="expenses-summary-label">Total (This Page)</div>
                        <div className="expenses-summary-value is-amount">{formatStoreCurrency(totalAmount)}</div>
                    </div>
                    <div className="expenses-summary-card">
                        <div className="expenses-summary-label">Entries</div>
                        <div className="expenses-summary-value">{total}</div>
                    </div>
                    <div className="expenses-summary-card">
                        <div className="expenses-summary-label">Recurring</div>
                        <div className="expenses-summary-value is-recurring">{expenses.filter(e => e.is_recurring == 1).length}</div>
                    </div>
                </div>
            )}

            {/* Content */}
            {loading ? (
                <LoadingState message="Loading expenses..." />
            ) : expenses.length === 0 ? (
                <div className="expenses-empty">
                    <div className="expenses-empty-icon">
                        <Icon name="receipt" size={56} />
                    </div>
                    <h3>No Expenses Yet</h3>
                    <p>Start tracking your business costs to see accurate profit calculations.</p>
                    <button className="btn btn-primary" onClick={() => navigate('/expenses/add')}>Add Your First Expense</button>
                </div>
            ) : (
                <div className="expenses-table-card">
                    <div className="expenses-table-scroll">
                        <table className="expenses-table">
                            <thead>
                                <tr>
                                    <th className="col-date">Date</th>
                                    <th className="col-name">Name</th>
                                    <th className="col-category">Category</th>
                                    <th className="col-amount">Amount</th>
                                    <th className="col-recurring">Recurring</th>
                                    <th className="col-notes">Notes</th>
                                    <th className="col-actions">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {expenses.map((expense) => {
                                    const isRecurring = expense.is_recurring == 1;
                                    return (
                                        <tr key={expense.id} className="expenses-row">
                                            <td className="expenses-cell-date">
                                                {formatDate(expense.expense_date)}
                                            </td>
                                            <td className="expenses-cell-name">
                                                <div className="expenses-name-text">{expense.name}</div>
                                            </td>
                                            <td className="expenses-cell-category">
                                                <span className={`expenses-category-badge ${getCategoryClass(expense.category)}`}>
                                                    {expense.category}
                                                </span>
                                            </td>
                                            <td className="expenses-cell-amount">
                                                {formatStoreCurrency(expense.amount)}
                                            </td>
                                            <td className="expenses-cell-recurring">
                                                {isRecurring ? (
                                                    <span className="expenses-recurring-badge">
                                                        <Icon name="refresh" size={11} /> Yes
                                                    </span>
                                                ) : (
                                                    <span className="expenses-recurring-dash">—</span>
                                                )}
                                            </td>
                                            <td className="expenses-cell-notes">
                                                {expense.notes ? (
                                                    <div className="expenses-notes-text">{expense.notes}</div>
                                                ) : (
                                                    <span className="expenses-notes-empty">—</span>
                                                )}
                                            </td>
                                            <td className="expenses-cell-actions">
                                                <div className="expenses-row-actions">
                                                    {/* View */}
                                                    <button
                                                        className="expenses-action-btn is-view"
                                                        onClick={() => setViewExpense(expense)}
                                                        title="View Details"
                                                    >
                                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" />
                                                        </svg>
                                                    </button>
                                                    {/* Edit */}
                                                    <button
                                                        className="expenses-action-btn is-edit"
                                                        onClick={() => navigate(`/expenses/edit/${expense.id}`)}
                                                        title="Edit"
                                                    >
                                                        <Icon name="edit" size={14} />
                                                    </button>
                                                    {/* Delete */}
                                                    <button
                                                        className="expenses-action-btn is-delete"
                                                        onClick={() => setDeleteConfirm({ isOpen: true, id: expense.id })}
                                                        title="Delete"
                                                    >
                                                        <Icon name="trash" size={14} />
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    );
                                })}
                            </tbody>
                            {/* Footer total */}
                            <tfoot>
                                <tr>
                                    <td colSpan={3} className="expenses-table-footer-label">
                                        Page Total ({expenses.length} entries)
                                    </td>
                                    <td className="expenses-table-footer-amount">
                                        {formatStoreCurrency(totalAmount)}
                                    </td>
                                    <td colSpan={3} />
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    {/* Pagination */}
                    {totalPages > 1 && (
                        <div className="expenses-pagination">
                            <span className="expenses-pagination-info">
                                Showing {(page - 1) * limit + 1}–{Math.min(page * limit, total)} of {total}
                            </span>
                            <div className="expenses-pagination-actions">
                                <button className="btn btn-secondary btn-sm" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}>← Prev</button>
                                <button className="btn btn-secondary btn-sm" onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages}>Next →</button>
                            </div>
                        </div>
                    )}
                </div>
            )}

            {/* View modal */}
            {viewExpense && <ExpenseViewModal expense={viewExpense} onClose={() => setViewExpense(null)} />}

            <ConfirmDialog
                isOpen={deleteConfirm.isOpen}
                onClose={() => setDeleteConfirm({ isOpen: false, id: null })}
                onConfirm={handleDelete}
                title="Delete Expense"
                confirmText="Delete"
                confirmButtonClass="btn-danger"
            >
                <p>Are you sure you want to delete this expense? This action cannot be undone.</p>
            </ConfirmDialog>
        </div>
    );
};

export default Expenses;