import React from 'react';
import type { MicrositeV2Template } from '../../../services/api/types';

const cardStyle = (selected: boolean): React.CSSProperties => ({
  border: selected ? '2px solid var(--primary)' : '1px solid var(--border)',
  borderRadius: 'var(--radius-card)',
  padding: '12px',
  cursor: 'pointer',
  background: selected ? 'color-mix(in srgb, var(--primary) 8%, var(--card))' : 'var(--card)',
  display: 'flex',
  flexDirection: 'column',
  gap: '8px',
  minWidth: 0,
});

export function TemplatePicker({
  templates,
  selectedId,
  onSelect,
  loading,
}: {
  templates: MicrositeV2Template[];
  selectedId?: string;
  onSelect: (t: MicrositeV2Template) => void;
  loading?: boolean;
}) {
  if (loading) {
    return <p style={{ fontSize: 'var(--text-sm)', color: 'var(--muted)' }}>Loading templates…</p>;
  }
  if (templates.length === 0) {
    return <p style={{ fontSize: 'var(--text-sm)', color: 'var(--muted)' }}>No templates available.</p>;
  }

  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
        gap: '12px',
      }}
    >
      {templates.map((t) => {
        const selected = t._id === selectedId;
        return (
          <button
            key={t._id}
            type="button"
            onClick={() => onSelect(t)}
            style={{ ...cardStyle(selected), textAlign: 'left' }}
          >
            <div
              style={{
                aspectRatio: '16/10',
                borderRadius: 'var(--radius-button)',
                background: 'var(--muted)',
                overflow: 'hidden',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              {t.thumbnailUrl ? (
                <img
                  src={t.thumbnailUrl}
                  alt=""
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
              ) : (
                <span style={{ fontSize: 'var(--text-xs)', color: 'var(--card)' }}>No preview</span>
              )}
            </div>
            <span
              style={{
                fontSize: 'var(--text-sm)',
                fontWeight: 600,
                color: 'var(--foreground)',
                fontFamily: 'var(--font-inter)',
              }}
            >
              {t.name}
            </span>
            {t.description ? (
              <span style={{ fontSize: 'var(--text-xs)', color: 'var(--muted)', lineHeight: 1.3 }}>
                {t.description}
              </span>
            ) : null}
          </button>
        );
      })}
    </div>
  );
}