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
      style={{
        width: "280px",
        minWidth: "280px",
        borderRight: "1px solid var(--border)",
        display: "flex",
        flexDirection: "column",
        background: "var(--panel)",
      }}
    >
      <div style={{ padding: "1rem", borderBottom: "1px solid var(--border)" }}>
        <h2 style={{ margin: 0, fontSize: "1.125rem" }}>Config Profiles</h2>
        <p className="muted" style={{ margin: "0.25rem 0 0 0", fontSize: "0.875rem" }}>
          {profiles.length} profile{profiles.length !== 1 ? "s" : ""}
        </p>
      </div>

      <div style={{ flex: 1, overflowY: "auto", padding: "0.5rem" }}>
        {profiles.map((profile) => (
          <button
            key={profile.id}
            onClick={() => onSelect(profile)}
            style={{
              width: "100%",
              textAlign: "left",
              padding: "0.75rem 1rem",
              marginBottom: "0.25rem",
              borderRadius: "0.375rem",
              border: "none",
              background: selectedProfileId === profile.id ? "var(--brand)" : "transparent",
              color: selectedProfileId === profile.id ? "white" : "var(--ink)",
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              gap: "0.75rem",
              transition: "background 0.15s",
            }}
            onMouseEnter={(e) => {
              if (selectedProfileId !== profile.id) {
                e.currentTarget.style.background = "#ece7df";
              }
            }}
            onMouseLeave={(e) => {
              if (selectedProfileId !== profile.id) {
                e.currentTarget.style.background = "transparent";
              }
            }}
          >
            <div style={{ flex: 1, minWidth: 0 }}>
              <div
                style={{
                  fontWeight: 600,
                  fontSize: "0.9375rem",
                  whiteSpace: "nowrap",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                }}
              >
                {profile.name}
                {profile.is_default && (
                  <span
                    style={{
                      fontSize: "0.7rem",
                      marginLeft: "0.5rem",
                      opacity: 0.8,
                      textTransform: "uppercase",
                      letterSpacing: "0.025em",
                    }}
                  >
                    default
                  </span>
                )}
                {profile.includes?.length > 0 && (
                  <span
                    style={{
                      fontSize: "0.7rem",
                      marginLeft: "0.5rem",
                      opacity: 0.7,
                      background:
                        selectedProfileId === profile.id
                          ? "rgba(255,255,255,0.2)"
                          : "var(--badge-bg, #f3f4f6)",
                      padding: "0.0625rem 0.375rem",
                      borderRadius: "0.25rem",
                    }}
                  >
                    {profile.includes.length} include{profile.includes.length !== 1 ? "s" : ""}
                  </span>
                )}
              </div>
              <div
                style={{ fontSize: "0.8125rem", opacity: 0.8, marginTop: "0.125rem" }}
              >
                {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);
              }}
              style={{
                background: "none",
                border: "none",
                color: selectedProfileId === profile.id ? "rgba(255,255,255,0.8)" : "var(--muted)",
                cursor: "pointer",
                padding: "0.25rem",
                borderRadius: "0.25rem",
                flexShrink: 0,
                opacity: 0,
              }}
              className="delete-btn"
              title="Delete profile"
            >
              <Icon name="delete" size="sm" />
            </button>
          </button>
        ))}
      </div>

      <div style={{ padding: "1rem", borderTop: "1px solid var(--border)" }}>
        <button
          onClick={onCreate}
          style={{
            width: "100%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: "0.5rem",
            padding: "0.75rem",
            borderRadius: "0.5rem",
            border: "2px dashed var(--border)",
            background: "transparent",
            color: "var(--muted)",
            cursor: "pointer",
            fontWeight: 600,
            transition: "all 0.15s",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.borderColor = "var(--brand)";
            e.currentTarget.style.color = "var(--brand)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.borderColor = "var(--border)";
            e.currentTarget.style.color = "var(--muted)";
          }}
        >
          <Icon name="add" size="sm" /> New Profile
        </button>
      </div>
    </div>
  );
};
