import React from 'react';

interface Props {
  onSelect: (layout: 'block1' | 'block2' | 'block3' | 'flex' | 'grid') => void;
  onBack: () => void;
  onClose: () => void;
}

const LAYOUTS = [
  {
    id: 'block1' as const,
    label: '1 Column',
    desc: 'Single-column layout',
    svg: (
      <svg width="52" height="36" viewBox="0 0 52 36" fill="none">
        <rect x="2" y="2" width="48" height="32" rx="3" fill="#f0f0f0" stroke="#1a1a1a" strokeWidth="1.5"/>
      </svg>
    ),
  },
  {
    id: 'block2' as const,
    label: '2 Columns',
    desc: 'Two equal columns',
    svg: (
      <svg width="52" height="36" viewBox="0 0 52 36" fill="none">
        <rect x="2" y="2" width="22" height="32" rx="3" fill="#f0f0f0" stroke="#1a1a1a" strokeWidth="1.5"/>
        <rect x="28" y="2" width="22" height="32" rx="3" fill="#f0f0f0" stroke="#1a1a1a" strokeWidth="1.5"/>
      </svg>
    ),
  },
  {
    id: 'block3' as const,
    label: '3 Columns',
    desc: 'Three equal columns',
    svg: (
      <svg width="52" height="36" viewBox="0 0 52 36" fill="none">
        <rect x="2"  y="2" width="14" height="32" rx="3" fill="#f0f0f0" stroke="#1a1a1a" strokeWidth="1.5"/>
        <rect x="19" y="2" width="14" height="32" rx="3" fill="#f0f0f0" stroke="#1a1a1a" strokeWidth="1.5"/>
        <rect x="36" y="2" width="14" height="32" rx="3" fill="#f0f0f0" stroke="#1a1a1a" strokeWidth="1.5"/>
      </svg>
    ),
  },
  {
    id: 'flex' as const,
    label: 'Flex Row',
    desc: 'Flexible horizontal flow',
    svg: (
      <svg width="52" height="36" viewBox="0 0 52 36" fill="none">
        <rect x="2" y="2" width="48" height="32" rx="3" fill="#fef3c7" stroke="#f59e0b" strokeWidth="1.5" strokeDasharray="4 2"/>
        <rect x="6" y="8" width="12" height="20" rx="2" fill="#fde68a" stroke="#f59e0b" strokeWidth="1"/>
        <rect x="22" y="8" width="12" height="20" rx="2" fill="#fde68a" stroke="#f59e0b" strokeWidth="1"/>
        <rect x="38" y="8" width="8"  height="20" rx="2" fill="#fde68a" stroke="#f59e0b" strokeWidth="1"/>
      </svg>
    ),
  },
  {
    id: 'grid' as const,
    label: 'CSS Grid',
    desc: 'Auto-responsive grid',
    svg: (
      <svg width="52" height="36" viewBox="0 0 52 36" fill="none">
        <rect x="2" y="2" width="48" height="32" rx="3" fill="#f0fdf4" stroke="#10b981" strokeWidth="1.5" strokeDasharray="4 2"/>
        <rect x="6"  y="7" width="13" height="9" rx="2" fill="#bbf7d0" stroke="#10b981" strokeWidth="1"/>
        <rect x="22" y="7" width="13" height="9" rx="2" fill="#bbf7d0" stroke="#10b981" strokeWidth="1"/>
        <rect x="38" y="7" width="8"  height="9" rx="2" fill="#bbf7d0" stroke="#10b981" strokeWidth="1"/>
        <rect x="6"  y="20" width="13" height="9" rx="2" fill="#bbf7d0" stroke="#10b981" strokeWidth="1"/>
        <rect x="22" y="20" width="13" height="9" rx="2" fill="#bbf7d0" stroke="#10b981" strokeWidth="1"/>
        <rect x="38" y="20" width="8"  height="9" rx="2" fill="#bbf7d0" stroke="#10b981" strokeWidth="1"/>
      </svg>
    ),
  },
];

export function ContainerPicker({ onSelect, onBack, onClose }: Props) {
  return (
    <div className="jalpi-container-picker">
      <div className="jalpi-picker-modal__header">
        <button className="jalpi-picker-modal__back" onClick={onBack} title="Back">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M19 12H5M12 5l-7 7 7 7"/>
          </svg>
          Back
        </button>
        <span className="jalpi-picker-modal__title">Choose a layout</span>
        <button className="jalpi-picker-modal__close" onClick={onClose} title="Close">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>
      </div>
      <div className="jalpi-container-picker__grid">
        {LAYOUTS.map((layout) => (
          <button
            key={layout.id}
            className="jalpi-container-picker__card"
            onClick={() => onSelect(layout.id)}
            title={layout.desc}
          >
            <div className="jalpi-container-picker__preview">{layout.svg}</div>
            <div className="jalpi-container-picker__label">{layout.label}</div>
            <div className="jalpi-container-picker__desc">{layout.desc}</div>
          </button>
        ))}
      </div>
    </div>
  );
}
