auto-trade/features/settings/components/SettingsContainer.tsx

"use client";

import { type LucideIcon, Info, Link2, Wallet } from "lucide-react";
import { useShallow } from "zustand/react/shallow";
import { KisAuthForm } from "@/features/settings/components/KisAuthForm";
import { KisProfileForm } from "@/features/settings/components/KisProfileForm";
import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
import { cn } from "@/lib/utils";

/**
 * @description 설정 페이지 컨테이너입니다. KIS 연결 상태와 인증 폼을 카드 UI로 제공합니다.
 * @see app/(main)/settings/page.tsx 로그인 확인 후 이 컴포넌트를 렌더링합니다.
 * @see features/settings/components/KisAuthForm.tsx 실제 인증 입력/검증/해제를 담당합니다.
 */
export function SettingsContainer() {
  // 상태 정의: 연결 상태 표시용 전역 인증 상태를 구독합니다.
  const {
    verifiedCredentials,
    isKisVerified,
    isKisProfileVerified,
    verifiedAccountNo,
  } = useKisRuntimeStore(
    useShallow((state) => ({
      verifiedCredentials: state.verifiedCredentials,
      isKisVerified: state.isKisVerified,
      isKisProfileVerified: state.isKisProfileVerified,
      verifiedAccountNo: state.verifiedAccountNo,
    })),
  );

  return (
    <section className="mx-auto flex w-full max-w-[1400px] flex-col gap-6 px-4 py-4 md:px-8 md:py-8">
      {/* ========== SETTINGS OVERVIEW ========== */}
      <article className="rounded-2xl border border-brand-200 bg-gradient-to-br from-brand-50/80 via-background to-background p-5 dark:border-brand-800/45 dark:from-brand-900/30 dark:via-brand-950/10 dark:to-background md:p-6">
        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)]">
          <div className="space-y-3">
            <h1 className="text-2xl font-semibold tracking-tight text-foreground">
              한국투자증권 연결 센터
            </h1>
            <p className="text-sm leading-relaxed text-muted-foreground">
              앱키 연결과 계좌 확인을 한 화면에서 처리합니다. 아래 순서대로
              진행하면 바로 대시보드/트레이드 화면에 반영됩니다.
            </p>
            <div className="rounded-xl border border-brand-200/70 bg-brand-50/70 p-3 dark:border-brand-800/60 dark:bg-brand-900/20">
              <p className="text-xs font-semibold text-brand-700 dark:text-brand-200">
                진행 순서: 1) 앱키 연결 확인 {"->"} 2) 계좌 인증 {"->"} 3)
                거래 화면 사용
              </p>
            </div>
          </div>

          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
            <StatusTile
              icon={Link2}
              title="앱키 연결"
              value={
                isKisVerified
                  ? `연결됨 (${verifiedCredentials?.tradingEnv === "real" ? "실전" : "모의"})`
                  : "미연결"
              }
              tone={isKisVerified ? "success" : "idle"}
            />
            <StatusTile
              icon={Wallet}
              title="계좌 인증"
              value={
                isKisProfileVerified
                  ? `확인 완료 (${maskAccountNo(verifiedAccountNo)})`
                  : "미확인"
              }
              tone={isKisProfileVerified ? "success" : "idle"}
            />
            <StatusTile
              icon={Info}
              title="입력 정보 보관"
              value="서버 DB 저장 없음 · 현재 브라우저에서만 관리"
              tone="notice"
            />
          </div>
        </div>
      </article>

      {/* ========== FORM GRID ========== */}
      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
        <KisAuthForm />
        <KisProfileForm />
      </div>
    </section>
  );
}

/**
 * @description 계좌번호 마스킹 문자열을 반환합니다.
 * @param value 계좌번호(8-2)
 * @returns 마스킹 계좌번호
 * @see features/settings/components/SettingsContainer.tsx 프로필 상태 라벨 표시
 */
function maskAccountNo(value: string | null) {
  if (!value) return "-";
  const digits = value.replace(/\D/g, "");
  if (digits.length !== 10) return "********";
  return "********-**";
}

type StatusTileTone = "success" | "idle" | "notice";

/**
 * @description 설정 페이지 상단 요약 상태 타일입니다.
 * @see features/settings/components/SettingsContainer.tsx 상태 요약 렌더링
 */
function StatusTile({
  icon: Icon,
  title,
  value,
  tone,
}: {
  icon: LucideIcon;
  title: string;
  value: string;
  tone: StatusTileTone;
}) {
  return (
    <div
      className={cn(
        "rounded-xl border px-3 py-2.5",
        tone === "success" &&
          "border-emerald-200 bg-emerald-50/70 dark:border-emerald-800/45 dark:bg-emerald-900/15",
        tone === "idle" &&
          "border-zinc-200 bg-zinc-50/70 dark:border-zinc-800 dark:bg-zinc-900/30",
        tone === "notice" &&
          "border-amber-300 bg-amber-50/70 dark:border-amber-800/45 dark:bg-amber-900/20",
      )}
    >
      <p className="flex items-center gap-1.5 text-[12px] font-semibold text-zinc-700 dark:text-zinc-200">
        <Icon className="h-3.5 w-3.5" />
        {title}
      </p>
      <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-300">{value}</p>
    </div>
  );
}