const SourcesDropdown = ({ sources, isam, system, type }) => {
  const [isOpen, setIsOpen] = React.useState(false);

  if (!sources || (sources.length === 0 && type !== 'ai')) return null;

  const handleSourceClick = async (e, link) => {
    e.preventDefault();
    if (link && link !== '#') {
      window.open(link, '_blank');
    }
  };

  const renderSourceItem = (src, idx) => {
    const pageStr = src.page ? ` — s. ${src.page}` : '';
    const link = src.deepLink || src.url;

    return (
      <li key={idx} className="text-xs flex items-start gap-2 py-1.5 group">
        <span className="mt-0.5 flex-shrink-0 text-blue-500 dark:text-blue-400">📄</span>
        <div className="flex-1">
          <span className="text-gray-700 dark:text-gray-300">
            {link ? (
              <a
                href={link || '#'}
                onClick={(e) => handleSourceClick(e, link)}
                className="rag-source-link font-medium text-blue-600 dark:text-blue-400 hover:underline cursor-pointer"
              >
                {src.title}
              </a>
            ) : (
              <span className="font-medium">{src.title}</span>
            )}
            {src.author && src.author !== 'İSAM Kütüphanesi' ? `, ${src.author}` : ''}
            {pageStr}
          </span>
          <span className="ml-2 text-[10px] px-1.5 py-0.5 rounded bg-gray-100 dark:bg-neutral-800 text-gray-500 uppercase font-bold tracking-tight whitespace-nowrap">
            {src.srcType}
          </span>
        </div>
      </li>
    );
  };

  return (
    <div className="sources-section mt-3">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 text-xs font-semibold text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition-all px-3 py-1.5 rounded-lg border border-gray-200 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800"
      >
        <span className="transform transition-transform duration-200" style={{ transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)' }}>
          ▶
        </span>
        📚 {isOpen ? 'Kaynakları Gizle' : 'Kaynakları Gör'}
        <span className="ml-1 bg-gray-500 dark:bg-gray-600 text-white px-1.5 py-0.5 rounded-full text-[10px]">
          {sources.length}
        </span>
      </button>

      {isOpen && (
        <div className="mt-2 pl-2 border-l-2 border-gray-200 dark:border-neutral-700 bg-white dark:bg-neutral-900/50 p-2 rounded-r-lg">
          <ul className="space-y-0.5">
            {sources.map((src, idx) => renderSourceItem(src, idx))}
          </ul>

          {sources.length === 0 && type === 'ai' && (
            <div className="text-xs text-gray-500 dark:text-gray-400 py-1">
              ✨ Yapay Zeka tarafından üretilmiştir
            </div>
          )}
        </div>
      )}
    </div>
  );
};

window.SourcesDropdown = SourcesDropdown;