import { ExternalLink } from '../../../lib/icons'
import { Section, Row, Input, type PrefsLike } from '../_ui'

export function FanartSection({ prefs }: { prefs: PrefsLike }) {
  const builtIn = (import.meta.env.VITE_FANART_API_KEY || '').trim()
  const usingBuiltIn = !prefs.fanartApiKey && !!builtIn
  return (
    <Section
      id="fanart"
      title="Fanart.tv"
      description={
        usingBuiltIn
          ? 'Built-in key in use - HD logos and clearart load automatically.'
          : 'Optional - HD logos, clearart and banners that augment the cinematic chrome'
      }
    >
      {usingBuiltIn && (
        <div className="py-2 px-3 rounded-md bg-accent/10 border border-accent/20 text-[12px] text-text-2 mb-2">
          A built-in Fanart.tv key is bundled with this build. Add your own personal key below only if you want to use one.
        </div>
      )}
      <Row label="Personal API key" hint={usingBuiltIn ? 'Override the built-in key with your own' : 'Free, sign up at fanart.tv to get one'}>
        <Input
          type="password"
          value={prefs.fanartApiKey}
          onChange={v => prefs.setPreference('fanartApiKey', v)}
          placeholder={usingBuiltIn ? 'Optional - leave blank to use built-in' : 'Paste your personal key'}
          width="w-64"
        />
      </Row>
      <div className="py-3 -mx-4 px-4 text-[11.5px] text-text-3 flex items-center justify-between gap-4 border-t border-border/50">
        <span>Don't have one yet?</span>
        <a
          href="https://fanart.tv/get-an-api-key/"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-1 text-accent hover:text-accent-hover transition-colors font-medium"
        >
          Get a Fanart.tv key
          <ExternalLink size={11} />
        </a>
      </div>
    </Section>
  )
}
