// Settings modal — API keys + Style presets + Workspace

// Default style prompt templates — these get composed with the section's own style chip
const STYLE_PROMPT_TEMPLATES = {
  normal: {
    title: { vi: 'Normal',      en: 'Normal' },
    subtitle: { vi: 'Default tone, không thiên về style nào', en: 'Default tone, no specific style' },
    template: 'Trả lời chuẩn mực, cân bằng giữa thân thiện và chuyên nghiệp. Format: paragraph + bullet khi cần. Tránh ngôn ngữ markets/hype.',
  },
  concise: {
    title: { vi: 'Concise',     en: 'Concise' },
    subtitle: { vi: 'Bắt thẳng, bỏ fluff', en: 'Get to the point, no fluff' },
    template: 'Trả lời cực ngắn, mỗi ý ≤ 18 từ. Bullets thay vì paragraph. Bỏ mọi từ thừa: "rằng", "thực sự", "có thể nói". Mở đầu bằng động từ hoặc số.',
  },
  explanatory: {
    title: { vi: 'Explanatory', en: 'Explanatory' },
    subtitle: { vi: 'Giải bày từng bước', en: 'Walk through step by step' },
    template: 'Giải thích từng bước "vì sao". Mỗi claim có ví dụ/số liệu hỗ trợ. Dùng metaphor khi giúp người mới hiểu. Format: heading + paragraph + ví dụ.',
  },
  analytical: {
    title: { vi: 'Analytical',  en: 'Analytical' },
    subtitle: { vi: 'Insight-driven, có số', en: 'Insight-driven, data-backed' },
    template: 'Mỗi insight phải có evidence: số liệu, benchmark, hoặc framework. Cấu trúc: Claim → Evidence → Implication. Tránh adjective cảm tính ("tuyệt vời", "đỉnh"). Dùng comparison ("X gấp 2.3x Y").',
  },
  creative: {
    title: { vi: 'Creative',    en: 'Creative' },
    subtitle: { vi: 'Hook mạnh, lạ', en: 'Bold hooks, unusual angle' },
    template: 'Hook đầu tiên ≤ 6 chữ, gây tò mò. Dùng metaphor ngược chiều, contrast lớn, hoặc câu hỏi khiêu khích. Cho phép emoji tinh tế (≤ 1 / segment). Tránh cliché marketer ("đột phá", "game-changer").',
  },
  formal: {
    title: { vi: 'Formal',      en: 'Formal' },
    subtitle: { vi: 'Pitch deck, báo cáo', en: 'Pitch deck, formal report' },
    template: 'Văn phong báo cáo: "chúng tôi" thay vì "mình". Câu đầy đủ chủ-vị. Số liệu kèm đơn vị và nguồn (giả định nếu cần). Tránh slang & viết tắt. Heading hierarchy rõ.',
  },
};

const API_PROVIDERS = [
  { id: 'ai-agent', name: 'AI Agent',           sub: 'Standard · Fast · Pro · Creative', icon: 'cpu',       color: '#66FCF1', status: 'connected', managed: true },
  { id: 'meta-api', name: 'Meta Marketing API', sub: 'Ad publish · Audience sync',        icon: 'megaphone', color: '#1877F2', status: 'connected', keyMask: 'EAAB••••••••••••rT3z' },
];

const SettingsModal = ({ open, onClose, lang }) => {
  const [tab, setTab] = React.useState('api');
  const [providers, setProviders] = React.useState(API_PROVIDERS);
  const [styles, setStyles] = React.useState(STYLE_PROMPT_TEMPLATES);
  const [defaultModel, setDefaultModel] = React.useState('agent-standard');
  const [revealKey, setRevealKey] = React.useState({});

  if (!open) return null;

  const T = (vi, en) => lang === 'en' ? en : vi;

  return (
    <div className="settings-backdrop" onClick={onClose}>
      <div className="settings-modal" onClick={e => e.stopPropagation()}>
        <div className="settings-head">
          <div>
            <h2 className="settings-title">
              <Icon name="settings" size={18} color="var(--accent-cyan)" />
              {T('Cài đặt', 'Settings')}
            </h2>
            <div className="settings-subtitle">
              {T('Workspace · Loomi AI · sync mọi screen', 'Workspace · Loomi AI · syncs across all screens')}
            </div>
          </div>
          <button className="settings-close" onClick={onClose}>
            <Icon name="x" size={16} />
          </button>
        </div>

        <div className="settings-tabs">
          <button className={`settings-tab ${tab === 'api' ? 'active' : ''}`} onClick={() => setTab('api')}>
            <Icon name="key-round" size={13} />
            {T('API AI', 'API AI')}
          </button>
          <button className={`settings-tab ${tab === 'style' ? 'active' : ''}`} onClick={() => setTab('style')}>
            <Icon name="palette" size={13} />
            {T('Style presets', 'Style presets')}
          </button>
          <button className={`settings-tab ${tab === 'workspace' ? 'active' : ''}`} onClick={() => setTab('workspace')}>
            <Icon name="folder-cog" size={13} />
            {T('Workspace', 'Workspace')}
          </button>
        </div>

        <div className="settings-body">
          {tab === 'api' && (
            <div>
              <div className="settings-section-head">
                <div>
                  <h3>{T('API keys cho AI model', 'AI model API keys')}</h3>
                  <p>{T(
                    'Connect mỗi provider 1 lần — dùng được trên mọi screen. Model default sẽ áp dụng khi tạo node mới.',
                    'Connect each provider once — usable across all screens. Default model applies to newly created nodes.'
                  )}</p>
                </div>
                <Btn variant="secondary" size="sm" icon="plus">{T('Thêm provider', 'Add provider')}</Btn>
              </div>

              <div className="settings-list">
                {providers.map(p => (
                  <div key={p.id} className={`api-row ${p.status === 'connected' ? 'connected' : ''}`}>
                    <div className="api-row-head">
                      <div className="api-row-icon" style={{ background: `${p.color}22`, color: p.color }}>
                        <Icon name={p.icon} size={16} />
                      </div>
                      <div className="api-row-meta">
                        <div className="api-row-name">{p.name}</div>
                        <div className="api-row-sub">{p.sub}</div>
                      </div>
                      <Badge
                        label={p.status === 'connected' ? T('Connected', 'Connected') : T('Chưa kết nối', 'Not connected')}
                        color={p.status === 'connected' ? 'var(--success)' : 'var(--fg-muted)'}
                        bg={p.status === 'connected' ? 'rgba(74,222,128,0.10)' : 'var(--bg-elevated)'}
                        pulse={p.status === 'connected'}
                      />
                    </div>
                    <div className="api-row-body">
                      <div className="api-key-field">
                        <span className="api-key-label">API Key</span>
                        {p.managed ? (
                          <div style={{
                            padding: '7px 11px',
                            background: 'var(--bg-surface-2)',
                            border: '1px solid var(--border-subtle)',
                            borderRadius: 6,
                            fontSize: 12,
                            color: 'var(--fg-muted)',
                            fontFamily: 'var(--font-mono)',
                            letterSpacing: '0.04em',
                          }}>
                            {T('Đã cấu hình · Quản lý nội bộ', 'Configured · Managed internally')}
                          </div>
                        ) : (
                          <div className="api-key-input-wrap">
                            <input
                              type={revealKey[p.id] ? 'text' : 'password'}
                              className="api-key-input"
                              placeholder={p.status === 'connected' ? p.keyMask : T('Dán API key của bạn ở đây…', 'Paste your API key here…')}
                              defaultValue={p.status === 'connected' ? p.keyMask : ''}
                            />
                            <button className="api-key-eye" onClick={() => setRevealKey(r => ({ ...r, [p.id]: !r[p.id] }))}>
                              <Icon name={revealKey[p.id] ? 'eye-off' : 'eye'} size={12} />
                            </button>
                          </div>
                        )}
                      </div>
                      <div className="api-row-actions">
                        {!p.managed && <Btn variant="ghost" size="sm" icon="check">{T('Test', 'Test')}</Btn>}
                        {p.status === 'connected'
                          ? <Btn variant="ghost" size="sm" icon="unlink">{T('Disconnect', 'Disconnect')}</Btn>
                          : <Btn variant="primary" size="sm" icon="link">{T('Connect', 'Connect')}</Btn>}
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="settings-default-model">
                <span className="api-key-label">{T('Model mặc định cho node mới', 'Default model for new nodes')}</span>
                <select
                  className="api-key-input"
                  value={defaultModel}
                  onChange={(e) => setDefaultModel(e.target.value)}
                >
                  {AI_MODELS.map(m => <option key={m.id} value={m.id}>{m.label} · best for {m.good}</option>)}
                </select>
              </div>
            </div>
          )}

          {tab === 'style' && (
            <div>
              <div className="settings-section-head">
                <div>
                  <h3>{T('Style presets', 'Style presets')}</h3>
                  <p>{T(
                    'Prompt template cho mỗi style. Áp dụng đồng nhất trên "Sản phẩm", "Chân dung KH", "Content", "Digital Ads", "Ads Data". Section chỉ pick style id; prompt thực được đọc từ đây.',
                    'Prompt template for each style. Applied consistently across Product, Persona, Content, Ads, and Data screens.'
                  )}</p>
                </div>
                <Btn variant="secondary" size="sm" icon="plus">{T('Tạo style mới', 'Create style')}</Btn>
              </div>

              <div className="settings-list">
                {Object.entries(styles).map(([id, s]) => (
                  <StyleEditor
                    key={id}
                    id={id}
                    style={s}
                    lang={lang}
                    onChange={(patch) => setStyles(st => ({ ...st, [id]: { ...st[id], ...patch } }))}
                  />
                ))}
              </div>

              <div className="settings-info">
                <Icon name="info" size={13} color="var(--accent-blue)" />
                <span>{T(
                  'Style chip ở đầu mỗi section ghi đè preset này (per-section). Để reset, xoá style chip — sẽ rơi về template ở đây.',
                  'Each section\'s style chip overrides these presets. Clear the chip to revert to these templates.'
                )}</span>
              </div>
            </div>
          )}

          {tab === 'workspace' && (
            <div>
              <div className="settings-section-head">
                <div>
                  <h3>{T('Workspace', 'Workspace')}</h3>
                  <p>{T('Cài đặt project, member, billing — preview only.', 'Project, members, billing — preview only.')}</p>
                </div>
              </div>

              <div className="workspace-grid">
                <WorkspaceTile icon="folder" label={T('Project name', 'Project name')} value="Loomi AI" />
                <WorkspaceTile icon="users" label={T('Members', 'Members')} value="3 · Owner" />
                <WorkspaceTile icon="cloud" label={T('Storage', 'Storage')} value="218 / 5,000 MB" />
                <WorkspaceTile icon="cpu" label={T('AI credits', 'AI credits')} value="$12.40 / $50" />
              </div>
            </div>
          )}
        </div>

        <div className="settings-foot">
          <span style={{ fontSize: 11, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>
            {T('Auto-saved · v3 · ', 'Auto-saved · v3 · ')}
            <kbd className="kbd" style={{ marginLeft: 4 }}>Esc</kbd>
            {T(' để đóng', ' to close')}
          </span>
          <div className="btn-row">
            <Btn variant="secondary" size="sm" onClick={onClose}>{T('Huỷ', 'Cancel')}</Btn>
            <Btn variant="primary" size="sm" icon="check" onClick={onClose}>{T('Lưu thay đổi', 'Save changes')}</Btn>
          </div>
        </div>
      </div>
    </div>
  );
};

const StyleEditor = ({ id, style, lang, onChange }) => {
  const [open, setOpen] = React.useState(id === 'analytical');
  const T = (vi, en) => lang === 'en' ? en : vi;
  return (
    <div className="style-row">
      <button className="style-row-head" onClick={() => setOpen(o => !o)}>
        <div className="style-row-icon">
          <Icon name="palette" size={13} color="var(--accent-purple)" />
        </div>
        <div className="style-row-meta">
          <div className="style-row-name">{style.title[lang === 'en' ? 'en' : 'vi']}</div>
          <div className="style-row-sub">{style.subtitle[lang === 'en' ? 'en' : 'vi']}</div>
        </div>
        <span className="style-row-preview" title={style.template}>
          {(style.template || '').slice(0, 60)}…
        </span>
        <Icon name={open ? 'chevron-up' : 'chevron-down'} size={14} color="var(--fg-secondary)" />
      </button>
      {open && (
        <div className="style-row-body fade-in">
          <span className="api-key-label" style={{ marginBottom: 5, display: 'block' }}>
            {T('Prompt template', 'Prompt template')}
          </span>
          <textarea
            className="style-prompt-area"
            value={style.template}
            rows={4}
            onChange={(e) => onChange({ template: e.target.value })}
          />
          <div className="style-row-actions">
            <Btn variant="ghost" size="sm" icon="rotate-ccw">{T('Reset về default', 'Reset to default')}</Btn>
            <span style={{ fontSize: 10.5, color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>
              ID: {id}
            </span>
          </div>
        </div>
      )}
    </div>
  );
};

const WorkspaceTile = ({ icon, label, value }) => (
  <div className="workspace-tile">
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
      <Icon name={icon} size={14} color="var(--fg-muted)" />
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-muted)', letterSpacing: '0.10em', textTransform: 'uppercase' }}>{label}</span>
    </div>
    <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, color: 'var(--fg-primary)', letterSpacing: '-0.01em' }}>{value}</div>
  </div>
);

Object.assign(window, { SettingsModal, STYLE_PROMPT_TEMPLATES });