import { showToast } from '../../stores/toastStore';
import ServiceContextSelector from './ServiceContextSelector';

const NAV_ITEMS = [
    { key: 'dashboard',       label: 'Dashboard' },
    { key: 'work-orders',     label: 'Putni nalozi' },
    { key: 'service-records', label: 'Servisni zapisi' },
    { key: 'cranes',          label: 'Dizalice' },
    { key: 'clients',         label: 'Klijenti' },
];

export default function DashboardTopbar({
    activeSection,
    onSectionChange,
    onOpenWorkOrderModal,
    onOpenTaskModal,
    pendingSyncCount,
    onNewServiceRecord,
    showSectionNav = true,
}) {
    const sectionTitle = NAV_ITEMS.find((item) => item.key === activeSection)?.label || 'Dashboard';

    return (
        <header className="sticky top-0 z-20 border-b border-border-hairline bg-canvas-elevated/95 backdrop-blur">
            {/* ── Gornji red ───────────────────────────────────────── */}
            <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6">
                <div>
                    <p className="text-xs uppercase tracking-wide text-text-muted">Pregled sustava</p>
                    <h2 className="text-xl font-semibold text-text-main">{sectionTitle}</h2>
                </div>
                <div className="flex items-center gap-3">
                    {pendingSyncCount > 0 && (
                        <span className="rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-700">
                            Offline queue: {pendingSyncCount}
                        </span>
                    )}
                    <button
                        type="button"
                        onClick={onOpenWorkOrderModal}
                        className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-sm font-medium text-text-main hover:bg-canvas-deep"
                    >
                        + Novi putni nalog
                    </button>
                    <button
                        type="button"
                        onClick={onOpenTaskModal}
                        className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-sm font-medium text-text-main hover:bg-canvas-deep"
                    >
                        + Novi radni zadatak
                    </button>
                </div>
            </div>

            {/* ── Selector bar: Kupac + Dizalica ───────────────────── */}
            <ServiceContextSelector onNewServiceRecord={onNewServiceRecord} />

            {/* ── Navigacijski tabovi ──────────────────────────────── */}
            {showSectionNav && (
                <nav className="overflow-x-auto border-t border-border-hairline px-4 sm:px-6">
                    <ul className="flex min-w-max items-center gap-1 py-2 text-sm">
                        {NAV_ITEMS.map((item) => (
                            <li key={item.key}>
                                <button
                                    type="button"
                                    onClick={() => {
                                        onSectionChange(item.key);
                                    }}
                                    className={
                                        activeSection === item.key
                                            ? 'rounded-lg bg-indigo-50 px-3 py-2 font-medium text-indigo-700'
                                            : 'rounded-lg px-3 py-2 text-text-main hover:bg-canvas-deep'
                                    }
                                >
                                    {item.label}
                                </button>
                            </li>
                        ))}
                    </ul>
                </nav>
            )}
        </header>
    );
}