/**
 * Layout Preview
 * Phase 7: Layout & Template System
 * Component for previewing layouts with sample content
 */
import React, { useState } from 'react';
import { EyeIcon, XIcon, Maximize2Icon } from 'lucide-react';
import { Card } from '../../ui/card';
import Button from '../../ui/button/Button';

export interface LayoutPreviewProps {
  layoutId: string;
  layoutName: string;
  onClose?: () => void;
  onSelect?: () => void;
}

const LAYOUT_PREVIEWS: Record<string, React.ReactNode> = {
  default: (
    <div className="space-y-4">
      <div className="h-16 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Header</span>
      </div>
      <div className="h-64 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Main Content Area</span>
      </div>
      <div className="h-16 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Footer</span>
      </div>
    </div>
  ),
  minimal: (
    <div className="space-y-4">
      <div className="h-96 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Focused Content Area</span>
      </div>
    </div>
  ),
  magazine: (
    <div className="space-y-4">
      <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Header</span>
      </div>
      <div className="grid grid-cols-3 gap-4">
        <div className="col-span-2 h-64 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
          <span className="text-gray-600 dark:text-gray-400">Featured Content</span>
        </div>
        <div className="h-64 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
          <span className="text-gray-600 dark:text-gray-400">Sidebar</span>
        </div>
      </div>
    </div>
  ),
  blog: (
    <div className="space-y-4">
      <div className="h-16 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Header</span>
      </div>
      <div className="grid grid-cols-4 gap-4">
        <div className="col-span-3 space-y-3">
          <div className="h-32 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
            <span className="text-gray-600 dark:text-gray-400">Blog Post 1</span>
          </div>
          <div className="h-32 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
            <span className="text-gray-600 dark:text-gray-400">Blog Post 2</span>
          </div>
        </div>
        <div className="h-64 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
          <span className="text-gray-600 dark:text-gray-400">Sidebar</span>
        </div>
      </div>
    </div>
  ),
  ecommerce: (
    <div className="space-y-4">
      <div className="h-16 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Navigation</span>
      </div>
      <div className="grid grid-cols-4 gap-4">
        <div className="h-64 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
          <span className="text-gray-600 dark:text-gray-400">Filters</span>
        </div>
        <div className="col-span-3 grid grid-cols-3 gap-4">
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <div key={i} className="h-40 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
              <span className="text-gray-600 dark:text-gray-400 text-xs">Product {i}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  ),
  portfolio: (
    <div className="space-y-4">
      <div className="h-16 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Header</span>
      </div>
      <div className="grid grid-cols-3 gap-4">
        {[1, 2, 3, 4, 5, 6].map((i) => (
          <div key={i} className="h-48 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
            <span className="text-gray-600 dark:text-gray-400">Project {i}</span>
          </div>
        ))}
      </div>
    </div>
  ),
  corporate: (
    <div className="space-y-4">
      <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Header</span>
      </div>
      <div className="h-32 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Hero Section</span>
      </div>
      <div className="grid grid-cols-3 gap-4">
        {[1, 2, 3].map((i) => (
          <div key={i} className="h-32 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
            <span className="text-gray-600 dark:text-gray-400">Section {i}</span>
          </div>
        ))}
      </div>
      <div className="h-16 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
        <span className="text-gray-600 dark:text-gray-400">Footer</span>
      </div>
    </div>
  ),
};

export default function LayoutPreview({ layoutId, layoutName, onClose, onSelect }: LayoutPreviewProps) {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const previewContent = LAYOUT_PREVIEWS[layoutId] || LAYOUT_PREVIEWS.default;

  return (
    <div className={`${isFullscreen ? 'fixed inset-0 z-50 bg-white dark:bg-gray-900' : ''}`}>
      <Card className={`${isFullscreen ? 'h-full m-0 rounded-none' : ''} p-6`}>
        <div className="mb-4 flex justify-between items-center">
          <div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{layoutName}</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">Layout Preview</p>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" size="sm" onClick={() => setIsFullscreen(!isFullscreen)}>
              <Maximize2Icon className="w-4 h-4 mr-2" />
              {isFullscreen ? 'Exit' : 'Fullscreen'}
            </Button>
            {onSelect && (
              <Button variant="primary" size="sm" onClick={onSelect}>
                <EyeIcon className="w-4 h-4 mr-2" />
                Select Layout
              </Button>
            )}
            {onClose && (
              <Button variant="ghost" size="sm" onClick={onClose}>
                <XIcon className="w-4 h-4" />
              </Button>
            )}
          </div>
        </div>
        <div className={`border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-white dark:bg-gray-900 ${isFullscreen ? 'h-[calc(100vh-120px)] overflow-auto' : 'max-h-[600px] overflow-auto'}`}>
          {previewContent}
        </div>
      </Card>
    </div>
  );
}

