/**
 * GEPRÜFTE TIERE: konsolidierte Übersicht aller als „vollständig korrekt" markierten
 * bzw. von Hand geänderten (geschützten) Mäuse — inkl. Abweichungen zum automatischen
 * Import. Laienverständlich: erklärt oben, was „geprüft"/„geschützt"/„weicht ab" bedeutet.
 */
import { Link } from 'react-router-dom'
import { de } from '../strings/de'
import { listVerified } from '../api/verified'
import { useApi } from '../hooks/useApi'
import './hilfe.css'

const vt = de.verified

function statusLabel(status: string): string {
  return vt.statusLabels[status] ?? status
}

export default function VerifizierteTierePage() {
  const data = useApi(() => listVerified(), [])
  const rows = data.data ?? []
  const verifiedRows = rows.filter((r) => r.isVerified)
  const protectedRows = rows.filter((r) => !r.isVerified)
  const fieldLabel = (path: string) => vt.fieldLabels[path] ?? path

  return (
    <section className="page">
      <h2>{vt.pageTitle}</h2>
      <p className="hilfe-subtitle">{vt.pageSubtitle}</p>
      <p>{vt.pageIntro1}</p>
      <p className="hilfe-hint">{vt.pageIntro2}</p>

      {data.loading && <p className="muted">{de.common.loading}</p>}
      {data.error && <p className="error-text">{vt.loadError}</p>}

      {!data.loading && !data.error && rows.length === 0 && (
        <p className="muted">{vt.empty}</p>
      )}

      {verifiedRows.length > 0 && (
        <>
          <h3>{vt.sectionVerified}</h3>
          <ul className="card-list">
            {verifiedRows.map((r) => (
              <li key={r.gerbilId}>
                <div className="gerbil-card" style={{ display: 'block' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', flexWrap: 'wrap' }}>
                    <Link to={`/rennmaeuse/${r.gerbilId}`} className="gerbil-card__name">
                      {r.entityName || de.pages.gerbils.nameless}
                    </Link>
                    <span
                      className="badge"
                      style={{
                        color:
                          r.status === 'drifted' ? '#c2703d' : r.status === 'missing' ? '#8a847b' : '#5e8c5a',
                      }}
                    >
                      {statusLabel(r.status)}
                    </span>
                  </div>
                  {r.status === 'drifted' && r.importDiff.length > 0 && (
                    <details style={{ marginTop: '0.5rem' }}>
                      <summary>{vt.driftHeading}</summary>
                      <p className="hilfe-hint">{vt.driftHint}</p>
                      <table className="drift-table">
                        <thead>
                          <tr>
                            <th>{vt.colField}</th>
                            <th>{vt.colGolden}</th>
                            <th>{vt.colImport}</th>
                          </tr>
                        </thead>
                        <tbody>
                          {r.importDiff.map((d) => (
                            <tr key={d.path}>
                              <td>{fieldLabel(d.path)}</td>
                              <td>{d.goldenValue || '—'}</td>
                              <td className="muted">{d.importValue || '—'}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </details>
                  )}
                </div>
              </li>
            ))}
          </ul>
        </>
      )}

      {protectedRows.length > 0 && (
        <>
          <h3>{vt.sectionProtected}</h3>
          <ul className="card-list">
            {protectedRows.map((r) => (
              <li key={r.gerbilId}>
                <div className="gerbil-card" style={{ display: 'block' }}>
                  <Link to={`/rennmaeuse/${r.gerbilId}`} className="gerbil-card__name">
                    {r.entityName || de.pages.gerbils.nameless}
                  </Link>
                  {r.protectedFields.length > 0 && (
                    <p className="gerbil-card__meta muted" style={{ marginTop: '0.3rem' }}>
                      {vt.protectedFieldsLabel}{' '}
                      {r.protectedFields.map((f) => fieldLabel(f)).join(', ')}
                    </p>
                  )}
                </div>
              </li>
            ))}
          </ul>
        </>
      )}
    </section>
  )
}
