/**
 * @docs ARCHITECTURE:Interface
 * 
 * ### AI Assist Note
 * **UI Component**: High-fidelity data grid for model inventory management. 
 * Renders model nodes (Filtered by Search) and orchestrates inline editing/deletion via the model_store.
 * 
 * ### 🔍 Debugging & Observability
 * - **Failure Path**: Row key collision if multiple providers share IDs (unlikely but guarded), or table overflow with long model names.
 * - **Telemetry Link**: Search for `[Model_Inventory_Table]` or filter_models in UI logs.
 */

import { Cpu, Plus, Filter } from 'lucide-react';
import { Tooltip } from '../ui';
import { i18n } from '../../i18n';
import type { Model_Entry, Provider_Config } from '../../stores/provider_store';
import { Model_Row } from './Model_Row';

interface Model_Inventory_Table_Props {
    models: Model_Entry[];
    modality_filter: 'all' | Model_Entry['modality'];
    on_set_modality_filter: (filter: 'all' | Model_Entry['modality']) => void;
    on_add_node: () => void;
    editing_id: string | null;
    on_edit_node: (id: string | null) => void;
    on_save_node: (id: string, name: string, prov: string, modality: Model_Entry['modality'], limits: Record<string, number>) => void;
    on_delete_node: (id: string, name: string) => void;
    providers: Provider_Config[];
    children?: React.ReactNode;
}

export function Model_Inventory_Table({
    models,
    modality_filter,
    on_set_modality_filter,
    on_add_node,
    editing_id,
    on_edit_node,
    on_save_node,
    on_delete_node,
    providers,
    children
}: Model_Inventory_Table_Props) {
    return (
        <section className="space-y-6">
            <div className="flex items-center justify-between">
                <h2 className="text-[11px] font-bold text-zinc-500 uppercase tracking-[0.3em] flex items-center gap-2">
                    <Cpu size={12} className="text-green-500" />
                    {i18n.t('model_manager.inventory.title')}
                </h2>
                <div className="flex items-center gap-3">
                    <Tooltip content={i18n.t('model_manager.inventory.tooltip_provision')} position="top">
                        <button
                            onClick={on_add_node}
                            aria-label={i18n.t('model_manager.inventory.btn_add')}
                            className="flex items-center gap-1.5 text-[10px] font-bold text-green-500 hover:bg-green-500/5 px-2 py-1 rounded-md border border-green-500/10 transition-colors uppercase tracking-widest"
                        >
                            <Plus size={12} /> {i18n.t('model_manager.inventory.btn_add')}
                        </button>
                    </Tooltip>
                    <Tooltip content={i18n.t('model_manager.inventory.tooltip_filter')} position="top">
                        <div className="flex items-center gap-1 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-lg px-2 py-1 cursor-help">
                            <Filter size={10} className="text-zinc-600" />
                            <select
                                value={modality_filter}
                                onChange={(e) => on_set_modality_filter(e.target.value as 'all' | Model_Entry['modality'])}
                                className="bg-transparent border-none text-[9px] font-bold text-zinc-400 uppercase focus:ring-0 cursor-pointer"
                                aria-label={i18n.t('model_manager.aria_filter_modality')}
                            >
                                <option value="all">{i18n.t('model_manager.inventory.filter_all')}</option>
                                <option value="llm">{i18n.t('provider.label_modality_llm')}</option>
                                <option value="vision">{i18n.t('provider.label_modality_vision')}</option>
                                <option value="voice">{i18n.t('provider.label_modality_voice')}</option>
                                <option value="reasoning">{i18n.t('provider.label_modality_reasoning')}</option>
                            </select>
                        </div>
                    </Tooltip>
                </div>
            </div>

            <div className="bg-[color:var(--color-surface)]/40 backdrop-blur-xl border border-[color:var(--color-border)] rounded-3xl overflow-hidden shadow-2xl relative">
                <table className="w-full text-left text-sm border-collapse">
                    <thead className="bg-[color:color-mix(in_srgb,var(--color-background)_80%,transparent)] backdrop-blur text-zinc-500 text-[9px] uppercase tracking-[0.2em] border-b border-[color:var(--color-border)]">
                        <tr>
                            <th className="px-8 py-5 font-bold text-[11px]">{i18n.t('model_manager.inventory.col_identity')}</th>
                            <th className="px-8 py-5 font-bold text-[11px]">{i18n.t('model_manager.inventory.col_modality')}</th>
                            <th className="px-8 py-5 font-bold text-[11px]">{i18n.t('model_manager.inventory.col_provider')}</th>
                            <th className="px-8 py-5 font-bold text-right text-[11px]">{i18n.t('model_manager.inventory.col_actions')}</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-zinc-800/30 font-mono text-[11px]">
                        {children}
                        {models.map((m) => (
                            <Model_Row
                                key={m.id}
                                model={m}
                                is_editing={editing_id === m.id}
                                on_edit={() => on_edit_node(m.id)}
                                on_save={(name, prov, modality, limits) => on_save_node(m.id, name, prov, modality, limits)}
                                on_cancel={() => on_edit_node(null)}
                                on_delete={() => on_delete_node(m.id, m.name)}
                                providers={providers}
                            />
                        ))}
                    </tbody>
                </table>
            </div>
        </section>
    );
}


// Metadata: [Model_Inventory_Table]
