'use client'

const labelCls = 'mono uppercase-wide'
const labelStyle = { fontSize: 10, color: 'var(--muted)', letterSpacing: '0.08em', marginBottom: 6 } as const

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column' }}>
      <span className={labelCls} style={labelStyle}>{label}</span>
      {children}
    </label>
  )
}

export function Text({
  label, value, onChange, placeholder, type = 'text',
}: { label: string; value: string; onChange: (v: string) => void; placeholder?: string; type?: string }) {
  return (
    <Field label={label}>
      <input
        type={type}
        value={value}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
        className="input"
      />
    </Field>
  )
}

export function Area({
  label, value, onChange, placeholder,
}: { label: string; value: string; onChange: (v: string) => void; placeholder?: string }) {
  return (
    <Field label={label}>
      <textarea
        rows={4}
        value={value}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
        className="input"
        style={{ height: 'auto', padding: 10, fontFamily: 'var(--f-body)', lineHeight: 1.45, resize: 'vertical' }}
      />
    </Field>
  )
}

export function Select({
  label, value, onChange, options, includeEmpty = true,
}: {
  label: string; value: string; onChange: (v: string) => void
  options: { value: string; label: string }[]; includeEmpty?: boolean
}) {
  return (
    <Field label={label}>
      <select value={value} onChange={(e) => onChange(e.target.value)} className="input" style={{ cursor: 'pointer' }}>
        {includeEmpty && <option value="">Selecciona…</option>}
        {options.map((o) => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
    </Field>
  )
}

type CardOption = { value: string; label: string; desc?: string }

/** Tarjetas selectables con descripción (single o multi). Estilo Terrano. */
export function OptionCards({
  label,
  options,
  selected,
  onSelect,
  multi = false,
  columns = 2,
}: {
  label?: string
  options: CardOption[]
  selected: string | string[]
  onSelect: (value: string) => void
  multi?: boolean
  columns?: number
}) {
  const isOn = (v: string) => (Array.isArray(selected) ? selected.includes(v) : selected === v)
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      {label && (
        <span className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.08em', marginBottom: 8 }}>
          {label}
        </span>
      )}
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 8 }} className="opt-cards">
        {options.map((o) => {
          const on = isOn(o.value)
          return (
            <button
              key={o.value}
              type="button"
              onClick={() => onSelect(o.value)}
              style={{
                textAlign: 'left',
                padding: '12px 14px',
                border: '1px solid ' + (on ? 'var(--accent)' : 'var(--line-soft)'),
                background: on ? 'rgba(20,49,74,0.06)' : 'var(--bg-elev)',
                boxShadow: on ? 'inset 0 0 0 1px var(--accent)' : 'none',
                cursor: 'pointer',
                display: 'flex',
                gap: 10,
                alignItems: 'flex-start',
              }}
            >
              <span
                style={{
                  width: 15,
                  height: 15,
                  flexShrink: 0,
                  marginTop: 1,
                  border: '1px solid ' + (on ? 'var(--accent)' : 'var(--line)'),
                  borderRadius: multi ? 2 : 999,
                  background: on ? 'var(--accent)' : 'transparent',
                  color: '#fff',
                  fontSize: 10,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                {on ? '✓' : ''}
              </span>
              <span style={{ minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{o.label}</span>
                {o.desc && (
                  <span style={{ display: 'block', fontSize: 11.5, color: 'var(--muted)', marginTop: 3, lineHeight: 1.4 }}>{o.desc}</span>
                )}
              </span>
            </button>
          )
        })}
      </div>
    </div>
  )
}

export function ChipGroup({
  label, options, selected, onToggle,
}: {
  label: string; options: { value: string; label: string }[]
  selected: string[]; onToggle: (v: string) => void
}) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <span className={labelCls} style={labelStyle}>{label}</span>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {options.map((o) => {
          const on = selected.includes(o.value)
          return (
            <button
              key={o.value}
              type="button"
              onClick={() => onToggle(o.value)}
              className="pill"
              style={{
                cursor: 'pointer',
                background: on ? 'var(--accent)' : 'var(--bg-elev)',
                color: on ? '#fff' : 'var(--ink-2)',
                borderColor: on ? 'var(--accent)' : 'var(--line-soft)',
                textTransform: 'none',
                fontFamily: 'var(--f-body)',
                fontSize: 11.5,
                letterSpacing: 0,
                padding: '5px 10px',
              }}
            >
              {o.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}