import { useEffect, useState } from 'react';
import { __, _x, sprintf } from '@wordpress/i18n';
import { api, cfg } from '../api.js';
import { Button, Card, Field, Icon, Notice, Switch, toast } from '../ui.jsx';

export default function Settings({ data, setData }) {
  const [s, setS] = useState(data.settings);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');
  const dirty = JSON.stringify(s) !== JSON.stringify(data.settings);
  const set = (k) => (v) => setS((x) => ({ ...x, [k]: v }));
  const status = data.status;

  useEffect(() => {
    const h = (e) => { if (dirty) { e.preventDefault(); e.returnValue = ''; } };
    window.addEventListener('beforeunload', h);
    return () => window.removeEventListener('beforeunload', h);
  }, [dirty]);

  const pickLogo = () => {
    if (!window.wp?.media) return;
    const frame = window.wp.media({ title: __('Choose an app logo', 'dashbread'), button: { text: __('Use this logo', 'dashbread') }, library: { type: 'image' }, multiple: false });
    frame.on('select', () => {
      const a = frame.state().get('selection').first().toJSON();
      setS((x) => ({ ...x, logo_id: a.id, logo_url: a.sizes?.medium?.url || a.url }));
    });
    frame.open();
  };

  const save = async (e) => {
    e.preventDefault();
    setBusy(true); setErr('');
    try {
      const res = await api.saveSettings(s);
      setData((d) => ({ ...d, settings: res.settings, status: res.status }));
      setS(res.settings);
      toast.show(__('Settings saved', 'dashbread'));
    } catch (ex) { setErr(ex.message); }
    setBusy(false);
  };

  return (
    <form onSubmit={save} className="sa-stack">
      {err && <Notice tone="error" onClose={() => setErr('')}>{err}</Notice>}
      {status.route_conflict && <Notice tone="warn">{/* translators: followed by the conflicting slug */ __('A page already uses the slug', 'dashbread')} <code>{status.route}</code>. {/* translators: followed by the link text "rename the page" */ __('The app route wins;', 'dashbread')} <a href={status.route_conflict}>{__('rename the page', 'dashbread')}</a> {/* translators: follows "rename the page" */ __('or change the route below.', 'dashbread')}</Notice>}

      <div className="sa-cols-2">
        <Card title={_x('App', 'settings section', 'dashbread')}>
          <Field label={__('App route', 'dashbread')} htmlFor="sui_route" help={<>{__('Members\' dashboard lives here.', 'dashbread')} {/* translators: followed by the default route value "app" */ _x('Default', 'followed by a default value', 'dashbread')} <code>app</code>. {__('Changing it re-saves permalinks.', 'dashbread')}</>}>
            <div className="sa-input-group"><span className="sa-input-prefix">{status.home}</span><input id="sui_route" type="text" value={s.route} onChange={(e) => set('route')(e.target.value)} className="sa-input sa-input-short" /></div>
          </Field>
          <Field label={__('App name', 'dashbread')} htmlFor="sui_name" help={__('Shown in the sidebar brand and the browser tab. Leave empty to use the site title.', 'dashbread')}>
            <input id="sui_name" type="text" className="sa-input" value={s.site_name} onChange={(e) => set('site_name')(e.target.value)} placeholder={window.DashbreadAdmin?.site} />
          </Field>
          <Field label={__('Logo', 'dashbread')} help={__('Square or wide, PNG or SVG. Shown in the sidebar and on the login screens.', 'dashbread')}>
            <div className="sa-logo-pick">
              {s.logo_url ? <img src={s.logo_url} alt="" /> : <span className="sa-logo-empty"><Icon name="image" size={22} /></span>}
              <Button size="sm" onClick={pickLogo} icon="image">{s.logo_id ? _x('Change', 'button: change logo', 'dashbread') : __('Choose logo', 'dashbread')}</Button>
              {!!s.logo_id && <Button size="sm" variant="ghost" onClick={() => setS((x) => ({ ...x, logo_id: 0, logo_url: '' }))}>{__('Remove', 'dashbread')}</Button>}
            </div>
          </Field>
          <Field label={__('Footer text', 'dashbread')} htmlFor="sui_footer">
            <input id="sui_footer" type="text" className="sa-input" value={s.footer_text} onChange={(e) => set('footer_text')(e.target.value)} placeholder={sprintf( /* translators: 1: current year, 2: site name */ __('© %1$s %2$s', 'dashbread'), window.DashbreadAdmin?.year, window.DashbreadAdmin?.site )} />
          </Field>
          <Switch checked={!!s.powered_by} onChange={set('powered_by')} label={sprintf( /* translators: %s: product name */ __('Show "Powered by %s" in the app footer', 'dashbread'), (cfg.brand || {}).name || 'Dashbread' )} help={__('Off unless you turn it on. Thanks if you do!', 'dashbread')} />
        </Card>

        <Card title={__('Look', 'dashbread')}>
          <Field label={__('Primary color', 'dashbread')} htmlFor="sui_primary" help={__('Buttons, links, active nav, badges.', 'dashbread')}>
            <div className="sa-color"><input id="sui_primary" type="color" value={s.primary} onChange={(e) => set('primary')(e.target.value)} /><code>{s.primary}</code></div>
          </Field>
          <Field label={__('Preset', 'dashbread')} help={__('Console matches CoreUI density. Comfort adds spacing and larger type for consumer audiences.', 'dashbread')}>
            <div className="sa-choices">
              {[['console', _x('Console', 'preset name', 'dashbread'), __('Dense, dark sidebar', 'dashbread')], ['comfort', _x('Comfort', 'preset name', 'dashbread'), __('Roomy, light sidebar', 'dashbread')]].map(([v, l, d]) => (
                <label key={v} className={'sa-choice ' + (s.preset === v ? 'on' : '')}><input type="radio" name="preset" value={v} checked={s.preset === v} onChange={() => set('preset')(v)} /><b>{l}</b><small>{d}</small></label>
              ))}
            </div>
          </Field>
          <Field label={__('Default mode', 'dashbread')} help={__('Members can override this in their profile.', 'dashbread')}>
            <div className="sa-choices">
              {[['light', _x('Light', 'color mode', 'dashbread')], ['dark', _x('Dark', 'color mode', 'dashbread')], ['auto', __('Follow device', 'dashbread')]].map(([v, l]) => (
                <label key={v} className={'sa-choice ' + (s.mode === v ? 'on' : '')}><input type="radio" name="mode" value={v} checked={s.mode === v} onChange={() => set('mode')(v)} /><b>{l}</b></label>
              ))}
            </div>
          </Field>
        </Card>
      </div>

      <Card title={__('Member behavior', 'dashbread')}>
        <p className="sa-help sa-mb">{/* translators: followed by a WordPress capability name */ __('“Members” means users without the', 'dashbread')} <code>edit_posts</code> {/* translators: follows a WordPress capability name */ __('capability.', 'dashbread')} {__('Staff keep wp-admin exactly as it is.', 'dashbread')}</p>
        <div className="sa-switches">
          <Switch checked={s.land_in_app} onChange={set('land_in_app')} label={__('After login, members land in the app', 'dashbread')} />
          <Switch checked={s.hide_admin_bar} onChange={set('hide_admin_bar')} label={__('Hide the admin bar for members', 'dashbread')} />
          <Switch checked={s.block_admin} onChange={set('block_admin')} label={__('Send members who open wp-admin to the app', 'dashbread')} />
          <Switch checked={s.redirect_login} onChange={set('redirect_login')} label={sprintf( /* translators: %s: product name */ __('Use %s\'s login, register, and password screens', 'dashbread'), (cfg.brand || {}).name || 'Dashbread' )} help={__('wp-login.php?native=1 still opens the WordPress screen.', 'dashbread')} />
          <Switch checked={s.legacy_login} onChange={set('legacy_login')} label={__('Redirect /login to the app', 'dashbread')} />
        </div>
      </Card>

      <div className="sa-actions">
        <Button type="submit" variant="primary" disabled={busy || !dirty} icon="check">{busy ? __('Saving…', 'dashbread') : __('Save settings', 'dashbread')}</Button>
        {dirty && <Button variant="ghost" onClick={() => setS(data.settings)}>{__('Discard', 'dashbread')}</Button>}
        <span className="sa-grow" />
        <Button variant="ghost" href={status.app_url} target="_blank" icon="external-link">{sprintf( /* translators: %s: public app route, e.g. "app" */ _x('Open /%s', 'button: visit the public app URL', 'dashbread'), status.route )}</Button>
      </div>
    </form>
  );
}