/* global React, Icon, IconBtn, db, TOGGLEABLE_TOOLS */
const { useState, useMemo, useCallback } = React;

// ============================================================
// Onboarding flow
// ------------------------------------------------------------
// Shown once on first launch (when db.kv["onboardingComplete"]
// is missing). Pre-enables a small set of "essential" tools so
// the app starts focused. Everything else is opt-in.
// ============================================================

const ESSENTIAL_TOOL_IDS = ['todo', 'note', 'bookmark'];

function OnboardingFlow({ appTitle, brandIcon, onFinish }) {
  const [step, setStep] = useState(0);
  // Which optional tools the user picked during onboarding.
  const [picked, setPicked] = useState(() => new Set());

  const essentials = useMemo(
    () => TOGGLEABLE_TOOLS.filter(t => ESSENTIAL_TOOL_IDS.includes(t.id)),
    []
  );
  const extras = useMemo(
    () => TOGGLEABLE_TOOLS.filter(t => !ESSENTIAL_TOOL_IDS.includes(t.id)),
    []
  );

  const extrasByCategory = useMemo(() => {
    const map = new Map();
    for (const t of extras) {
      if (!map.has(t.category)) map.set(t.category, []);
      map.get(t.category).push(t);
    }
    return Array.from(map.entries());
  }, [extras]);

  const togglePick = useCallback((id) => {
    setPicked(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }, []);

  const finish = useCallback(async (extraIds) => {
    const enabled = new Set([...ESSENTIAL_TOOL_IDS, ...extraIds]);
    const disabledTools = TOGGLEABLE_TOOLS
      .map(t => t.id)
      .filter(id => !enabled.has(id));
    onFinish({ disabledTools });
  }, [onFinish]);

  const splitTitle = (title) => {
    const t = title || 'Toolio';
    // Use simple half-split for the splash heading
    const i = Math.min(4, t.length);
    return [t.slice(0, i), t.slice(i)];
  };
  const [head, tail] = splitTitle(appTitle);

  return (
    <div className="onb-overlay">
      <div className="onb-stage">
        <div className="onb-progress">
          <span className={`onb-dot ${step === 0 ? 'is-active' : 'is-done'}`} />
          <span className={`onb-dot ${step === 1 ? 'is-active' : ''}`} />
        </div>

        {step === 0 && (
          <div className="onb-screen onb-welcome">
            <div className="onb-brand-tile">
              <Icon name={brandIcon || 'grid_view'} />
            </div>
            <h1 className="onb-title">
              Welcome to {head}<span>{tail}</span>
            </h1>
            <p className="onb-lede">
              A focused workspace for your everyday essentials.
              We'll start you with three core tools — you can add more whenever
              you need them.
            </p>

            <div className="onb-essentials">
              {essentials.map(t => (
                <div className="onb-essential" key={t.id}>
                  <div className="onb-essential-icon">
                    <Icon name={t.icon} />
                  </div>
                  <div className="onb-essential-meta">
                    <div className="onb-essential-label">{t.label}</div>
                    <div className="onb-essential-desc">{t.desc}</div>
                  </div>
                  <div className="onb-essential-on">
                    <Icon name="check" />
                  </div>
                </div>
              ))}
            </div>

            <div className="onb-foot">
              <button
                className="lh-btn ghost"
                onClick={() => finish([])}
              >
                Just the essentials
              </button>
              <button
                className="lh-btn primary"
                onClick={() => setStep(1)}
              >
                Add more tools
                <Icon name="arrow_forward" />
              </button>
            </div>
          </div>
        )}

        {step === 1 && (
          <div className="onb-screen onb-picker">
            <header className="onb-picker-head">
              <h2>Add more tools</h2>
              <p>
                Pick anything that sounds useful. You can always change this
                later in <em>Settings → Tools</em>.
              </p>
            </header>

            <div className="onb-picker-body">
              {extrasByCategory.map(([cat, tools]) => (
                <div className="onb-group" key={cat}>
                  <div className="onb-group-label">{cat}</div>
                  <div className="onb-group-grid">
                    {tools.map(t => {
                      const on = picked.has(t.id);
                      return (
                        <button
                          type="button"
                          key={t.id}
                          className={`onb-card ${on ? 'is-on' : ''}`}
                          onClick={() => togglePick(t.id)}
                          aria-pressed={on}
                        >
                          <div className="onb-card-icon">
                            <Icon name={t.icon} />
                          </div>
                          <div className="onb-card-meta">
                            <div className="onb-card-label">{t.label}</div>
                            <div className="onb-card-desc">{t.desc}</div>
                          </div>
                          <div className={`onb-card-toggle ${on ? 'is-on' : ''}`}>
                            <span className="onb-card-toggle-dot" />
                          </div>
                        </button>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>

            <div className="onb-foot">
              <button
                className="lh-btn ghost"
                onClick={() => setStep(0)}
              >
                <Icon name="arrow_back" />
                Back
              </button>
              <div className="onb-foot-summary">
                <strong>{ESSENTIAL_TOOL_IDS.length + picked.size}</strong> tools enabled
              </div>
              <button
                className="lh-btn primary"
                onClick={() => finish(Array.from(picked))}
              >
                Finish setup
                <Icon name="check" />
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.OnboardingFlow = OnboardingFlow;
window.ESSENTIAL_TOOL_IDS = ESSENTIAL_TOOL_IDS;