/**
 * Layout Selector
 * Phase 7: Layout & Template System
 * Component for selecting page layouts
 */
import React, { useState } from 'react';
import { CheckIcon } from 'lucide-react';
import { Card } from '../../ui/card';

export interface LayoutOption {
  id: string;
  name: string;
  description: string;
  preview: string; // Preview image URL or component
  category: 'marketing' | 'blog' | 'ecommerce' | 'portfolio' | 'corporate';
}

interface LayoutSelectorProps {
  selectedLayout?: string;
  onSelect: (layoutId: string) => void;
  layouts?: LayoutOption[];
}

const DEFAULT_LAYOUTS: LayoutOption[] = [
  {
    id: 'default',
    name: 'Default Layout',
    description: 'Standard layout with header, content, and footer',
    preview: '',
    category: 'marketing',
  },
  {
    id: 'minimal',
    name: 'Minimal Layout',
    description: 'Clean, focused layout for content pages',
    preview: '',
    category: 'marketing',
  },
  {
    id: 'magazine',
    name: 'Magazine Layout',
    description: 'Magazine-style layout with featured sections',
    preview: '',
    category: 'blog',
  },
  {
    id: 'blog',
    name: 'Blog Layout',
    description: 'Blog layout with sidebar support',
    preview: '',
    category: 'blog',
  },
  {
    id: 'ecommerce',
    name: 'Ecommerce Layout',
    description: 'E-commerce layout with product focus',
    preview: '',
    category: 'ecommerce',
  },
  {
    id: 'portfolio',
    name: 'Portfolio Layout',
    description: 'Portfolio layout for showcasing work',
    preview: '',
    category: 'portfolio',
  },
  {
    id: 'corporate',
    name: 'Corporate Layout',
    description: 'Professional corporate layout',
    preview: '',
    category: 'corporate',
  },
];

export default function LayoutSelector({ selectedLayout, onSelect, layouts = DEFAULT_LAYOUTS }: LayoutSelectorProps) {
  const [selectedCategory, setSelectedCategory] = useState<string>('all');

  const categories = ['all', ...Array.from(new Set(layouts.map((l) => l.category)))];

  const filteredLayouts = selectedCategory === 'all' 
    ? layouts 
    : layouts.filter((l) => l.category === selectedCategory);

  return (
    <div className="space-y-4">
      {/* Category Filter */}
      <div className="flex gap-2 flex-wrap">
        {categories.map((category) => (
          <button
            key={category}
            type="button"
            onClick={() => setSelectedCategory(category)}
            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
              selectedCategory === category
                ? 'bg-brand-500 text-white'
                : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
            }`}
          >
            {category.charAt(0).toUpperCase() + category.slice(1)}
          </button>
        ))}
      </div>

      {/* Layout Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredLayouts.map((layout) => (
          <Card
            key={layout.id}
            className={`p-4 cursor-pointer transition-all hover:shadow-lg ${
              selectedLayout === layout.id
                ? 'ring-2 ring-brand-500 border-brand-500'
                : 'border-gray-200 dark:border-gray-700'
            }`}
            onClick={() => onSelect(layout.id)}
          >
            <div className="relative">
              {layout.preview ? (
                <img
                  src={layout.preview}
                  alt={layout.name}
                  className="w-full h-32 object-cover rounded-md mb-3"
                />
              ) : (
                <div className="w-full h-32 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-md mb-3 flex items-center justify-center">
                  <span className="text-gray-400 dark:text-gray-600 text-sm">{layout.name}</span>
                </div>
              )}
              {selectedLayout === layout.id && (
                <div className="absolute top-2 right-2 bg-brand-500 text-white rounded-full p-1">
                  <CheckIcon className="w-4 h-4" />
                </div>
              )}
            </div>
            <h3 className="font-semibold text-gray-900 dark:text-white mb-1">{layout.name}</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">{layout.description}</p>
          </Card>
        ))}
      </div>
    </div>
  );
}

