import { X, RefreshCw, CheckCircle2, XCircle, AlertCircle } from 'lucide-react';
import { neonModelDisplayName } from '../utils/displayName';

const STATUS_META = {
  online: { label: 'Online', Icon: CheckCircle2, className: 'status-online' },
  unavailable: { label: 'Unavailable', Icon: AlertCircle, className: 'status-unavailable' },
  error: { label: 'Error', Icon: XCircle, className: 'status-error' },
};

export default function ModelStatusModal({ statuses, loading, onClose, onRefresh }) {
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-panel model-status-modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2 className="modal-title">Model Status</h2>
          <div className="modal-header-actions">
            <button className="icon-btn" onClick={onRefresh} title="Re-check models" disabled={loading}>
              <RefreshCw size={16} className={loading ? 'spin' : ''} />
            </button>
            <button className="icon-btn" onClick={onClose} title="Close">
              <X size={16} />
            </button>
          </div>
        </div>

        <div className="modal-body">
          {loading && !statuses.length ? (
            <p className="model-status-empty">Checking models…</p>
          ) : !statuses.length ? (
            <p className="model-status-empty">No models configured.</p>
          ) : (
            <ul className="model-status-list">
              {statuses.map((s) => {
                const meta = STATUS_META[s.status] || STATUS_META.unavailable;
                const { Icon } = meta;
                const displayName = s.is_neon
                  ? neonModelDisplayName(s.model_name || s.model_id)
                  : s.model_name;
                return (
                  <li key={`${s.is_neon ? 'neon' : s.provider}:${s.model_id}`} className="model-status-row">
                    <div className="model-status-main">
                      <span className="model-status-names">
                        <span className="model-status-provider">{s.provider_name}</span>
                        <span className="model-status-model">{displayName}</span>
                      </span>
                      <span className={`model-status-badge ${meta.className}`}>
                        <Icon size={12} />
                        {meta.label}
                      </span>
                    </div>
                    {s.status === 'error' && s.error && (
                      <pre className="model-status-error">{s.error}</pre>
                    )}
                  </li>
                );
              })}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
}