import {ExternalLink, Github, Search} from 'lucide-react'
import { useState } from 'react'

function SearchLinksPanel() {
  const [query, setQuery] = useState('')

  const searchUrl = query.trim()
    ? `https://www.google.com/search?q=${encodeURIComponent(query.trim())}`
    : ''
  const githubUrl = query.trim()
    ? `https://github.com/search?q=${encodeURIComponent(query.trim())}&type=repositories`
    : ''
  const hfUrl = query.trim()
    ? `https://huggingface.co/search/full-text?q=${encodeURIComponent(query.trim())}`
    : ''

  return (
    <div className="bg-[#191919] border border-[#2E2E2E] rounded-xl p-4">
      <div className="flex items-center gap-2 mb-3">
        <Search size={16} className="text-[#FF9D00]" />
        <span className="text-sm font-semibold text-white">Internet & GitHub Search</span>
      </div>
      <div className="flex gap-2 mb-3">
        <input
          value={query}
          onChange={e => setQuery(e.target.value)}
          placeholder="Search fixes, LoRAs, model configs..."
          className="flex-1 bg-[#0F0F0F] border border-[#2E2E2E] rounded-lg px-3 py-2 text-sm text-white placeholder:text-[#6B6B6B] outline-none focus:border-[#FF9D00]"
        />
      </div>
      <div className="flex flex-wrap gap-2">
        <a
          href={searchUrl || undefined}
          target="_blank"
          rel="noreferrer"
          className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium border transition-colors ${
            query.trim()
              ? 'border-[#2E2E2E] text-white hover:border-[#FF9D00]'
              : 'border-[#2E2E2E] text-[#5A5A5A] cursor-not-allowed'
          }`}
          onClick={e => !query.trim() && e.preventDefault()}
        >
          <Search size={13} />
          Web Search
          <ExternalLink size={12} />
        </a>
        <a
          href={githubUrl || undefined}
          target="_blank"
          rel="noreferrer"
          className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium border transition-colors ${
            query.trim()
              ? 'border-[#2E2E2E] text-white hover:border-[#FF9D00]'
              : 'border-[#2E2E2E] text-[#5A5A5A] cursor-not-allowed'
          }`}
          onClick={e => !query.trim() && e.preventDefault()}
        >
          <Github size={13} />
          GitHub
          <ExternalLink size={12} />
        </a>
        <a
          href={hfUrl || undefined}
          target="_blank"
          rel="noreferrer"
          className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium border transition-colors ${
            query.trim()
              ? 'border-[#2E2E2E] text-white hover:border-[#FF9D00]'
              : 'border-[#2E2E2E] text-[#5A5A5A] cursor-not-allowed'
          }`}
          onClick={e => !query.trim() && e.preventDefault()}
        >
          <span className="text-[13px]">🤗</span>
          HF Search
          <ExternalLink size={12} />
        </a>
      </div>
    </div>
  )
}

export default SearchLinksPanel