import { useEffect, useState } from 'react'

export default function FeedPicker({
  selected,
  setSelected,
  apiBase = '/api',
}: {
  selected: string[]
  setSelected: (s: string[]) => void
  apiBase?: string
}) {
  const [defaults, setDefaults] = useState<Record<string, string>>({})
  // const [custom, setCustom] = useState('')  // Temporarily disabled

  useEffect(() => {
    let cancelled = false
    fetch(`${apiBase}/defaults`).then(r => r.json()).then((data: Record<string, string>) => {
      if (cancelled) return
      setDefaults(data)
      // Default select all if none selected yet
      if (selected.length === 0) {
        const all = Object.values(data)
        setSelected(all)
      }
    }).catch(console.error)
    return () => { cancelled = true }
  }, [apiBase])

  function toggle(url: string) {
    setSelected(selected.includes(url) ? selected.filter(u => u !== url) : [...selected, url])
  }

  // function addCustom() {  // Temporarily disabled
  //   try {
  //     const url = new URL(custom).toString()
  //     if (!selected.includes(url)) setSelected([...selected, url])
  //     setCustom('')
  //   } catch { /* ignore invalid */ }
  // }

  return (
    <div className="card p-4">
      <h3 className="mb-3 text-sm font-semibold">Sources</h3>
      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
        {Object.entries(defaults).map(([name, url]) => (
          <label key={url} className="flex items-center gap-2">
            <input type="checkbox" checked={selected.includes(url)} onChange={() => toggle(url)} />
            <span className="text-sm">{name}</span>
          </label>
        ))}
      </div>
      {/* Custom RSS URL input - temporarily disabled */}
      {/*
      <div className="mt-4 flex gap-2">
        <input 
          type="text" 
          placeholder="Custom RSS URL" 
          className="input flex-1" 
          value={custom} 
          onChange={e => setCustom(e.target.value)} 
        />
        <button className="btn" onClick={addCustom}>Add</button>
      </div>
      */}
    </div>
  )
}