"use client";

import { Info } 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";

/**
 * @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-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">
          한국투자증권 연결 설정
        </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>
        <div className="mt-2 flex flex-wrap items-center gap-2 text-sm">
          <span className="font-medium text-foreground">계좌 인증 상태:</span>
          {isKisProfileVerified ? (
            <span className="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-900/35 dark:text-emerald-200">
              확인됨 ({maskAccountNo(verifiedAccountNo)})
            </span>
          ) : (
            <span className="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-1 text-xs font-semibold text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
              미확인
            </span>
          )}
        </div>
      </article>

      {/* ========== PRIVACY NOTICE ========== */}
      <article className="rounded-2xl border border-amber-300 bg-amber-50/70 p-4 text-sm text-amber-900 dark:border-amber-700/60 dark:bg-amber-950/30 dark:text-amber-200">
        <p className="flex items-start gap-2 font-medium">
          <Info className="mt-0.5 h-4 w-4 shrink-0" />
          입력 정보 보관 안내
        </p>
        <p className="mt-2 text-xs leading-relaxed text-amber-800/90 dark:text-amber-200/90">
          이 화면에서 입력한 한국투자증권 앱키, 앱시크릿키, 계좌번호는 서버 DB에 저장하지 않습니다.
          현재 사용 중인 브라우저(클라이언트)에서만 관리되며, 연결 해제 시 즉시 지울 수 있습니다.
        </p>
      </article>

      {/* ========== FORM GRID ========== */}
      <div className="grid gap-4 lg:grid-cols-2">
        <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 "********-**";
}