import React, { useState } from 'react';
import { __ } from '@wordpress/i18n';
import TagManager from './TagManager';
import ExpenseExplorerPanel from './ExpenseExplorerPanel';

const TagDashboard = () => {
    const [selectedTag, setSelectedTag] = useState(null);

    return (
        <div className="manfiet-page-shell">
            <div className="manfiet-page-hero">
                <div className="left-section">
                    <h2 className="manfiet-page-title">{__('Manage Expense Tags', 'manfi-expense-tracker')}</h2>
                    <p className="manfiet-page-subtitle">{__('Click any tag name to see expenses using that tag.', 'manfi-expense-tracker')}</p>
                </div>
            </div>

            <TagManager
                clickableNames={true}
                activeTagName={selectedTag?.tag_name || ''}
                onTagClick={(tag) => setSelectedTag(tag)}
            />

            {selectedTag && (
                <ExpenseExplorerPanel
                    title={__('Expenses by Tag', 'manfi-expense-tracker') + ': ' + selectedTag.tag_name}
                    filter={{ tag_name: selectedTag.tag_name }}
                />
            )}
        </div>
    );
};

export default TagDashboard;
