import { Link } from 'react-router-dom'
import { Field, Select } from './ui'
import type { BrandData } from '../types/brand'

type Props = {
  brandId: string
  brands: BrandData[]
  onChange: (id: string) => void
  disabled?: boolean
}

export function BrandSwitcher({ brandId, brands, onChange, disabled }: Props) {
  if (!brands.length) {
    return (
      <div className="ac-brand-switcher ac-brand-switcher--empty">
        <p className="text-sm text-ink-secondary">
          尚未建立品牌。
          <Link to="/brands" className="ml-1 font-semibold text-brand hover:underline">
            前往品牌庫
          </Link>
        </p>
      </div>
    )
  }

  return (
    <div className="ac-brand-switcher">
      <Field label="目前品牌">
        <Select
          value={brandId}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled || !brands.length}
        >
          {!brandId ? <option value="">請選擇品牌</option> : null}
          {brands.map((item) => (
            <option key={item.id} value={item.id}>
              {item.display_name?.trim() || '未命名品牌'}
            </option>
          ))}
        </Select>
      </Field>
      <Link to="/brands" className="ac-brand-switcher__link text-xs font-semibold text-brand hover:underline">
        管理品牌
      </Link>
    </div>
  )
}