import { Show } from 'solid-js';
import type { Component } from 'solid-js';
import { PanelLeftOpen, PanelLeftClose, Calculator, Plus, FileUp, Upload, Table, Download, History, Save } from 'lucide-solid';
import { appStore } from '../../store/appStore';

interface BuilderHeaderProps {
    isSidebarCollapsed: boolean;
    onToggleSidebar: () => void;
    onAddScope: () => void;
    onReset: () => void;
    onImportEstimate: (e: Event) => void;
    onShowExportTableModal: () => void;
    onExportEstimate: () => void;
    onShowLoadModal: () => void;
    onShowSaveModal: () => void;
    onShowHistoryModal: () => void;
    onSaveChanges: () => void;
}

export const BuilderHeader: Component<BuilderHeaderProps> = (props) => {
    const { scopes, estimateItems: items } = appStore;

    return (
        <div class="min-h-[4rem] py-3 px-6 border-b border-border bg-background/50 flex flex-wrap gap-y-4 items-center justify-between sticky top-0 z-50 backdrop-blur-md">
            <div class="flex items-center gap-4">
                <button
                    onClick={props.onToggleSidebar}
                    class="p-2 hover:bg-accent rounded-xl transition-colors text-muted-foreground shrink-0"
                    title={props.isSidebarCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
                >
                    {props.isSidebarCollapsed ? <PanelLeftOpen class="w-5 h-5" /> : <PanelLeftClose class="w-5 h-5" />}
                </button>
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-primary rounded-xl text-primary-foreground shadow-md shadow-primary/20 shrink-0">
                        <Calculator class="w-5 h-5" />
                    </div>
                    <div>
                        <h2 class="text-lg font-black text-foreground tracking-tight leading-none">Estimate <span class="text-primary">Builder</span></h2>
                        <div class="flex items-center gap-2 text-muted-foreground text-[10px] font-bold uppercase tracking-wider mt-0.5">
                            <span>{scopes.length} Scopes</span>
                            <span class="text-border">•</span>
                            <span>{items.length} Items</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <button
                    onClick={props.onAddScope}
                    class="flex items-center gap-2 px-4 py-2 bg-foreground text-background rounded-xl text-sm font-bold hover:bg-foreground/90 transition-all shadow-lg shadow-foreground/10 mr-2"
                >
                    <Plus class="w-4 h-4" /> New Scope
                </button>
                <button
                    onClick={props.onReset}
                    class="flex items-center gap-2 px-3 py-2 bg-muted/50 text-primary rounded-xl text-xs font-black hover:bg-primary/10 transition-all border border-border"
                >
                    <FileUp class="w-4 h-4" /> New CSV
                </button>
                <div class="h-6 w-px bg-border mx-1"></div>
                <label class="flex items-center gap-2 px-3 py-2 bg-muted text-muted-foreground rounded-xl text-xs font-bold hover:bg-accent hover:text-accent-foreground transition-all border border-border cursor-pointer">
                    <Upload class="w-4 h-4" /> Import JSON
                    <input type="file" accept=".json" class="hidden" onChange={props.onImportEstimate} />
                </label>
                <button
                    onClick={props.onShowExportTableModal}
                    class="flex items-center gap-2 px-3 py-2 bg-muted text-muted-foreground rounded-xl text-xs font-bold hover:bg-accent hover:text-accent-foreground transition-all border border-border mr-2"
                >
                    <Table class="w-4 h-4" /> Export Table
                </button>
                <button
                    onClick={props.onExportEstimate}
                    class="flex items-center gap-2 px-3 py-2 bg-muted text-muted-foreground rounded-xl text-xs font-bold hover:bg-accent hover:text-accent-foreground transition-all border border-border mr-2"
                >
                    <Download class="w-4 h-4" /> Export JSON
                </button>
                <div class="h-6 w-px bg-border mx-1"></div>
                <button
                    onClick={props.onShowLoadModal}
                    class="flex items-center gap-2 px-3 py-2 bg-blue-50 text-blue-600 rounded-xl text-xs font-bold hover:bg-blue-100 transition-all border border-blue-200"
                >
                    <Download class="w-4 h-4" /> Load
                </button>

                <Show when={appStore.estimateId()}>
                    <button
                        onClick={props.onShowHistoryModal}
                        class="flex items-center gap-2 px-3 py-2 bg-purple-50 text-purple-600 rounded-xl text-xs font-bold hover:bg-purple-100 transition-all border border-purple-200"
                    >
                        <History class="w-4 h-4" /> History
                    </button>
                    
                    <button
                        onClick={props.onSaveChanges}
                        class="flex items-center gap-2 px-3 py-2 bg-green-50 text-green-600 rounded-xl text-xs font-bold hover:bg-green-100 transition-all border border-green-200"
                    >
                        <Save class="w-4 h-4" />
                        {appStore.isLatestVersion() ? 'Save Changes' : 'Save as Newest'}
                    </button>
                </Show>

                <button
                    onClick={props.onShowSaveModal}
                    class="flex items-center gap-4 py-2 px-4 bg-primary text-primary-foreground rounded-xl text-sm font-bold hover:bg-primary/90 transition-all shadow-lg shadow-primary/10"
                >
                    <Upload class="w-4 h-4" /> Save New
                </button>
            </div>
        </div>
    );
};