import React, { useState } from 'react';
import Layout from '@/components/Layout';
import { Settings, Save, RefreshCw, AlertCircle, CheckCircle } from 'lucide-react';

const SettingsPage: React.FC = () => {
  const [apiUrl, setApiUrl] = useState(process.env.NEXT_PUBLIC_API_URL || 'http://localhost:18001/api/v1');
  const [autoRefresh, setAutoRefresh] = useState(true);
  const [refreshInterval, setRefreshInterval] = useState(30);
  const [theme, setTheme] = useState('light');
  const [notifications, setNotifications] = useState(true);
  const [savedMessage, setSavedMessage] = useState('');

  const handleSave = () => {
    // 여기서 실제로는 localStorage나 서버에 설정을 저장
    localStorage.setItem('stockOracleSettings', JSON.stringify({
      apiUrl,
      autoRefresh,
      refreshInterval,
      theme,
      notifications,
    }));
    
    setSavedMessage('설정이 저장되었습니다.');
    setTimeout(() => setSavedMessage(''), 3000);
  };

  const handleReset = () => {
    setApiUrl('http://localhost:18001/api/v1');
    setAutoRefresh(true);
    setRefreshInterval(30);
    setTheme('light');
    setNotifications(true);
  };

  return (
    <Layout title="Stock Oracle - 설정">
      <div className="space-y-6">
        {/* 헤더 */}
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold text-gray-900 flex items-center">
            <Settings className="h-6 w-6 mr-2 text-blue-600" />
            시스템 설정
          </h2>
        </div>

        {/* 성공 메시지 */}
        {savedMessage && (
          <div className="bg-green-50 border border-green-200 rounded-md p-4">
            <div className="flex items-center">
              <CheckCircle className="h-5 w-5 text-green-400 mr-2" />
              <p className="text-green-800">{savedMessage}</p>
            </div>
          </div>
        )}

        {/* API 설정 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">API 설정</h3>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                API URL
              </label>
              <input
                type="url"
                value={apiUrl}
                onChange={(e) => setApiUrl(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="http://localhost:18001/api/v1"
              />
              <p className="text-xs text-gray-500 mt-1">
                Stock Oracle API 서버의 주소를 입력하세요.
              </p>
            </div>

            <div className="flex items-center">
              <input
                type="checkbox"
                id="autoRefresh"
                checked={autoRefresh}
                onChange={(e) => setAutoRefresh(e.target.checked)}
                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
              />
              <label htmlFor="autoRefresh" className="ml-2 block text-sm text-gray-700">
                자동 새로고침 활성화
              </label>
            </div>

            {autoRefresh && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  새로고침 간격 (초)
                </label>
                <select
                  value={refreshInterval}
                  onChange={(e) => setRefreshInterval(Number(e.target.value))}
                  className="w-32 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                  <option value={15}>15초</option>
                  <option value={30}>30초</option>
                  <option value={60}>1분</option>
                  <option value={300}>5분</option>
                </select>
              </div>
            )}
          </div>
        </div>

        {/* 사용자 인터페이스 설정 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">사용자 인터페이스</h3>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                테마
              </label>
              <select
                value={theme}
                onChange={(e) => setTheme(e.target.value)}
                className="w-32 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="light">라이트</option>
                <option value="dark">다크</option>
                <option value="auto">시스템 설정</option>
              </select>
            </div>

            <div className="flex items-center">
              <input
                type="checkbox"
                id="notifications"
                checked={notifications}
                onChange={(e) => setNotifications(e.target.checked)}
                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
              />
              <label htmlFor="notifications" className="ml-2 block text-sm text-gray-700">
                알림 활성화
              </label>
            </div>
          </div>
        </div>

        {/* 데이터 설정 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">데이터 설정</h3>
          
          <div className="space-y-4">
            <div className="bg-yellow-50 border border-yellow-200 rounded-md p-4">
              <div className="flex items-start">
                <AlertCircle className="h-5 w-5 text-yellow-400 mr-2 mt-0.5" />
                <div>
                  <h4 className="text-sm font-medium text-yellow-800">데이터 새로고침 주의사항</h4>
                  <p className="text-sm text-yellow-700 mt-1">
                    강제 새로고침은 외부 API 호출을 발생시켜 응답 시간이 길어질 수 있습니다.
                    일반적으로 캐시된 데이터를 사용하는 것을 권장합니다.
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
              <div className="flex items-start">
                <AlertCircle className="h-5 w-5 text-blue-400 mr-2 mt-0.5" />
                <div>
                  <h4 className="text-sm font-medium text-blue-800">실제 vs 추정 데이터</h4>
                  <p className="text-sm text-blue-700 mt-1">
                    실제 데이터는 SEC EDGAR에서 가져온 정확한 재무 데이터입니다.
                    추정 데이터는 기존 시스템에서 생성된 임시 데이터입니다.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 시스템 정보 */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">시스템 정보</h3>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <p className="text-sm text-gray-500">버전</p>
              <p className="text-lg font-medium text-gray-900">Stock Oracle v1.0.0</p>
            </div>
            <div>
              <p className="text-sm text-gray-500">빌드 날짜</p>
              <p className="text-lg font-medium text-gray-900">{new Date().toLocaleDateString('ko-KR')}</p>
            </div>
            <div>
              <p className="text-sm text-gray-500">현재 API URL</p>
              <p className="text-lg font-medium text-gray-900 break-all">{apiUrl}</p>
            </div>
            <div>
              <p className="text-sm text-gray-500">브라우저 지원</p>
              <p className="text-lg font-medium text-gray-900">Chrome, Firefox, Safari, Edge</p>
            </div>
          </div>
        </div>

        {/* 액션 버튼 */}
        <div className="flex items-center justify-between">
          <button
            onClick={handleReset}
            className="flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
          >
            <RefreshCw className="h-4 w-4 mr-2" />
            기본값으로 재설정
          </button>

          <button
            onClick={handleSave}
            className="flex items-center px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          >
            <Save className="h-4 w-4 mr-2" />
            설정 저장
          </button>
        </div>
      </div>
    </Layout>
  );
};

export default SettingsPage;