import { Layout } from '../../types/layout.types';
import { CanvasSize } from '../../types/canvas.types';

interface LayoutSelectorProps {
  isOpen: boolean;
  currentCanvasSize: CanvasSize;
  onLayoutSelect: (layout: Layout) => void;
  onClose: () => void;
}

// Placeholder layouts - will be replaced with real data from Figma
const PLACEHOLDER_LAYOUTS: Layout[] = [
  {
    id: 'layout-1',
    name: 'Layout 1',
    thumbnail: 'https://via.placeholder.com/200x150?text=Layout+1',
    canvasSize: '1200x675',
    objects: []
  },
  {
    id: 'layout-2',
    name: 'Layout 2',
    thumbnail: 'https://via.placeholder.com/200x150?text=Layout+2',
    canvasSize: '1200x675',
    objects: []
  }
];

export default function LayoutSelector({
  isOpen,
  currentCanvasSize,
  onLayoutSelect,
  onClose
}: LayoutSelectorProps) {
  if (!isOpen) return null;

  // Filter layouts by current canvas size
  const filteredLayouts = PLACEHOLDER_LAYOUTS.filter(
    layout => layout.canvasSize === currentCanvasSize
  );

  return (
    <>
      {/* Backdrop */}
      <div
        style={{
          position: 'fixed',
          inset: 0,
          backgroundColor: 'transparent',
          zIndex: 49
        }}
        onClick={onClose}
      />

      {/* Layout Menu */}
      <div
        style={{
          position: 'fixed',
          left: '127px', // Sidebar width (87px) + gap (40px)
          top: '50%',
          transform: 'translateY(-50%)',
          backgroundColor: '#ffffff',
          borderRadius: '10px',
          padding: '16px',
          minWidth: '280px',
          maxWidth: '400px',
          maxHeight: '80vh',
          overflowY: 'auto',
          zIndex: 50,
          boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)'
        }}
      >
        {/* Header */}
        <div
          style={{
            marginBottom: '16px',
            paddingBottom: '12px',
            borderBottom: '1px solid #e9ecef'
          }}
        >
          <h3
            style={{
              margin: 0,
              fontSize: '18px',
              fontWeight: '600',
              color: '#32343d',
              fontFamily: 'Inter, sans-serif'
            }}
          >
            Choose a Layout
          </h3>
          <p
            style={{
              margin: '4px 0 0 0',
              fontSize: '14px',
              color: '#999999',
              fontFamily: 'Inter, sans-serif'
            }}
          >
            For {currentCanvasSize === '1200x675' ? '1200×675' : currentCanvasSize === 'linkedin' ? 'LinkedIn (1200×627)' : 'HF (1160×580)'}
          </p>
        </div>

        {/* Layouts Grid */}
        {filteredLayouts.length > 0 ? (
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
              gap: '12px'
            }}
          >
            {filteredLayouts.map((layout) => (
              <button
                key={layout.id}
                onClick={() => onLayoutSelect(layout)}
                style={{
                  padding: '8px',
                  backgroundColor: '#f8f9fa',
                  border: 'none',
                  borderRadius: '7px',
                  cursor: 'pointer',
                  transition: 'all 0.15s ease-in-out',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '8px'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.backgroundColor = '#e9ecef';
                  e.currentTarget.style.transform = 'scale(1.02)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.backgroundColor = '#f8f9fa';
                  e.currentTarget.style.transform = 'scale(1)';
                }}
              >
                {/* Thumbnail */}
                <div
                  style={{
                    width: '100%',
                    aspectRatio: '4/3',
                    borderRadius: '4px',
                    overflow: 'hidden',
                    backgroundColor: '#ffffff'
                  }}
                >
                  <img
                    src={layout.thumbnail}
                    alt={layout.name}
                    style={{
                      width: '100%',
                      height: '100%',
                      objectFit: 'cover'
                    }}
                  />
                </div>

                {/* Name */}
                <span
                  style={{
                    fontSize: '14px',
                    color: '#32343d',
                    fontFamily: 'Inter, sans-serif',
                    textAlign: 'center'
                  }}
                >
                  {layout.name}
                </span>
              </button>
            ))}
          </div>
        ) : (
          <p
            style={{
              fontSize: '14px',
              color: '#999999',
              fontFamily: 'Inter, sans-serif',
              textAlign: 'center',
              padding: '20px'
            }}
          >
            No layouts available for this canvas size yet.
          </p>
        )}
      </div>
    </>
  );
}