import React from 'react';
import { useNavigate } from 'react-router-dom';
import NavBar from '@/components/NavBar';
import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';

const SettingsOption = ({ 
  icon: Icon, 
  label, 
  description, 
  onClick,
  color = "text-neuro-income"
}: { 
  icon: React.ElementType; 
  label: string; 
  description?: string;
  onClick?: () => void;
  color?: string;
}) => {
  return (
    <div 
      className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex cursor-pointer" 
      onClick={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">{label}</h3>
          {description && <p className="text-xs text-gray-500">{description}</p>}
        </div>
        <ChevronRight size={18} className="text-gray-400" />
      </div>
    </div>
  );
};

const Settings = () => {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-neuro-background pb-24">
      <div className="max-w-md mx-auto px-6">
        {/* Header */}
        <header className="py-8">
          <h1 className="text-2xl font-bold neuro-text mb-6">설정</h1>
          
          {/* User Profile */}
          <div className="neuro-flat p-6 mb-8 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">honggildong@example.com</p>
            </div>
          </div>
        </header>
        
        {/* 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={() => navigate('/profile-management')}
          />
          <SettingsOption 
            icon={CreditCard} 
            label="결제 방법" 
            description="카드 및 은행 계좌 관리"
          />
          <SettingsOption 
            icon={Bell} 
            label="알림 설정" 
            description="앱 알림 및 리마인더"
            onClick={() => navigate('/notification-settings')}
          />
        </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-settings')}
          />
          <SettingsOption 
            icon={HelpCircle} 
            label="도움말 및 지원" 
            description="FAQ 및 고객 지원"
          />
        </div>
        
        <div className="mt-8">
          <SettingsOption 
            icon={LogOut} 
            label="로그아웃" 
            color="text-neuro-expense"
          />
        </div>
        
        <div className="mt-12 text-center text-xs text-gray-400">
          <p>앱 버전 1.0.0</p>
        </div>
      </div>

      <NavBar />
    </div>
  );
};

export default Settings;