import { CTA_TYPE_OPTIONS, parseProductContext, serializeProductContext } from '../lib/productContext'
import { formatMatchTagsInput, parseMatchTagsInput } from '../lib/productMatch'
import { Field, Input, Select, Textarea } from './ui'

type ProductItemFormProps = {
  label: string
  productContext: string
  matchTags: string[]
  onLabelChange: (value: string) => void
  onProductContextChange: (value: string) => void
  onMatchTagsChange: (tags: string[]) => void
  compact?: boolean
  /** 獨立編輯頁：加大輸入區與欄位間距 */
  spacious?: boolean
}

export function ProductItemForm({
  label,
  productContext,
  matchTags,
  onLabelChange,
  onProductContextChange,
  onMatchTagsChange,
  compact = false,
  spacious = false,
}: ProductItemFormProps) {
  const fields = parseProductContext(productContext)

  const updateContext = (patch: Partial<typeof fields>) => {
    onProductContextChange(serializeProductContext({ ...fields, ...patch }))
  }

  const gapClass = spacious ? 'gap-6' : compact ? 'gap-3' : 'gap-4'
  const fieldPad = spacious ? 'min-h-12 px-5 py-3.5' : ''
  const textareaPad = spacious ? 'min-h-[9.5rem] px-5 py-4 leading-relaxed' : ''
  const toneTextareaPad = spacious ? 'min-h-[7.5rem] px-5 py-4 leading-relaxed' : ''

  return (
    <div className={`grid ${gapClass}`}>
      <Field label="產品名稱">
        <Input
          value={label}
          onChange={(e) => onLabelChange(e.target.value)}
          placeholder="例：寵物洗毛精"
          className={fieldPad}
          data-islander-label="產品名稱"
        />
      </Field>
      <Field label="產品特色／能解決什麼">
        <Textarea
          rows={spacious ? 5 : compact ? 2 : 3}
          value={fields.features}
          onChange={(e) => updateContext({ features: e.target.value })}
          placeholder="例：溫和無香料、適合皮膚敏感的狗"
          className={textareaPad}
          data-islander-label="產品特色"
        />
      </Field>
      <Field label="置入語氣（選填）">
        <Textarea
          rows={spacious ? 4 : 2}
          value={fields.placementTone ?? ''}
          onChange={(e) => updateContext({ placementTone: e.target.value })}
          placeholder="例：像朋友分享，先回應困擾再順帶提到"
          className={toneTextareaPad}
        />
      </Field>
      <div className={`grid gap-4 ${spacious ? '' : 'sm:grid-cols-2'}`}>
        <Field label="留言 CTA 類型（選填）">
          <Select
            value={fields.ctaType ?? 'none'}
            onChange={(e) => updateContext({ ctaType: e.target.value as typeof fields.ctaType })}
            className={fieldPad}
          >
            {CTA_TYPE_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </Select>
        </Field>
        {fields.ctaType === 'link' ? (
          <Field label="CTA 連結網址">
            <Input
              value={fields.ctaUrl ?? ''}
              onChange={(e) => updateContext({ ctaUrl: e.target.value })}
              placeholder="https://"
              className={fieldPad}
            />
          </Field>
        ) : null}
      </div>
      <Field label="匹配標籤（選填）" hint="海巡時依標籤自動推薦產品，用頓號或逗號分隔">
        <Input
          value={formatMatchTagsInput(matchTags)}
          onChange={(e) => onMatchTagsChange(parseMatchTagsInput(e.target.value))}
          placeholder="例：敏感肌、換季、泛紅"
          className={fieldPad}
          data-islander-label="匹配標籤"
        />
      </Field>
    </div>
  )
}