import { ActionButton } from "./ActionButton";

function ResourceListItem({ value }: { value: string }) {
  return (
    <li className="resource-item">
      <span className="resource-item-dot" />
      <span className="resource-item-text">{value}</span>
    </li>
  );
}

type ResourcePanelProps = {
  connected: boolean;
  profiles: Array<{
    id: string;
    name: string;
    description: string;
    destinations: string[];
  }>;
  resources: string[];
  profileLabel: string;
  selectedProfileId: string | null;
  selectingProfile: boolean;
  onSelectProfile: (profileId: string) => void;
  onReset: () => void;
};

export function ResourcePanel({
  connected,
  profiles,
  resources,
  profileLabel,
  selectedProfileId,
  selectingProfile,
  onSelectProfile,
  onReset
}: ResourcePanelProps) {
  const effectiveResources = resources.length > 0 ? resources : ["Keine Ressourcen zugewiesen"];
  const showSelector = profiles.length > 1;
  const selectedProfile = profiles.find((profile) => profile.id === selectedProfileId) ?? null;

  return (
    <aside className="resource-panel">
      <div className="panel-head">
        <div>
          <p className="section-eyebrow">Access</p>
          <h2>Ressourcen</h2>
        </div>
        <span className="resource-count">{resources.length}</span>
      </div>

      <div className="resource-meta">
        <span className="resource-meta-label">Zugriffsprofil</span>
        <strong>{profileLabel}</strong>
        {selectedProfile?.description ? <small>{selectedProfile.description}</small> : null}
      </div>

      {showSelector ? (
        <label className="resource-selector">
          <span className="resource-meta-label">Ressource auswählen</span>
          <select
            disabled={connected || selectingProfile}
            onChange={(event) => onSelectProfile(event.target.value)}
            value={selectedProfileId ?? profiles[0]?.id ?? ""}
          >
            {profiles.map((profile) => (
              <option key={profile.id} value={profile.id}>
                {profile.name}
              </option>
            ))}
          </select>
          <small>
            {connected ? "Auswahl ist nur getrennt möglich." : selectingProfile ? "Profil wird aktualisiert..." : "Auswahl wird vor dem Verbinden in die Config übernommen."}
          </small>
        </label>
      ) : null}

      <ul className="resource-list">
        {effectiveResources.map((resource) => (
          <ResourceListItem key={resource} value={resource} />
        ))}
      </ul>

      <div className="resource-footer">
        <ActionButton onClick={onReset} variant="secondary">
          Neu einbinden
        </ActionButton>
      </div>
    </aside>
  );
}
