'use client'

import { useState } from 'react'
import { useFailureSources } from '../_hooks/useFailureSources'

/**
 * FMEA source-document register: shows EVERY document the failure-knowledge
 * corpus is built from, with source + licence + link. Collapsible; "used" =
 * a concrete failure was extracted and ingested, "geprüft" = checked but not a
 * failure. Full provenance, always visible.
 */
export function SourceDocuments() {
  const { data } = useFailureSources()
  const [open, setOpen] = useState(false)
  if (!data) return null

  const used = data.documents.filter((d) => d.used)
  return (
    <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
      <button onClick={() => setOpen(!open)} className="w-full flex items-center justify-between px-4 py-3 text-left">
        <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
          Quelldokumente <span className="text-gray-400 font-normal">({used.length} verwendet / {data.count} geprüft · {data.model || 'extrahiert'})</span>
        </span>
        <span className="text-gray-400 text-xs">{open ? '▲' : '▼'}</span>
      </button>
      {open && (
        <div className="px-4 pb-4">
          {data.count === 0 ? (
            <p className="text-xs text-gray-500">Noch keine Quelldokumente extrahiert.</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-xs">
                <thead>
                  <tr className="text-gray-500 border-b border-gray-200 dark:border-gray-700 text-left">
                    <th className="py-1.5 pr-3">Dokument</th>
                    <th className="py-1.5 pr-3">Quelle / Lizenz</th>
                    <th className="py-1.5 pr-3">Extrahiert</th>
                    <th className="py-1.5">Status</th>
                  </tr>
                </thead>
                <tbody>
                  {data.documents.map((d) => (
                    <tr key={d.id} className="border-b border-gray-100 dark:border-gray-700/50 align-top">
                      <td className="py-1.5 pr-3 max-w-xs">
                        <a href={d.url} target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:underline">
                          {d.title || d.source}
                        </a>
                      </td>
                      <td className="py-1.5 pr-3 text-gray-500">
                        {d.source}<br /><span className="text-[10px] text-gray-400">{d.license}</span>
                      </td>
                      <td className="py-1.5 pr-3 text-gray-600 dark:text-gray-300">
                        {d.used ? `${d.component} → ${d.failure_mode}` : '—'}
                        {d.used && d.confidence && <span className="text-[10px] text-gray-400"> ({d.confidence})</span>}
                      </td>
                      <td className="py-1.5">
                        <span className={`inline-block rounded px-1.5 py-0.5 text-[10px] font-medium ${
                          d.used ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
                                 : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400'}`}>
                          {d.used ? 'verwendet' : 'geprüft'}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
          <p className="text-[10px] text-gray-400 mt-2">
            Alle Quellen sind kommerziell nutzbar (lizenzgeprüft) und über den Link einsehbar. Extraktion
            Claude-basiert mit Quell-Zitat je Wert (verified=false bis stichprobengeprüft).
          </p>
        </div>
      )}
    </div>
  )
}
