// Settings — General tab, 1280x800

const Ic = ({ size = 16, stroke = 1.75, children }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke="currentColor" strokeWidth={stroke}
       strokeLinecap="round" strokeLinejoin="round">{children}</svg>
);
const IcLogoSm   = (p) => <Ic {...p} stroke={2}><path d="M12 2v4"/><path d="M12 18v4"/><path d="M4.93 4.93l2.83 2.83"/><path d="M16.24 16.24l2.83 2.83"/><path d="M2 12h4"/><path d="M18 12h4"/><path d="M4.93 19.07l2.83-2.83"/><path d="M16.24 7.76l2.83-2.83"/></Ic>;
const IcSettings = (p) => <Ic {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></Ic>;
const IcVolume   = (p) => <Ic {...p}><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></Ic>;
const IcCpu      = (p) => <Ic {...p}><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="2" x2="9" y2="4"/><line x1="15" y1="2" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="22"/><line x1="15" y1="20" x2="15" y2="22"/><line x1="20" y1="9" x2="22" y2="9"/><line x1="20" y1="14" x2="22" y2="14"/><line x1="2" y1="9" x2="4" y2="9"/><line x1="2" y1="14" x2="4" y2="14"/></Ic>;
const IcLayers   = (p) => <Ic {...p}><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></Ic>;
const IcKeyboard = (p) => <Ic {...p}><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="6" y1="10" x2="6" y2="10"/><line x1="10" y1="10" x2="10" y2="10"/><line x1="14" y1="10" x2="14" y2="10"/><line x1="18" y1="10" x2="18" y2="10"/><line x1="7" y1="14" x2="17" y2="14"/></Ic>;
const IcPalette  = (p) => <Ic {...p}><circle cx="13.5" cy="6.5" r="1" fill="currentColor"/><circle cx="17.5" cy="10.5" r="1" fill="currentColor"/><circle cx="8.5" cy="7.5" r="1" fill="currentColor"/><circle cx="6.5" cy="12.5" r="1" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c3.31 0 6-2.69 6-6 0-4.96-4.49-9-10-9z"/></Ic>;
const IcUser2   = (p) => <Ic {...p}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></Ic>;
const IcShield   = (p) => <Ic {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></Ic>;
const IcInfo     = (p) => <Ic {...p}><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></Ic>;
const IcChev     = (p) => <Ic {...p} stroke={2}><polyline points="6 9 12 15 18 9"/></Ic>;
const IcFolder   = (p) => <Ic {...p}><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></Ic>;
const IcSearch   = (p) => <Ic {...p}><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></Ic>;

const TABS = [
  { id: "general",   icon: IcSettings, label: "General" },
  { id: "audio",     icon: IcVolume,   label: "Audio" },
  { id: "ai",        icon: IcCpu,      label: "IA y API keys" },
  { id: "templates", icon: IcLayers,   label: "Plantillas" },
  { id: "shortcuts", icon: IcKeyboard, label: "Atajos de teclado" },
  { id: "appearance",icon: IcPalette,  label: "Apariencia" },
  { id: "account",   icon: IcUser2,    label: "Cuenta y plan" },
  { id: "privacy",   icon: IcShield,   label: "Privacidad" },
  { id: "about",     icon: IcInfo,     label: "Acerca de" },
];

const Toggle = ({ on, onChange }) => (
  <button className={`stg-toggle ${on ? "on" : ""}`} onClick={() => onChange(!on)} aria-pressed={on}>
    <span className="stg-toggle-thumb" />
  </button>
);

const SettingsGeneral = () => {
  const [tab, setTab]       = React.useState("general");
  const [autoStart, setAutoStart] = React.useState(true);
  const [discrete, setDiscrete]   = React.useState(false);
  const [lang, setLang]     = React.useState("Español");
  const [langOpen, setLangOpen] = React.useState(false);
  const [recording, setRecording] = React.useState(false);
  const [hotkey, setHotkey] = React.useState(["Ctrl", "Shift", "C"]);

  return (
    <div className="stg-root" data-screen-label="08 Settings General">
      {/* Header */}
      <header className="dash-header">
        <div className="dash-brand">
          <div className="dash-mark"><IcLogoSm size={14} /></div>
          <span className="dash-brand-name">Copilotoprompter</span>
          <span className="bcrumb">/ Configuración</span>
        </div>
        <div className="dash-h-spacer" />
        <div className="avatar">JM</div>
      </header>

      <div className="stg-body">
        {/* Sidebar */}
        <aside className="stg-side">
          <div className="stg-search">
            <IcSearch size={13} />
            <input placeholder="Buscar ajustes…" />
          </div>
          <nav className="stg-nav">
            {TABS.map(({ id, icon: Icon, label }) => (
              <button key={id}
                      className={`stg-tab ${tab === id ? "active" : ""}`}
                      onClick={() => setTab(id)}>
                <Icon size={14} />
                <span>{label}</span>
              </button>
            ))}
          </nav>
        </aside>

        {/* Content */}
        <main className="stg-main">
          <div className="stg-content">
            <div className="stg-page-head">
              <h1>General</h1>
              <p>Preferencias básicas de la aplicación.</p>
            </div>

            {/* Idioma */}
            <section className="stg-row">
              <div className="stg-row-text">
                <h3>Idioma de la interfaz</h3>
                <p>Selecciona el idioma de los menús y mensajes.</p>
              </div>
              <div className="stg-row-ctrl">
                <div className="stg-dd">
                  <button className="stg-dd-btn" onClick={() => setLangOpen((v) => !v)}>
                    <span>{lang}</span>
                    <IcChev size={12} />
                  </button>
                  {langOpen && (
                    <div className="stg-dd-menu" onMouseLeave={() => setLangOpen(false)}>
                      {["Español", "English", "Català", "Français"].map((l) => (
                        <button key={l} className={`stg-dd-item ${lang === l ? "selected" : ""}`}
                                onClick={() => { setLang(l); setLangOpen(false); }}>
                          <span>{l}</span>
                          {lang === l && <span className="stg-dd-check">✓</span>}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </section>

            {/* Inicio automático */}
            <section className="stg-row">
              <div className="stg-row-text">
                <h3>Iniciar al arrancar Windows</h3>
                <p>La app se iniciará automáticamente cuando enciendas el ordenador.</p>
              </div>
              <div className="stg-row-ctrl">
                <Toggle on={autoStart} onChange={setAutoStart} />
              </div>
            </section>

            {/* Modo discreto */}
            <section className="stg-row">
              <div className="stg-row-text">
                <h3>Modo discreto por defecto</h3>
                <p>La ventana flotante se ocultará automáticamente al minimizar.</p>
              </div>
              <div className="stg-row-ctrl">
                <Toggle on={discrete} onChange={setDiscrete} />
              </div>
            </section>

            {/* Hotkey */}
            <section className="stg-row">
              <div className="stg-row-text">
                <h3>Hotkey global para activar Copiloto</h3>
                <p>Pulsa la combinación desde cualquier ventana para mostrar el Copiloto.</p>
              </div>
              <div className="stg-row-ctrl stg-hotkey-row">
                <div className={`stg-hotkey ${recording ? "recording" : ""}`}>
                  {recording ? (
                    <span className="stg-hotkey-rec">Pulsa una combinación…</span>
                  ) : (
                    hotkey.map((k, i) => (
                      <React.Fragment key={i}>
                        <kbd className="stg-kbd">{k}</kbd>
                        {i < hotkey.length - 1 && <span className="stg-plus">+</span>}
                      </React.Fragment>
                    ))
                  )}
                </div>
                <button className="btn-secondary stg-btn-sm"
                        onClick={() => setRecording((v) => !v)}>
                  {recording ? "Cancelar" : "Cambiar"}
                </button>
              </div>
            </section>

            {/* Carpeta */}
            <section className="stg-row">
              <div className="stg-row-text">
                <h3>Carpeta de exportaciones</h3>
                <p>Ubicación donde se guardan los guiones, transcripciones y resúmenes.</p>
              </div>
              <div className="stg-row-ctrl stg-folder-row">
                <div className="stg-input">
                  <IcFolder size={13} />
                  <span>C:\Users\Jordi\Documents\Copilotoprompter</span>
                </div>
                <button className="btn-secondary stg-btn-sm">Explorar…</button>
              </div>
            </section>
          </div>
        </main>
      </div>
    </div>
  );
};

window.SettingsGeneral = SettingsGeneral;