"use client";

import { useShallow } from "zustand/react/shallow";
import { KisAuthForm } from "@/features/settings/components/KisAuthForm";
import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";

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

  return (
    <section className="mx-auto flex w-full max-w-5xl flex-col gap-5 p-4 md:p-6">
      {/* ========== STATUS CARD ========== */}
      <article className="rounded-2xl border border-brand-200 bg-muted/35 p-4 dark:border-brand-800/45 dark:bg-brand-900/20">
        <h1 className="text-xl font-semibold tracking-tight text-foreground">
          KIS API 설정
        </h1>
        <div className="mt-3 flex flex-wrap items-center gap-2 text-sm">
          <span className="font-medium text-foreground">연결 상태:</span>
          {isKisVerified ? (
            <span className="inline-flex items-center rounded-full bg-brand-100 px-2.5 py-1 text-xs font-semibold text-brand-700 dark:bg-brand-900/45 dark:text-brand-200">
              <span className="mr-1.5 h-2 w-2 rounded-full bg-brand-500" />
              연결됨 ({verifiedCredentials?.tradingEnv === "real" ? "실전" : "모의"})
            </span>
          ) : (
            <span className="inline-flex items-center rounded-full bg-brand-50 px-2.5 py-1 text-xs font-semibold text-brand-700 dark:bg-brand-900/30 dark:text-brand-200">
              <span className="mr-1.5 h-2 w-2 rounded-full bg-brand-300 dark:bg-brand-500/70" />
              미연결
            </span>
          )}
        </div>
      </article>

      {/* ========== AUTH FORM CARD ========== */}
      <article className="rounded-2xl border border-brand-200 bg-background p-4 shadow-sm dark:border-brand-800/45 dark:bg-brand-900/14">
        <KisAuthForm />
      </article>
    </section>
  );
}