// Settings page

// Set to false to allow editing
const SETTINGS_LOCKED = true;

const TONE_OPTIONS = [
  {
    id: 'friendly',
    label: 'Friendly & warm',
    desc: 'Like advice from a knowledgeable friend',
    instruction: 'Tone: Write like advice from a knowledgeable friend — warm, encouraging, and relatable. Use "you" naturally. Be approachable, not clinical.',
  },
  {
    id: 'calm',
    label: 'Calm & reassuring',
    desc: 'Gentle tone for anxious parents',
    instruction: 'Tone: Write with a calm, reassuring voice. Avoid alarmist language. Normalize the challenges parents face. Be gentle and supportive.',
  },
  {
    id: 'direct',
    label: 'Direct & practical',
    desc: 'Less emotion, more action-focused',
    instruction: 'Tone: Be direct and practical — less emotion, more action. Use short, clear sentences. Focus on what to do, not how to feel.',
  },
  {
    id: 'educational',
    label: 'Educational & informative',
    desc: 'Factual, structured tone',
    instruction: 'Tone: Write in an educational, informative style. Be factual and structured. Reference research where relevant. Minimize over-personalization.',
  },
];

const LENGTH_OPTIONS = [
  { id: 'short',  label: 'Short',  desc: '2 sentences per step, quick read',  instruction: 'Article length: Keep each paragraph to 2 sentences maximum. Concise and scannable.' },
  { id: 'medium', label: 'Medium', desc: '3 sentences per step, balanced',     instruction: 'Article length: Use 3 sentences per paragraph. Balanced depth and readability.' },
  { id: 'long',   label: 'Long',   desc: '4–5 sentences per step, in-depth',   instruction: 'Article length: Write 4–5 sentences per paragraph. Thorough and in-depth.' },
];

function Settings({ settings, onSaveSettings, refImages, onUploadRefImages, onDeleteRefImage, onDeleteAllRefImages, imagesUsed, imagesQuota }) {
  const [tone, setTone] = useState(settings.tone || 'friendly');
  const [length, setLength] = useState(settings.length || 'medium');
  const [illustrationStyle, setIllustrationStyle] = useState(settings.illustrationStyle || '');
  const [infographicStyle, setInfographicStyle] = useState(settings.infographicStyle || '');
  const [mockupStyle, setMockupStyle] = useState(settings.mockupStyle || '');
  const [saving1, setSaving1] = useState(false);
  const [saving2, setSaving2] = useState(false);
  const [saved1, setSaved1] = useState(false);
  const [saved2, setSaved2] = useState(false);

  useEffect(() => {
    setTone(settings.tone || 'friendly');
    setLength(settings.length || 'medium');
    setIllustrationStyle(settings.illustrationStyle || '');
    setInfographicStyle(settings.infographicStyle || '');
    setMockupStyle(settings.mockupStyle || '');
  }, [settings.tone, settings.length, settings.illustrationStyle, settings.infographicStyle, settings.mockupStyle]);

  const handleSave1 = async () => {
    setSaving1(true);
    await onSaveSettings({ tone, length });
    setSaving1(false);
    setSaved1(true);
    setTimeout(() => setSaved1(false), 2000);
  };

  const handleSave2 = async () => {
    setSaving2(true);
    await onSaveSettings({ illustrationStyle, infographicStyle, mockupStyle });
    setSaving2(false);
    setSaved2(true);
    setTimeout(() => setSaved2(false), 2000);
  };

  const quotaPct = Math.min(100, Math.round((imagesUsed / imagesQuota) * 100));
  const selectedTone = TONE_OPTIONS.find(o => o.id === tone);

  return (
    <div className="main-inner settings-inner">
      <div className="settings-page-head">
        <div className="page-title">Settings</div>
        <div className="page-sub">Configure generation behavior, image style, and integrations.</div>
      </div>

      <div className="settings-section">
        <div className="settings-section-label">Generation defaults</div>

        <div className="settings-card">
          <div className="settings-field">
            <label className="settings-field-label">Tone of voice</label>
            <div className="settings-field-desc">Controls how Claude writes each article.</div>
            <select
              className="settings-select"
              value={tone}
              onChange={e => setTone(e.target.value)}
              disabled={SETTINGS_LOCKED}
            >
              {TONE_OPTIONS.map(o => (
                <option key={o.id} value={o.id}>{o.label} — {o.desc}</option>
              ))}
            </select>
            {selectedTone && (
              <div className="settings-tone-preview">
                <Icon name="sparkle" size={12} />
                <span>{selectedTone.instruction}</span>
              </div>
            )}
          </div>

          <div className="settings-field" style={{ marginTop: 20 }}>
            <label className="settings-field-label">Article length</label>
            <div className="settings-field-desc">Controls depth of each step's paragraph.</div>
            <div className="settings-length-toggle">
              {LENGTH_OPTIONS.map(o => (
                <button
                  key={o.id}
                  className={"settings-length-btn" + (length === o.id ? ' active' : '')}
                  onClick={() => setLength(o.id)}
                  disabled={SETTINGS_LOCKED}
                >
                  <span className="slb-label">{o.label}</span>
                  <span className="slb-desc">{o.desc}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="settings-save-row">
            <button className="btn btn-primary" onClick={handleSave1} disabled={saving1 || SETTINGS_LOCKED}>
              {saving1 ? 'Saving…' : saved1 ? '✓ Saved' : 'Save changes'}
            </button>
          </div>
        </div>
      </div>

      <div className="settings-section">
        <div className="settings-section-label">Image style</div>

        <div className="settings-card">
          <div className="settings-field">
            <label className="settings-field-label">Illustration style</label>
            <div className="settings-field-desc">Used for regular step images — paragraphs, quotes, lists, and checklists (steps 1–5).</div>
            <textarea
              className="settings-textarea"
              value={illustrationStyle}
              onChange={e => setIllustrationStyle(e.target.value)}
              rows={4}
              spellCheck={false}
              readOnly={SETTINGS_LOCKED}
            />
          </div>

          <div className="settings-field" style={{ marginTop: 20 }}>
            <label className="settings-field-label">Infographic style</label>
            <div className="settings-field-desc">Used for stat block images only.</div>
            <textarea
              className="settings-textarea"
              value={infographicStyle}
              onChange={e => setInfographicStyle(e.target.value)}
              rows={4}
              spellCheck={false}
              readOnly={SETTINGS_LOCKED}
            />
          </div>

          <div className="settings-field" style={{ marginTop: 20 }}>
            <label className="settings-field-label">App mockup style</label>
            <div className="settings-field-desc">Used for Step 6 images — always shows the Kidden app UI.</div>
            <textarea
              className="settings-textarea"
              value={mockupStyle}
              onChange={e => setMockupStyle(e.target.value)}
              rows={4}
              spellCheck={false}
              readOnly={SETTINGS_LOCKED}
            />
          </div>

          <div className="settings-save-row">
            <button className="btn btn-primary" onClick={handleSave2} disabled={saving2 || SETTINGS_LOCKED}>
              {saving2 ? 'Saving…' : saved2 ? '✓ Saved' : 'Save style prompts'}
            </button>
          </div>
        </div>

        <div className="settings-card" style={{ marginTop: 14 }}>
          <div className="settings-ref-head">
            <div>
              <div className="settings-field-label">Reference images</div>
              <div className="settings-field-desc">Sent to Gemini as style context. Stored in Supabase — persist across sessions.</div>
            </div>
            <div className="settings-ref-actions">
              <button className="btn" onClick={onUploadRefImages} disabled={SETTINGS_LOCKED}>
                <Icon name="upload" size={13} /> Upload
              </button>
              {refImages.length > 0 && (
                <button className="btn btn-danger" onClick={onDeleteAllRefImages} disabled={SETTINGS_LOCKED}>
                  Delete all
                </button>
              )}
            </div>
          </div>
          {refImages.length > 0 ? (
            <div className="settings-ref-grid">
              {refImages.map(img => (
                <div key={img.id} className="settings-ref-thumb">
                  <img src={img.url} alt="" />
                  <button className="settings-ref-del" onClick={() => onDeleteRefImage(img.id)} title="Remove" disabled={SETTINGS_LOCKED}>
                    <Icon name="x" size={11} />
                  </button>
                </div>
              ))}
            </div>
          ) : (
            <div className="settings-ref-empty">
              No reference images. Upload images to guide Gemini's illustration style.
            </div>
          )}
        </div>
      </div>

      <div className="settings-section">
        <div className="settings-section-label">API & Quota</div>

        <div className="settings-info-grid">
          <div className="settings-info-card">
            <div className="sic-label">Text generation model</div>
            <div className="sic-value">claude-sonnet-4-5</div>
            <div className="sic-sub">Claude · Anthropic</div>
          </div>
          <div className="settings-info-card">
            <div className="sic-label">Image generation model</div>
            <div className="sic-value">gpt-image-2</div>
            <div className="sic-sub">OpenAI</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TONE_OPTIONS = TONE_OPTIONS;
window.LENGTH_OPTIONS = LENGTH_OPTIONS;
window.Settings = Settings;