import { Icon } from "../../icon";
import type { ConfigProfile } from "../../../api/config-profiles";

interface Props {
  profiles: ConfigProfile[];
  selectedProfileId: string | null;
  onSelect: (profile: ConfigProfile) => void;
  onCreate: () => void;
  onDelete: (id: string) => void;
}

export const ConfigProfileListSidebar = ({
  profiles,
  selectedProfileId,
  onSelect,
  onCreate,
  onDelete,
}: Props) => {
  return (
    <div className="sidebar">
      <div className="sidebar-header">
        <h2>Config Profiles</h2>
        <p className="muted">
          {profiles.length} profile{profiles.length !== 1 ? "s" : ""}
        </p>
      </div>

      <div className="sidebar-list">
        {profiles.map((profile) => (
          <button
            key={profile.id}
            onClick={() => onSelect(profile)}
            className={
              selectedProfileId === profile.id
                ? "sidebar-item sidebar-item-active"
                : "sidebar-item"
            }
          >
            <div className="sidebar-item-content">
              <div className="sidebar-item-title">
                {profile.name}
                {profile.is_default && (
                  <span className="badge badge-secondary ml-2">default</span>
                )}
                {profile.includes?.length > 0 && (
                  <span className="badge ml-2">
                    {profile.includes.length} include{profile.includes.length !== 1 ? "s" : ""}
                  </span>
                )}
              </div>
              <div className="sidebar-item-subtitle">
                {profile.project_id && "Project scoped"}
                {profile.tool_type_id && (profile.project_id ? " + Tool scoped" : "Tool scoped")}
                {!profile.project_id && !profile.tool_type_id && "Global"}
              </div>
            </div>
            <button
              onClick={(e) => {
                e.stopPropagation();
                onDelete(profile.id);
              }}
              className="delete-btn"
              title="Delete profile"
            >
              <Icon name="delete" size="sm" />
            </button>
          </button>
        ))}
      </div>

      <div className="sidebar-footer">
        <button onClick={onCreate} className="sidebar-create-button">
          <Icon name="add" size="sm" /> New Profile
        </button>
      </div>
    </div>
  );
};
