import { useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Modal } from '../../ui/Modal';
import { ROOM_TEMPLATES, templateToCreateRoomDto } from './roomTemplates';
import type { RoomTemplate } from './roomTemplates';
import type { CreateRoomDto } from '@house-plan-maker/shared';
import styles from './template-picker.module.css';

const TEMPLATE_NAME_KEYS: Record<string, string> = {
  bedroom: 'templates.bedroom',
  kitchen: 'templates.kitchen',
  bathroom: 'templates.bathroom',
  'living-room': 'templates.livingRoom',
  office: 'templates.office',
  empty: 'templates.emptyRoom',
};

const TEMPLATE_DESC_KEYS: Record<string, string> = {
  bedroom: 'templates.bedroomDesc',
  kitchen: 'templates.kitchenDesc',
  bathroom: 'templates.bathroomDesc',
  'living-room': 'templates.livingRoomDesc',
  office: 'templates.officeDesc',
  empty: 'templates.emptyRoomDesc',
};

interface TemplatePickerProps {
  readonly open: boolean;
  readonly onClose: () => void;
  readonly onCreateRoom: (dto: CreateRoomDto) => void;
  readonly roomCount: number;
}

export function TemplatePicker({ open, onClose, onCreateRoom, roomCount }: TemplatePickerProps) {
  const { t } = useTranslation();
  const [selectedTemplate, setSelectedTemplate] = useState<RoomTemplate>(ROOM_TEMPLATES[0]);
  const [roomName, setRoomName] = useState('');
  const [isCreating, setIsCreating] = useState(false);

  const handleCreate = useCallback(() => {
    setIsCreating(true);
    const name = roomName.trim() || selectedTemplate.name;
    const dto = templateToCreateRoomDto(selectedTemplate, name, roomCount);
    onCreateRoom(dto);
    setIsCreating(false);
    setRoomName('');
    onClose();
  }, [selectedTemplate, roomName, roomCount, onCreateRoom, onClose]);

  const footer = (
    <div className={styles.footerButtons}>
      <button className={styles.cancelBtn} onClick={onClose} type="button">
        {t('common.cancel')}
      </button>
      <button
        className={styles.createBtn}
        onClick={handleCreate}
        disabled={isCreating}
        type="button"
      >
        {t('templates.create')}
      </button>
    </div>
  );

  return (
    <Modal open={open} onClose={onClose} title={t('templates.title')} footer={footer}>
      <div className={styles.content}>
        {/* Template grid */}
        <div className={styles.grid}>
          {ROOM_TEMPLATES.map((template) => (
            <button
              key={template.id}
              className={`${styles.templateCard} ${
                selectedTemplate.id === template.id ? styles.templateCardSelected : ''
              }`}
              onClick={() => setSelectedTemplate(template)}
              type="button"
            >
              <span className={styles.templateIcon}>{template.icon}</span>
              <span className={styles.templateName}>
                {TEMPLATE_NAME_KEYS[template.id] ? t(TEMPLATE_NAME_KEYS[template.id]) : template.name}
              </span>
              <span className={styles.templateDesc}>
                {TEMPLATE_DESC_KEYS[template.id] ? t(TEMPLATE_DESC_KEYS[template.id]) : template.description}
              </span>
            </button>
          ))}
        </div>

        {/* Room name input */}
        <div>
          <div className={styles.fieldLabel}>{t('templates.roomName')}</div>
          <input
            className={styles.nameInput}
            type="text"
            placeholder={selectedTemplate.name}
            value={roomName}
            onChange={(e) => setRoomName(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                handleCreate();
              }
            }}
          />
        </div>
      </div>
    </Modal>
  );
}
