'use client';

import React from 'react';
import { cn } from '@/lib/utils';
import { Search, Plus, Filter, MoreHorizontal } from 'lucide-react';

interface ListViewProps {
    title: string;
    items: any[];
    renderItem: (item: any) => React.ReactNode;
    onSearch?: (term: string) => void;
    onAdd?: () => void;
    className?: string;
}

export default function AppListView({
    title,
    items,
    renderItem,
    onSearch,
    onAdd,
    className
}: ListViewProps) {
    return (
        <div className={cn("flex flex-col h-full bg-app-list-bg border-r border-border", className)}>
            <div className="p-4 border-b border-border space-y-4">
                <div className="flex items-center justify-between">
                    <h2 className="text-xl font-bold tracking-tight">{title}</h2>
                    {onAdd && (
                        <button
                            onClick={onAdd}
                            className="p-1.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
                        >
                            <Plus className="h-5 w-5" />
                        </button>
                    )}
                </div>

                {onSearch && (
                    <div className="relative">
                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                        <input
                            type="text"
                            placeholder="Buscar y pulsar Enter..."
                            defaultValue=""
                            onKeyDown={(e) => {
                                if (e.key === 'Enter') {
                                    onSearch((e.target as HTMLInputElement).value);
                                }
                            }}
                            className="w-full pl-9 pr-4 py-2 bg-background border border-input rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary/20"
                        />
                        <div className="mt-1 text-[10px] text-muted-foreground text-right italic">
                            Pulsa Enter para filtrar
                        </div>
                    </div>
                )}
            </div>

            <div className="flex-1 overflow-y-auto divide-y divide-border/50">
                {items.map((item, index) => (
                    <div key={index} className="hover:bg-secondary/30 cursor-pointer transition-colors">
                        {renderItem(item)}
                    </div>
                ))}
            </div>
        </div>
    );
}

export function AppDetailCard({ title, children, color = 'yellow', className }: { title?: string, children: React.ReactNode, color?: 'yellow' | 'blue', className?: string }) {
    return (
        <div className={cn(
            "rounded-xl border shadow-sm p-4 overflow-hidden",
            color === 'yellow' ? "bg-app-yellow-light border-app-yellow-border" : "bg-app-blue-light border-blue-200",
            className
        )}>
            {title && <h3 className="text-lg font-bold mb-4 flex items-center">{title}</h3>}
            {children}
        </div>
    );
}

export function AppTabs({ tabs, activeTab, onChange }: { tabs: { id: string, label: string }[], activeTab: string, onChange: (id: string) => void }) {
    return (
        <div className="flex border-b border-border overflow-x-auto no-scrollbar pt-2">
            {tabs.map((tab) => (
                <button
                    key={tab.id}
                    onClick={() => onChange(tab.id)}
                    className={cn(
                        "px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-[1px] whitespace-nowrap",
                        activeTab === tab.id
                            ? "border-primary text-primary"
                            : "border-transparent text-muted-foreground hover:text-foreground"
                    )}
                >
                    {tab.label}
                </button>
            ))}
        </div>
    );
}