// ================================================================
// Settings modal
// ================================================================

const SettingsModal = ({ onClose, theme, onThemeChange, density, onDensityChange, accent, onAccentChange }) => {
  const [section, setSection] = React.useState('general');

  const sections = [
    { id: 'general', label: 'General' },
    { id: 'expertise', label: 'Expertise' },
    { id: 'appearance', label: 'Appearance' },
    { id: 'connections', label: 'Links' },
  ];

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div className="modal-title">Settings</div>
          <div className="modal-close" onClick={onClose}><Icon name="x" /></div>
        </div>
        <div className="modal-body">
          <div className="settings-nav">
            {sections.map(s => (
              <div key={s.id} className="settings-nav-item" data-active={section === s.id} onClick={() => setSection(s.id)}>
                {s.label}
              </div>
            ))}
          </div>
          <div className="settings-content">
            {section === 'general' && (
              <>
                <div className="profile-block">
                  <div className="user-avatar">SK</div>
                  <div style={{ flex: 1 }}>
                    <div className="profile-name">Sai Krishna Durisala</div>
                    <div className="profile-email">durisalasaikrishna9@gmail.com</div>
                  </div>
                </div>
                <div className="settings-section">
                  <div className="settings-section-title">About</div>
                  <div className="setting-row">
                    <div className="setting-label">
                      <div className="name">Role</div>
                      <div className="desc">Technical Consultant at Salesforce (MuleSoft practice)</div>
                    </div>
                  </div>
                  <div className="setting-row">
                    <div className="setting-label">
                      <div className="name">Location</div>
                      <div className="desc">Hyderabad, India · Remote-friendly</div>
                    </div>
                  </div>
                  <div className="setting-row">
                    <div className="setting-label">
                      <div className="name">Experience</div>
                      <div className="desc">8+ years in enterprise integration and AI-powered systems</div>
                    </div>
                  </div>
                </div>
              </>
            )}

            {section === 'appearance' && (
              <>
                <div className="settings-section">
                  <div className="settings-section-title">Theme</div>
                  <div className="setting-row">
                    <div className="setting-label">
                      <div className="name">Color mode</div>
                      <div className="desc">Switch between light and dark.</div>
                    </div>
                    <div className="select-pill">
                      <button data-active={theme === 'light'} onClick={() => onThemeChange('light')}>Light</button>
                      <button data-active={theme === 'dark'} onClick={() => onThemeChange('dark')}>Dark</button>
                    </div>
                  </div>
                  <div className="setting-row">
                    <div className="setting-label">
                      <div className="name">Density</div>
                      <div className="desc">How much breathing room between elements.</div>
                    </div>
                    <div className="select-pill">
                      <button data-active={density === 'comfortable'} onClick={() => onDensityChange('comfortable')}>Comfortable</button>
                      <button data-active={density === 'compact'} onClick={() => onDensityChange('compact')}>Compact</button>
                    </div>
                  </div>
                  <div className="setting-row">
                    <div className="setting-label">
                      <div className="name">Accent color</div>
                      <div className="desc">Shown in highlights, links and sends.</div>
                    </div>
                    <div className="swatch-row">
                      {['cobalt', 'plum', 'sage', 'amber', 'coral'].map(c => (
                        <div key={c} className="swatch" data-active={accent === c} style={{ background: ACCENT_MAP[c] }} onClick={() => onAccentChange(c)} />
                      ))}
                    </div>
                  </div>
                </div>
              </>
            )}

            {section === 'expertise' && (
              <>
                <div className="settings-section-title">Areas of expertise</div>
                {window.LUMEN_DATA.AGENTS.map(a => (
                  <div key={a.id} className="setting-row">
                    <div className="agent-avatar lg" style={{ background: a.color, marginRight: 12 }}>{a.initial}</div>
                    <div className="setting-label">
                      <div className="name">{a.name} <span style={{ color: 'var(--ink-mute)', fontWeight: 400 }}>· {a.role}</span></div>
                      <div className="desc">{a.desc}</div>
                    </div>
                  </div>
                ))}
              </>
            )}

            {section === 'connections' && (
              <div className="settings-section">
                <div className="settings-section-title">Find me online</div>
                {[
                  { name: 'LinkedIn', desc: 'linkedin.com/in/saikrishna-durisala', href: 'https://linkedin.com/in/saikrishna-durisala' },
                  { name: 'GitHub', desc: 'github.com/saikrishnadurisala', href: 'https://github.com/saikrishnadurisala' },
                  { name: 'Medium', desc: 'medium.com/@saikrishna1736 · MuleSoft series', href: 'https://medium.com/@saikrishna1736' },
                  { name: 'Email', desc: 'durisalasaikrishna9@gmail.com', href: 'mailto:durisalasaikrishna9@gmail.com' },
                ].map(link => (
                  <div key={link.name} className="setting-row">
                    <div className="setting-label">
                      <div className="name">{link.name}</div>
                      <div className="desc">{link.desc}</div>
                    </div>
                    <a href={link.href} target="_blank" rel="noopener noreferrer">
                      <button className="suggest-chip" style={{ padding: '5px 12px', fontSize: 12 }}>Open</button>
                    </a>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

const ACCENT_MAP = {
  cobalt: 'oklch(0.55 0.15 255)',
  plum: 'oklch(0.55 0.15 305)',
  sage: 'oklch(0.55 0.13 145)',
  amber: 'oklch(0.62 0.13 75)',
  coral: 'oklch(0.62 0.14 30)',
};

window.SettingsModal = SettingsModal;
window.ACCENT_MAP = ACCENT_MAP;