import React, { useState, useEffect } from 'react';
import Toast from '../Components/Toast';
import MasterTable from './MasterTable';
import { Tag, Briefcase, Box, Plus, CreditCard } from 'lucide-react';

export default function MasterManagement() {
    const [activeTab, setActiveTab] = useState('collection');
    const [toast, setToast] = useState(null);

    const tabs = [
        { id: 'collection', label: 'Collection Types', icon: Tag, desc: 'Manage categories for payment collection.', btnLabel: 'Type' },
        { id: 'expense', label: 'Expense Categories', icon: Briefcase, desc: 'Organize various types of business expenses.', btnLabel: 'Category' },
        { id: 'product', label: 'Product Categories', icon: Box, desc: 'Group products into searchable categories.', btnLabel: 'Category' },
        { id: 'payment_method', label: 'Payment Methods', icon: CreditCard, desc: 'Manage available payment methods.', btnLabel: 'Method' }
    ];

    const currentTab = tabs.find(t => t.id === activeTab);

    return (
        <>
            {toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}

            <div className="max-w-7xl mx-auto px-8 py-8">
                <div className="mb-8">
                    <h1 className="text-2xl font-bold text-[#111827]">Master Management</h1>
                    <p className="text-gray-500 mt-1">Configure system-wide master data and dropdown values.</p>
                </div>

                {/* Tabs */}
                <div className="flex items-center gap-8 border-b border-gray-100 mb-8">
                    {tabs.map((tab) => (
                        <button
                            key={tab.id}
                            onClick={() => setActiveTab(tab.id)}
                            className={`pb-4 px-2 text-sm font-semibold transition-all border-b-2 ${
                                activeTab === tab.id
                                    ? 'border-red-500 text-red-500'
                                    : 'border-transparent text-gray-500 hover:text-gray-700'
                            }`}
                        >
                            {tab.label}
                        </button>
                    ))}
                </div>

                {/* Content */}
                <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                    <div className="p-6 border-b border-gray-50 flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="p-2.5 bg-red-50 rounded-xl text-red-500">
                                <currentTab.icon size={20} />
                            </div>
                            <div>
                                <h2 className="font-bold text-[#111827]">{currentTab.label}</h2>
                                <p className="text-xs text-gray-500">{currentTab.desc}</p>
                            </div>
                        </div>
                    </div>

                    <MasterTable 
                        type={activeTab} 
                        btnLabel={currentTab.btnLabel}
                        onNotify={(msg, type) => setToast({ message: msg, type })} 
                    />
                </div>
            </div>
        </>
    );
}