import type { ProviderCapability } from '../../types'

interface ProviderPanelProps {
  providers: ProviderCapability[]
  loadingCapabilities: boolean
  capabilitiesError: string | null
  onRefresh: () => void
}

export function ProviderPanel({
  providers,
  loadingCapabilities,
  capabilitiesError,
  onRefresh,
}: ProviderPanelProps): JSX.Element {
  return (
    <section className="system-provider-panel">
      <div className="system-provider-shell">
        <div className="panel-title-row">
          <div>
            <h2>Provider Capabilities</h2>
            <p className="muted">Review configured local providers and honest not-configured external sources.</p>
          </div>
          <button type="button" className="secondary-action" onClick={onRefresh} disabled={loadingCapabilities}>
            Refresh providers
          </button>
        </div>

        <div className="system-provider-state-stack">
          {loadingCapabilities ? (
            <div className="result-state result-state-loading">
              <strong>Loading provider capabilities.</strong>
              <p>Checking local, fixture and external provider registry states.</p>
            </div>
          ) : null}
          {capabilitiesError ? (
            <div className="result-state result-state-error">
              <strong>Provider registry unavailable.</strong>
              <p>{capabilitiesError}</p>
            </div>
          ) : null}
          {providers.length === 0 && !loadingCapabilities ? (
            <div className="result-state result-state-empty">
              <strong>No providers reported by backend.</strong>
              <p>Refresh provider capabilities after the backend is reachable.</p>
            </div>
          ) : null}
        </div>

        <div className="system-provider-capability-surface" aria-label="Provider capability registry">
          <ul className="system-provider-list">
            {providers.map((provider) => (
              <li className="system-provider-card" key={provider.provider_name}>
                <div className="system-provider-header">
                  <div>
                    <strong>{provider.display_name}</strong>
                    <span>{provider.provider_name}</span>
                  </div>
                  <span className={provider.configured ? 'status-badge status-badge-ready' : 'status-badge'}>{provider.status}</span>
                </div>
                <div className="system-provider-grid">
                  <div>
                    <span>Authority</span>
                    <strong>{provider.authority_level}</strong>
                  </div>
                  <div>
                    <span>Configured</span>
                    <strong>{provider.configured ? 'yes' : 'no'}</strong>
                  </div>
                  <div>
                    <span>Geometry</span>
                    <strong>{provider.supported_geometry_types.join(', ')}</strong>
                  </div>
                  <div>
                    <span>Query modes</span>
                    <strong>{provider.supported_query_modes.join(', ')}</strong>
                  </div>
                </div>
                <div className="provider-layer-list" aria-label={`${provider.provider_name} supported layers`}>
                  {provider.supported_layers.map((layer) => (
                    <span className="provider-layer-chip" key={layer}>
                      {layer}
                    </span>
                  ))}
                </div>
                <div className="provider-detail-stack">
                  <div>limitation: {provider.limitation_message}</div>
                  {!provider.configured && provider.not_configured_reason ? (
                    <div>reason: {provider.not_configured_reason}</div>
                  ) : null}
                </div>
                <div className="provider-provenance-grid">
                  <div className="provider-provenance-card">
                    <span>Attribution</span>
                    <strong>{provider.attribution}</strong>
                  </div>
                  <div className="provider-provenance-card">
                    <span>License</span>
                    <strong>{provider.license_note}</strong>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  )
}