import React, { useState } from 'react';
import { message } from 'antd';
import './SettingsView.css';

const SettingsView = ({ user, onLogout }) => {
  const [activeTab, setActiveTab] = useState('profile');
  const [nickname, setNickname] = useState(user?.username || '');
  const [bio, setBio] = useState('');

  const handleSave = () => {
    message.success('保存成功');
  };

  const tabs = [
    { key: 'profile', label: '个人资料', icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/><circle cx="12" cy="7" r="4" stroke="currentColor" strokeWidth="2"/></svg> },
    { key: 'security', label: '账号安全', icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg> },
    { key: 'notify', label: '通知设置', icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg> },
    { key: 'appearance', label: '外观设置', icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="5" stroke="currentColor" strokeWidth="2"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg> },
    { key: 'about', label: '关于我们', icon: <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/><line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/><line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg> },
  ];

  const renderContent = () => {
    if (activeTab === 'profile') {
      return (
        <div className="sv-profile">
          <h2 className="sv-content-title">个人资料</h2>
          <p className="sv-content-sub">更新您的个人信息并管理您的公开个人档案，这有助于我们在为您提供 AI 服务时更加精准。</p>

          <div className="sv-profile-body">
            {/* 头像卡片 */}
            <div className="sv-avatar-card">
              <div className="sv-avatar-circle">
                {user?.username?.[0]?.toUpperCase() || 'U'}
              </div>
              <div className="sv-avatar-label">您的头像</div>
              <div className="sv-avatar-hint">建议使用 400x400 像素以上的 JPG 或 PNG 图片。</div>
              <button className="sv-avatar-btn">更换图片</button>
            </div>

            {/* 表单 */}
            <div className="sv-form-card">
              <div className="sv-form-row">
                <div className="sv-form-group">
                  <label className="sv-label">
                    昵称 <span className="sv-label-hint">公开显示</span>
                  </label>
                  <input
                    className="sv-input"
                    value={nickname}
                    onChange={e => setNickname(e.target.value)}
                    placeholder="您的昵称"
                  />
                </div>
                <div className="sv-form-group">
                  <label className="sv-label">
                    电子邮箱
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" style={{marginLeft:4}}><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z" fill="#9ca3af"/></svg>
                  </label>
                  <input
                    className="sv-input sv-input-disabled"
                    value={user?.email || 'user@lingxi.ai'}
                    disabled
                    placeholder="邮箱地址"
                  />
                </div>
              </div>

              <div className="sv-form-row">
                <div className="sv-form-group">
                  <label className="sv-label">手机号码</label>
                  <div className="sv-phone-wrap">
                    <select className="sv-phone-code">
                      <option>+86</option>
                      <option>+1</option>
                    </select>
                    <input className="sv-input sv-input-phone" placeholder="138 **** 9012" />
                  </div>
                </div>
                <div className="sv-form-group">
                  <label className="sv-label">当前身份</label>
                  <div className="sv-tags">
                    <span className="sv-tag sv-tag-pro">⚡ 专业版用户</span>
                    <span className="sv-tag">开发者</span>
                  </div>
                </div>
              </div>

              <div className="sv-form-group sv-form-group-full">
                <label className="sv-label">个人简介</label>
                <textarea
                  className="sv-textarea"
                  value={bio}
                  onChange={e => setBio(e.target.value)}
                  placeholder="介绍一下自己..."
                  maxLength={200}
                  rows={4}
                />
                <div className="sv-char-count">{bio.length} / 200 字</div>
              </div>

              <div className="sv-form-actions">
                <button className="sv-btn-ghost" onClick={() => { setNickname(user?.username || ''); setBio(''); }}>取消重置</button>
                <button className="sv-btn-primary" onClick={handleSave}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/><polyline points="17 21 17 13 7 13 7 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/><polyline points="7 3 7 8 15 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  保存更改
                </button>
              </div>
            </div>
          </div>

          {/* 第三方关联 */}
          <div className="sv-third-party">
            <div className="sv-tp-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke="#4f46e5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <div className="sv-tp-info">
              <div className="sv-tp-title">第三方关联</div>
              <div className="sv-tp-sub">已关联 微信, GitHub</div>
            </div>
            <button className="sv-tp-link">管理关联 →</button>
          </div>
        </div>
      );
    }

    // 其他 tab 占位
    const labels = { security: '账号安全', notify: '通知设置', appearance: '外观设置', about: '关于我们' };
    return (
      <div className="sv-placeholder">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#d1d5db" strokeWidth="1.5"/><path d="M12 8v4M12 16h.01" stroke="#d1d5db" strokeWidth="2" strokeLinecap="round"/></svg>
        <div className="sv-placeholder-title">{labels[activeTab]}</div>
        <div className="sv-placeholder-sub">该功能正在开发中，敬请期待</div>
      </div>
    );
  };

  return (
    <div className="sv-root">
      {/* 左侧设置导航 */}
      <aside className="sv-sidebar">
        <div className="sv-sidebar-header">
          <div className="sv-sidebar-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="white" strokeWidth="2"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M20 12h-2M6 12H4M19.07 19.07l-1.41-1.41M5.34 5.34L3.93 3.93M12 20v-2M12 6V4" stroke="white" strokeWidth="2" strokeLinecap="round"/></svg>
          </div>
          <div>
            <div className="sv-sidebar-title">设置中心</div>
            <div className="sv-sidebar-sub">管理您的偏好设置</div>
          </div>
        </div>

        <nav className="sv-nav">
          {tabs.map(tab => (
            <button
              key={tab.key}
              className={`sv-nav-item ${activeTab === tab.key ? 'sv-nav-active' : ''}`}
              onClick={() => setActiveTab(tab.key)}
            >
              <span className="sv-nav-icon">{tab.icon}</span>
              {tab.label}
            </button>
          ))}
        </nav>

        <div className="sv-sidebar-footer">
          <button className="sv-logout-btn" onClick={onLogout}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            退出登录
          </button>
        </div>
      </aside>

      {/* 右侧内容 */}
      <div className="sv-content">
        {renderContent()}

        <div className="sv-footer">
          <span>© 2024 灵犀智能</span>
          <span>隐私政策</span>
          <span>服务条款</span>
          <span className="sv-footer-status">
            <span className="sv-status-dot" />
            系统状态：运行良好
          </span>
        </div>
      </div>
    </div>
  );
};

export default SettingsView;
