// ============ TOOLS TAB ============
// Three sub-tabs: Integrations (connect SaaS), Schedules (when agents work),
// Alerts (when an agent should ping you).

// Catalog of available integrations. All start disconnected and get used
// by no one — connect them as you go. The runtime server (server/) is what
// actually receives messages once you wire WhatsApp via Twilio + ngrok.
const INTEGRATIONS = [
  { id: "wa", name: "WhatsApp Business", desc: "Read & send messages on your business number.",  connected: false, used: [], color: "#25D366" },
  { id: "gm", name: "Gmail",             desc: "Read & send email from your inbox.",              connected: false, used: [], color: "#EA4335" },
  { id: "cal",name: "Google Calendar",   desc: "See your calendar, book meetings, hold buffers.", connected: false, used: [], color: "#4285F4" },
  { id: "qb", name: "QuickBooks",        desc: "Read your books, P&L, balance sheet.",            connected: false, used: [], color: "#2CA01C" },
  { id: "st", name: "Stripe",            desc: "Read payouts, charges, customer billing.",        connected: false, used: [], color: "#635BFF" },
  { id: "sl", name: "Slack",             desc: "Read channels, post updates, take requests.",     connected: false, used: [], color: "#4A154B" },
  { id: "hs", name: "HubSpot",           desc: "Read & update your CRM, log activity.",           connected: false, used: [], color: "#FF7A59" },
  { id: "no", name: "Notion",            desc: "Read your wiki, write briefs, update pages.",     connected: false, used: [], color: "#1A120B" },
];

const SCHEDULES = [];

const ALERTS_INITIAL = [];

function ToolsTab() {
  const [tab, setTab] = useState("integrations");
  const [integrations, setIntegrations] = useState(INTEGRATIONS);
  const [schedules, setSchedules]       = useState(SCHEDULES);
  const [alerts, setAlerts]             = useState(ALERTS_INITIAL);
  const [addingSched, setAddingSched]   = useState(false);
  const [addingAlert, setAddingAlert]   = useState(false);
  const [schedDraft, setSchedDraft]     = useState({ agent: "ori", what: "", when: "" });
  const [alertDraft, setAlertDraft]     = useState({ l: "", how: "Email" });

  // Mock OAuth flow — opens a small dialog that walks through 3 steps
  // (authorize → verify → connected) before actually flipping the
  // integration to connected.
  const [authingId, setAuthingId] = useState(null);
  const [authStep, setAuthStep]   = useState(0);

  const startConnect = (id) => {
    setAuthingId(id);
    setAuthStep(0);
    const t1 = setTimeout(() => setAuthStep(1), 700);
    const t2 = setTimeout(() => setAuthStep(2), 1400);
    const t3 = setTimeout(() => setAuthStep(3), 2200);
    const finish = setTimeout(() => {
      setIntegrations((xs) => xs.map((x) => x.id === id ? { ...x, connected: true } : x));
      const it = integrations.find(x => x.id === id);
      window.toast(`${it.name} connected`, "good");
      setAuthingId(null);
      setAuthStep(0);
    }, 2900);
    // Note: returning a cleanup is irrelevant here since this isn't an effect.
    void [t1, t2, t3, finish];
  };
  const cancelConnect = () => {
    setAuthingId(null);
    setAuthStep(0);
  };
  const disconnect = (id) => {
    if (!window.confirm("Disconnect this integration?")) return;
    setIntegrations((xs) => xs.map((x) => x.id === id ? { ...x, connected: false } : x));
    const it = integrations.find(x => x.id === id);
    window.toast(`${it.name} disconnected`, "warn");
  };
  const manageInt = (it) => window.toast(`${it.name} settings opened`, "info");
  const editSched = (i) => window.toast(`Editing "${schedules[i].what}"`, "info");
  const addSched  = () => {
    if (!schedDraft.what.trim() || !schedDraft.when.trim()) { window.toast("Fill out both fields", "warn"); return; }
    setSchedules((xs) => [...xs, schedDraft]);
    setSchedDraft({ agent: "ori", what: "", when: "" });
    setAddingSched(false);
    window.toast("Schedule added", "good");
  };
  const toggleAlert = (i) => setAlerts((xs) => xs.map((a, j) => i === j ? { ...a, on: !a.on } : a));
  const addAlert = () => {
    if (!alertDraft.l.trim()) { window.toast("Describe the trigger", "warn"); return; }
    setAlerts((xs) => [...xs, { ...alertDraft, on: true }]);
    setAlertDraft({ l: "", how: "Email" });
    setAddingAlert(false);
    window.toast("Alert added", "good");
  };

  return (
    <div className="tl-page">
      <div className="tl-tabs">
        <button className={`tl-tab ${tab === "integrations" ? "is-on" : ""}`} onClick={() => setTab("integrations")}>Integrations</button>
        <button className={`tl-tab ${tab === "schedules" ? "is-on" : ""}`}    onClick={() => setTab("schedules")}>Schedules</button>
        <button className={`tl-tab ${tab === "alerts" ? "is-on" : ""}`}       onClick={() => setTab("alerts")}>Alerts</button>
      </div>

      {tab === "integrations" ? (
        <div className="tl-int-grid">
          {integrations.map(it => (
            <div key={it.id} className={`tl-int ${it.connected ? "is-on" : ""}`}>
              <div className="tl-int-icon" style={{ background: it.color }}>{it.name[0]}</div>
              <div className="tl-int-body">
                <div className="tl-int-top">
                  <div className="tl-int-n">{it.name}</div>
                  {it.connected ? <span className="tl-int-pip">connected</span> : null}
                </div>
                <div className="tl-int-d">{it.desc}</div>
                {it.used.length > 0 ? (
                  <div className="tl-int-used">used by {it.used.map(u => u.toUpperCase()).join(", ")}</div>
                ) : (
                  <div className="tl-int-used tl-int-used-none">not in use</div>
                )}
              </div>
              <div className="tl-int-cta">
                <button
                  className={`btn btn-sm ${it.connected ? "btn-ghost" : "btn-primary"}`}
                  onClick={() => it.connected ? manageInt(it) : startConnect(it.id)}
                >
                  {it.connected ? "Manage" : "Connect"}
                </button>
                {it.connected ? (
                  <button className="tl-int-disconnect" onClick={() => disconnect(it.id)} title="Disconnect">×</button>
                ) : null}
              </div>
            </div>
          ))}
        </div>
      ) : tab === "schedules" ? (
        <div className="tl-sched">
          <div className="tl-sched-head">
            <h3 className="tl-sched-h">When your agents work</h3>
            <button className="btn btn-ghost btn-sm" onClick={() => setAddingSched((v) => !v)}>
              {addingSched ? "Cancel" : "+ Add schedule"}
            </button>
          </div>
          {addingSched ? (
            <div className="tl-sched-row tl-sched-row-add">
              <select value={schedDraft.agent} onChange={(e) => setSchedDraft({ ...schedDraft, agent: e.target.value })} className="tl-sched-input">
                <option value="ori">ORI</option>
                <option value="sol">SOL</option>
                <option value="vex">VEX</option>
                <option value="ink">INK</option>
              </select>
              <input className="tl-sched-input" placeholder="What it does" value={schedDraft.what} onChange={(e) => setSchedDraft({ ...schedDraft, what: e.target.value })} />
              <input className="tl-sched-input" placeholder="When (e.g. Mon · 9am)" value={schedDraft.when} onChange={(e) => setSchedDraft({ ...schedDraft, when: e.target.value })} />
              <button className="btn btn-primary btn-sm" onClick={addSched}>Add</button>
            </div>
          ) : null}
          <div className="tl-sched-list">
            {schedules.map((s, i) => (
              <div key={i} className="tl-sched-row">
                <div className="tl-sched-mark" data-a={s.agent}>{s.agent.toUpperCase()}</div>
                <div className="tl-sched-what">{s.what}</div>
                <div className="tl-sched-when">{s.when}</div>
                <button className="tl-sched-edit" onClick={() => editSched(i)}>Edit</button>
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="tl-alerts">
          <div className="tl-alerts-head">
            <h3 className="tl-sched-h">When to wake you up</h3>
            <button className="btn btn-ghost btn-sm" onClick={() => setAddingAlert((v) => !v)}>
              {addingAlert ? "Cancel" : "+ Add alert"}
            </button>
          </div>
          {addingAlert ? (
            <div className="tl-alert tl-alert-add">
              <input className="tl-sched-input" placeholder="When should we wake you up?" value={alertDraft.l} onChange={(e) => setAlertDraft({ ...alertDraft, l: e.target.value })} />
              <select className="tl-sched-input" value={alertDraft.how} onChange={(e) => setAlertDraft({ ...alertDraft, how: e.target.value })}>
                <option>Email</option>
                <option>Phone · text</option>
                <option>Phone · call</option>
                <option>Slack</option>
              </select>
              <button className="btn btn-primary btn-sm" onClick={addAlert}>Add</button>
            </div>
          ) : null}
          <div className="tl-alert-list">
            {alerts.map((a, i) => (
              <div key={i} className="tl-alert">
                <div className="tl-alert-body">
                  <div className="tl-alert-l">{a.l}</div>
                  <div className="tl-alert-h">{a.how}</div>
                </div>
                <button
                  className={`tl-toggle ${a.on ? "is-on" : ""}`}
                  onClick={() => toggleAlert(i)}
                  aria-label={a.on ? "Disable alert" : "Enable alert"}
                >
                  <div className="tl-toggle-n" />
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {authingId ? (
        <div className="tl-oauth-overlay" onClick={authStep < 3 ? null : cancelConnect}>
          <div className="tl-oauth" onClick={(e) => e.stopPropagation()}>
            {(() => {
              const it = integrations.find(x => x.id === authingId);
              if (!it) return null;
              const steps = [
                "Opening " + it.name + " auth window…",
                "Verifying account…",
                "Granting permissions…",
                "Connected.",
              ];
              return (
                <>
                  <div className="tl-oauth-head">
                    <div className="tl-oauth-icon" style={{ background: it.color }}>{it.name[0]}</div>
                    <div className="tl-oauth-title">
                      <div className="tl-oauth-co">Connect {it.name}</div>
                      <div className="tl-oauth-sub">Citrus will be able to read & write on your behalf</div>
                    </div>
                  </div>
                  <div className="tl-oauth-steps">
                    {steps.map((s, i) => (
                      <div key={i} className={`tl-oauth-step ${authStep > i ? "is-done" : authStep === i ? "is-active" : ""}`}>
                        <span className="tl-oauth-dot">
                          {authStep > i ? "✓" : authStep === i ? <span className="tl-oauth-spin" /> : ""}
                        </span>
                        {s}
                      </div>
                    ))}
                  </div>
                  {authStep < 3 ? (
                    <button className="btn btn-ghost btn-sm tl-oauth-cancel" onClick={cancelConnect}>Cancel</button>
                  ) : null}
                </>
              );
            })()}
          </div>
        </div>
      ) : null}
    </div>
  );
}

window.ToolsTab = ToolsTab;