"use client";

// @yakcloud/client-shell — 연결 도움말 사이드 시트(usePanelSheets 로 열림).
// 자격증명 없이 접속 방법만: host/port(예시 placeholder), <ALIAS>_* env 키 이름, 로컬 Docker 사용 안내.
// ⛔ /api/internal/credentials 등 비밀 fetch 금지(그런 엔드포인트는 존재하면 안 됨). 값은 전부 placeholder.
// ui(CardSheet, CodeBlock, C) 런타임 소비, ds-sdk(BIND_ENV_VARS, bindEnvKeys) type-only 아님 — 상수/헬퍼는 값 import.
import { CardSheet, CodeBlock, C } from "@yakcloud/ui";
import { BIND_ENV_VARS, bindEnvKeys } from "@yakcloud/ds-sdk";
import type { ServiceTypeDTO } from "@yakcloud/ds-sdk";

export function ConnectionHelpSheet({
  open,
  onClose,
  sourceType,
  alias,
  scrollContainer,
}: {
  open: boolean;
  onClose: () => void;
  sourceType: ServiceTypeDTO;
  alias: string; // 앱 바인딩 별칭(예: "mydb") → PREFIX 도출
  scrollContainer?: HTMLElement | null;
}) {
  const vars = BIND_ENV_VARS[sourceType];
  const keys = bindEnvKeys(alias, sourceType);

  return (
    <CardSheet
      open={open}
      onClose={onClose}
      scrollContainer={scrollContainer}
      title="연결 방법"
      subtitle="자격증명은 노출되지 않습니다. 앱 파드에는 아래 환경변수가 자동 주입됩니다."
    >
      <div className="cs-help">
        <h4>주입되는 환경변수</h4>
        <ul className="cs-env-list">
          {vars.map((v, i) => {
            const key = keys[i];
            return (
              <li key={v.suffix}>
                <code>{key ?? `${alias.toUpperCase()}_${v.suffix}`}</code>
                <span className="cs-env-desc">{v.desc}</span>
                <span className="cs-env-example">
                  예: <em>{v.example || "(빈값)"}</em>
                </span>
              </li>
            );
          })}
        </ul>

        <h4>로컬 Docker 예시 (모두 placeholder)</h4>
        <CodeBlock>
          <C># 실제 값이 아닌 예시입니다. 값은 서버에서만 조립됩니다.</C>
          <br />
          docker run \
          <br />
          {vars.slice(0, 4).map((v, i) => {
            const key = keys[i] ?? `${alias.toUpperCase()}_${v.suffix}`;
            return (
              <span key={v.suffix}>
                {"  "}-e {key}=&lt;{v.suffix.toLowerCase()}&gt; \
                <br />
              </span>
            );
          })}
          {"  "}your-app:latest
        </CodeBlock>

        <p className="cs-help-note">
          비밀번호·액세스 키는 이 화면에 표시되지 않으며, 앱 실행 시점에만 파드 환경으로 전달됩니다.
        </p>
      </div>
    </CardSheet>
  );
}