/* eslint-disable */
/* © 2026 K2B NETWORK SOLUTIONS LLC. All rights reserved.
   Proprietary and confidential. Unauthorized copying, distribution, or use of
   this file, via any medium, is strictly prohibited. Original work product. */
// JBREWS DMS — Getting Started.
// Default landing page when the system has no data yet. Walks the user
// through importing from their old DMS or starting fresh, step by step.

const GettingStarted = ({ go, onClose, dealerCount = 0, deals = 0, inv = 0, users = 1 }) => {
  const empty = dealerCount === 0 && deals === 0 && inv === 0;

  return (
    <div style={{
      padding: "20px 24px", minHeight: "100%",
      fontFamily: "var(--jb-font)", color: "var(--jb-text)",
    }}>

      <div style={{ maxWidth: 1100, margin: "0 auto" }}>

        {/* Hero */}
        <div style={{ display: "flex", gap: 18, alignItems: "flex-start", marginBottom: 18 }}>
          <div style={{ width: 80, height: 80, borderRadius: 14, background: "#000080", boxShadow: "var(--jb-shadow)",
                        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", flex: "none", border: "2px solid #3a3aaa" }}>
            <span style={{ color: "#fff", fontWeight: 800, fontSize: 30, letterSpacing: 1, lineHeight: 1, fontFamily: "'Times New Roman', serif" }}>K2B</span>
            <span style={{ color: "#9fb0ff", fontWeight: 600, fontSize: 8, letterSpacing: 1.5, marginTop: 3 }}>NETWORK</span>
          </div>
          <div>
            <div style={{ fontSize: 26, fontWeight: 700, color: "var(--jb-navy)", marginBottom: 4, letterSpacing: "-0.01em" }}>
              K2B Network Solutions presents your DMS.
            </div>
            {/* Audit C-05: Demo Mode loads / wipes SHARED business data, so it is
                admin-only. The legacy sample file is fetched on demand. */}
            {(window.jbIsAdmin ? window.jbIsAdmin() : false) && (
              <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", margin: "6px 0 10px" }}>
                {(window.DMS && window.DMS.isDemo && window.DMS.isDemo())
                  ? <button className="k2b-button" style={{ fontWeight: 700 }}
                            onClick={() => {
                              if (!window.confirm("Exit Demo Mode? This wipes the practice business data on EVERY station (users, permissions & settings stay).")) return;
                              const r = window.DMS.endDemo(); window.k2bToast && window.k2bToast(r.msg, "ok", 4500);
                            }}>✕ Exit Demo Mode — wipe practice data</button>
                  : ((window.DMS && ((window.DMS.deals && window.DMS.deals().some(d => d.postedToGL)) || (window.DMS.journalEntries && window.DMS.journalEntries().length > 0) || (window.DMS.customers && Object.keys(window.DMS.customers()).length > 0))) && !(window.DMS.isDemo && window.DMS.isDemo()))
                  ? <span style={{ fontSize: 12, color: "var(--jb-text-muted)" }}>🔒 Demo Mode is locked — this dealership has live records.</span>
                  : <button className="k2b-button" style={{ background: "var(--jb-yellow)", fontWeight: 700 }}
                            onClick={() => {
                              if (!window.confirm("Load practice data into the SHARED dealership (all stations)? Only do this before real work starts.")) return;
                              const run = () => { const r = window.DMS.startDemo(); window.k2bToast && window.k2bToast(r.msg, "ok", 4500); };
                              window.jbLoadLegacySeed ? window.jbLoadLegacySeed().then(run) : run();
                            }}>▶ Demo Mode — load practice data &amp; learn the system</button>}
                <span style={{ fontSize: 11.5, color: "var(--jb-text-muted)" }}>Admin only. Demo Mode fills the DMS with practice data to learn on. Exiting wipes it — your users, permissions &amp; settings stay.</span>
              </div>
            )}
            <div style={{ color: "var(--jb-text-dim)", fontSize: 13, maxWidth: 760, lineHeight: 1.55 }}>
              The system is empty — no deals, no inventory, no customers. That's intentional.
              Below are the steps to get your dealership up and running. You can either bring data
              over from your old DMS, or start adding it manually one record at a time.
            </div>
          </div>
        </div>

        {/* Status pills */}
        <div style={{ display: "flex", gap: 8, marginBottom: 20, flexWrap: "wrap" }}>
          <StatPill label="Inventory"  value={inv}        empty="Empty" />
          <StatPill label="Customers"  value={dealerCount} empty="None" />
          <StatPill label="Open Deals" value={deals}      empty="None" />
          <StatPill label="Users"      value={users}      empty="1" tone="ok" />
          <span style={{ flex: 1 }} />
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6,
                          padding: "6px 12px", background: "var(--jb-green-tint)",
                          border: "1px solid var(--jb-green)", color: "var(--jb-green)",
                          fontWeight: 600, borderRadius: "var(--jb-r-sm)", fontSize: 12 }}>
            ● Live sync ready · multi-user enabled
          </span>
        </div>

        {/* Step cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14 }}>
          <StepCard
            num="1"
            title="Import from your old DMS"
            blurb="Bring your existing customers, deals, inventory, parts, ROs, and GL history into your K2B DMS in one pass. Supported sources include legacy Finance Professional systems, Reynolds ERA, CDK Drive, DealerTrack, Autosoft, PBS, Dominion VUE, Tekion, or a custom CSV."
            steps={[
              "Click Open Import Tool below (or use the Import Data button in the toolbar).",
              "Choose your old DMS from the Source dropdown.",
              "Point the importer at the export folder, SFTP location, or upload a .zip.",
              "Tick which datasets to bring over (deals, customers, inventory, GL…).",
              "Review the plan — the system will back up before importing.",
              "Click Start Import. Conflicts go into Files › Import Conflicts for review.",
            ]}
            cta="Open Import Tool ▸"
            onClick={() => go("uploadtool")}
            accent="var(--k2b-blue-data)"
          />

          <StepCard
            num="2"
            title="Or start fresh — add your first records"
            blurb="No old DMS? No problem. Stand up the dealership manually. Start with stock-in (the cars on your lot), then work every customer through the one path: CRM → New Lead → Desk It. Five-minute setup."
            steps={[
              "Open Vehicle Stock-In and add your first vehicle (VIN, cost, asking price).",
              "Open Inventory to confirm it shows up. Repeat for the rest of your lot.",
              "When a customer arrives, open CRM — Leads and click + New Lead: search the customer file, or add them (the phone without the area code = their 7-digit customer #) / scan their license, then save the lead.",
              "A manager or F&I clicks Desk It on the lead — that creates the deal and opens Desking. Push it to Cash Deal or Finance Deal.",
              "Post to Accounting from the Cash / Finance Deal, then Mark Funded in Funding. Ctrl+S saves anytime — everything syncs live.",
            ]}
            cta="Start adding inventory ▸"
            onClick={() => go("stockin")}
            accent="var(--k2b-green)"
          />

          <StepCard
            num="3"
            title="Set up your team for simultaneous access"
            blurb="Your K2B DMS supports multiple users editing the same dealership at the same time — sales people can be working deals while the F&I manager is in the Finance Worksheet and accounting is posting journal entries. Every save is broadcast live."
            steps={[
              "Open Settings → Users (Server) (admins only).",
              "Add each team member: employee #, name, role (Sales / Admin / F&I / Accounting / Service / Parts) and a temporary password (8+ characters).",
              "Send them their employee # — they log in at the same URL.",
              "Records being edited by another user show a yellow 🔒 lock indicator.",
              "Live presence dots (top toolbar) show who is currently signed in.",
            ]}
            cta="Manage users ▸"
            onClick={() => window.dispatchEvent(new CustomEvent("k2b-open-users"))}
            accent="var(--k2b-maroon)"
          />

          <StepCard
            num="4"
            title="Configure exports & nightly uploads"
            blurb="The system sends nightly feeds to GM (GMDS-VI / VS / PI), to lenders (Exeter, Chase Auto, Ally, etc.), and exports for your CPA. You can also pull data out anytime as CSV, fixed-width, or .xlsx."
            steps={[
              "Open the Upload & Import Tool and switch to the Export tab.",
              "Pick which datasets to export and in which format.",
              "Set the destination — local download, SFTP, network share, or schedule.",
              "Set the Auto-Upload window (default 3:00 AM nightly).",
              "Click Run Now to test, or Save to lock in the schedule.",
            ]}
            cta="Open Export ▸"
            onClick={() => { window.localStorage.setItem("jbrews-upload-mode", "export"); go("uploadtool"); }}
            accent="#8050B0"
          />
        </div>

        {/* Help footer */}
        <div style={{
          marginTop: 20, padding: "12px 16px",
          background: "var(--jb-amber-tint)", border: "1px solid var(--jb-amber)",
          borderRadius: "var(--jb-r-sm)",
          display: "flex", gap: 12, alignItems: "center",
        }}>
          <span style={{ fontSize: 18 }}>💡</span>
          <div style={{ fontSize: 12, lineHeight: 1.5, flex: 1 }}>
            <b>Need help?</b> Press <b>F1</b> on any screen, hover over any field for a tooltip,
            or click the <b>?</b> button in the top-right corner of any window.
          </div>
          <K2BButton small onClick={() => go("salesmenu")}>All Modules ▸</K2BButton>
        </div>
      </div>
    </div>
  );
};

const StatPill = ({ label, value, empty, tone }) => {
  const isEmpty = !value;
  return (
    <span style={{
      display: "inline-flex", alignItems: "baseline", gap: 6,
      padding: "6px 12px", borderRadius: "var(--jb-r-sm)",
      background: isEmpty ? "var(--jb-surface-2)" : tone === "ok" ? "var(--jb-green-tint)" : "var(--jb-amber-tint)",
      border: "1px solid " + (isEmpty ? "var(--jb-border)" : tone === "ok" ? "var(--jb-green)" : "var(--jb-amber)"),
      fontSize: 12,
    }}>
      <b style={{ fontSize: 14, color: isEmpty ? "var(--jb-text-muted)" : "var(--jb-navy)" }}>
        {isEmpty ? empty : value}
      </b>
      <span style={{ color: "var(--jb-text-dim)" }}>{label}</span>
    </span>
  );
};

const StepCard = ({ num, title, blurb, steps, cta, onClick, accent }) => (
  <div style={{
    background: "var(--jb-surface)", border: "1px solid var(--jb-border)",
    boxShadow: "var(--jb-shadow-sm)",
    borderRadius: "var(--jb-r-lg)",
    padding: "16px 18px",
    display: "flex", flexDirection: "column",
  }}>
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
      <span style={{
        width: 32, height: 32, borderRadius: "50%",
        background: accent, color: "#FFF", fontWeight: 700,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        fontSize: 15,
      }}>{num}</span>
      <div style={{ fontWeight: 700, fontSize: 15, color: "var(--jb-navy)" }}>{title}</div>
    </div>
    <div style={{ fontSize: 12, color: "var(--jb-text-dim)", marginBottom: 10, lineHeight: 1.5 }}>{blurb}</div>
    <ol style={{ margin: "0 0 12px 20px", padding: 0, fontSize: 12, color: "var(--jb-text)", lineHeight: 1.6 }}>
      {steps.map((s, i) => <li key={i} style={{ marginBottom: 3 }}>{s}</li>)}
    </ol>
    <div style={{ flex: 1 }} />
    <div>
      <K2BButton small onClick={onClick} style={{ background: "#FFE9B0", fontWeight: 700 }}>
        {cta}
      </K2BButton>
    </div>
  </div>
);

Object.assign(window, { GettingStarted });