import React from "react";
import { useNavigate } from "react-router-dom";
import NavBar from "@/components/NavBar";
import SyncSettings from "@/components/SyncSettings";
import AppVersionInfo from "@/components/AppVersionInfo";
import {
  User,
  CreditCard,
  Bell,
  Lock,
  HelpCircle,
  LogOut,
  ChevronRight,
  Smartphone,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useAuth } from "@/hooks/auth/useClerkAuth";
import { useToast } from "@/hooks/useToast.wrapper";
import SafeAreaContainer from "@/components/SafeAreaContainer";

// 개발 모드 체크
const isDevelopment = process.env.NODE_ENV === "development";

const SettingsOption = ({
  icon: Icon,
  label,
  description,
  onClick,
  color = "text-neuro-income",
  disabled = false,
}: {
  icon: React.ElementType;
  label: string;
  description?: string;
  onClick?: () => void;
  color?: string;
  disabled?: boolean;
}) => {
  return (
    <div
      className={cn(
        "neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex",
        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
      )}
      onClick={disabled ? undefined : onClick}
    >
      <div className="flex items-center">
        <div className={cn("neuro-pressed p-3 rounded-full mr-4", color)}>
          <Icon size={20} />
        </div>
        <div className="flex-1">
          <h3 className="font-medium text-left">{label}</h3>
          {description && (
            <p className="text-xs text-gray-500 text-left">{description}</p>
          )}
        </div>
        <ChevronRight size={18} className="text-gray-400" />
      </div>
    </div>
  );
};

const Settings = () => {
  const navigate = useNavigate();
  const { isSignedIn, userId } = useAuth();
  const { toast: _toast } = useToast();

  const handleLogout = async () => {
    // Clerk의 signOut은 다른 방식으로 처리됨
    // 현재는 Mock 환경이므로 단순히 로그인 페이지로 이동
    navigate("/login");
  };

  const _handleClick = (path: string) => {
    navigate(path);
  };

  return (
    <SafeAreaContainer className="min-h-screen bg-neuro-background">
      <div className="max-w-md mx-auto px-6 pb-24">
        {/* Header */}
        <header className="py-4">
          <h1 className="font-bold neuro-text mb-3 text-xl">설정</h1>

          {/* User Profile */}
          <div className="neuro-flat p-6 mb-8">
            {isSignedIn ? (
              <div className="flex items-center">
                <div className="neuro-flat p-3 rounded-full mr-4 text-neuro-income">
                  <User size={24} />
                </div>
                <div>
                  <h2 className="font-semibold text-lg">사용자</h2>
                  <p className="text-sm text-gray-500">
                    {userId ? `ID: ${userId.substring(0, 8)}...` : "인증됨"}
                  </p>
                </div>
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center text-center py-3">
                <div className="neuro-flat p-3 rounded-full mb-3 text-neuro-income">
                  <User size={24} />
                </div>
                <h2 className="font-semibold text-lg">로그인 필요</h2>
                <p className="text-sm text-gray-500">계정에 로그인하세요</p>
              </div>
            )}
          </div>
        </header>

        {/* Data Sync Settings */}
        <div className="mb-8">
          <SyncSettings />
        </div>

        {/* Settings Options */}
        <div className="space-y-4 mb-8">
          <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">계정</h2>
          <SettingsOption
            icon={User}
            label="프로필 관리"
            description="프로필 및 비밀번호 설정"
            onClick={() =>
              isSignedIn ? navigate("/profile") : navigate("/login")
            }
          />
          <SettingsOption
            icon={CreditCard}
            label="결제 방법"
            description="카드 및 은행 계좌 관리"
            onClick={() =>
              isSignedIn ? navigate("/payment-methods") : navigate("/login")
            }
          />
          <SettingsOption
            icon={Bell}
            label="알림 설정"
            description="앱 알림 및 리마인더"
            onClick={() =>
              isSignedIn ? navigate("/notifications") : navigate("/login")
            }
          />
        </div>

        <div className="space-y-4 mb-8">
          <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">
            앱 설정
          </h2>
          <SettingsOption
            icon={Lock}
            label="보안 및 개인정보"
            description="보안 및 데이터 설정"
            onClick={() => navigate("/security-privacy")}
          />
          <SettingsOption
            icon={HelpCircle}
            label="도움말 및 지원"
            description="FAQ 및 고객 지원"
            onClick={() => navigate("/help-support")}
          />
          {isDevelopment && (
            <SettingsOption
              icon={Smartphone}
              label="PWA 디버그"
              description="Progressive Web App 기능 테스트"
              onClick={() => navigate("/pwa-debug")}
              color="text-blue-500"
            />
          )}
        </div>

        <div className="mt-8">
          <SettingsOption
            icon={LogOut}
            label={isSignedIn ? "로그아웃" : "로그인"}
            color="text-neuro-expense"
            onClick={isSignedIn ? handleLogout : () => navigate("/login")}
          />
        </div>

        <div className="mt-10 border-t border-gray-200 pt-4 text-center">
          <div className="flex justify-center">
            <AppVersionInfo
              showDevInfo={true}
              editable={true}
              className="w-full"
            />
          </div>

          {/* 맨 아래 추가 여백 100px */}
          <div className="h-[100px]"></div>
        </div>
      </div>

      <NavBar />
    </SafeAreaContainer>
  );
};

export default Settings;