/**
 * Page Template
 * 
 * Copy this file to create a new page:
 * 1. cp src/templates/PageTemplate.tsx src/pages/MyNewPage.tsx
 * 2. Replace "PageTemplate" with your page name
 * 3. Update the icon, title, description
 * 4. Add route in router.tsx
 * 5. Add navigation item in lib/navigation.ts
 */

import { useState } from 'react';
import { FileText, Plus, Filter, Search } from 'lucide-react';
import { PageHeader, PageHeaderButton } from '../components/layout/PageHeader';
import { usePermissions } from '../hooks/usePermissions';

// Optional: Add API import
// import api from '../lib/api';

export default function PageTemplate() {
    const { canAccess, isAdmin } = usePermissions();
    const [searchQuery, setSearchQuery] = useState('');
    const [isLoading, setIsLoading] = useState(false);

    // Example data - replace with API call
    const [items, setItems] = useState<any[]>([]);

    // Optional: Fetch data on mount
    // useEffect(() => {
    //     const fetchData = async () => {
    //         setIsLoading(true);
    //         try {
    //             const response = await api.get('/your-endpoint');
    //             setItems(response.data);
    //         } catch (error) {
    //             console.error('Failed to load data:', error);
    //         } finally {
    //             setIsLoading(false);
    //         }
    //     };
    //     fetchData();
    // }, []);

    return (
        <div className="space-y-6">
            {/* Page Header */}
            <PageHeader
                title="Page Title"
                description="Brief description of what this page does"
                icon={FileText}
                iconColor="text-[var(--color-primary)]"
                actions={
                    isAdmin && (
                        <PageHeaderButton variant="primary" onClick={() => console.log('Add new')}>
                            <Plus size={18} />
                            Add New
                        </PageHeaderButton>
                    )
                }
            />

            {/* Filters & Search Bar */}
            <div className="flex flex-col sm:flex-row gap-3">
                <div className="relative flex-1">
                    <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)]" />
                    <input
                        type="text"
                        placeholder="Search..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-elevated)] text-sm focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none"
                    />
                </div>
                <button className="flex items-center gap-2 px-4 py-2.5 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-elevated)] text-sm hover:bg-slate-50 dark:hover:bg-slate-700">
                    <Filter size={16} />
                    Filters
                </button>
            </div>

            {/* Content Area */}
            <div className="bg-[var(--color-bg-elevated)] rounded-xl border border-[var(--color-border-default)] shadow-sm">
                {isLoading ? (
                    <div className="flex items-center justify-center p-12">
                        <div className="animate-spin w-8 h-8 border-2 border-emerald-500 border-t-transparent rounded-full" />
                    </div>
                ) : items.length === 0 ? (
                    /* Empty State */
                    <div className="flex flex-col items-center justify-center p-12 text-center">
                        <div className="w-16 h-16 rounded-full bg-[var(--color-bg-tertiary)] flex items-center justify-center mb-4">
                            <FileText size={32} className="text-[var(--color-text-tertiary)]" />
                        </div>
                        <h3 className="text-lg font-semibold text-[var(--color-text-primary)] mb-2">
                            No Items Yet
                        </h3>
                        <p className="text-sm text-[var(--color-text-tertiary)] max-w-sm mb-6">
                            Get started by creating your first item. Items will appear here once created.
                        </p>
                        {isAdmin && (
                            <button className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white rounded-lg font-medium">
                                <Plus size={18} />
                                Create First Item
                            </button>
                        )}
                    </div>
                ) : (
                    /* Data List/Table */
                    <div className="divide-y divide-slate-200 dark:divide-slate-700">
                        {items.map((item, index) => (
                            <div
                                key={item.id || index}
                                className="p-4 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
                            >
                                {/* Item content here */}
                                <p className="text-sm text-[var(--color-text-primary)]">{item.name}</p>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}
