// Shared workspace structure. Uses the same primitives and brand tokens as app.jsx.
function Icon({ name, size = 20 }) {
  const paths = {
    home: (
      <>
        <path d="m3 10 9-7 9 7v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z" />
        <path d="M9 21v-8h6v8" />
      </>
    ),
    folder: (
      <path d="M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
    ),
    server: (
      <>
        <rect x="3" y="3" width="18" height="7" rx="2" />
        <rect x="3" y="14" width="18" height="7" rx="2" />
        <path d="M7 6h.01M7 17h.01M11 6h6M11 17h6" />
      </>
    ),
    search: (
      <>
        <circle cx="10" cy="10" r="6" />
        <path d="m15 15 6 6" />
      </>
    ),
    audit: (
      <>
        <path d="m12 3 8 3v6c0 5-8 9-8 9s-8-4-8-9V6Z" />
        <path d="m8 12 3 3 5-6" />
      </>
    ),
    timeline: (
      <>
        <path d="M7 3v18M11 5h9M11 12h6M11 19h9" />
        <circle cx="7" cy="5" r="1" />
        <circle cx="7" cy="12" r="1" />
        <circle cx="7" cy="19" r="1" />
      </>
    ),
    truck: (
      <>
        <path d="M3 5h11v12H3ZM14 9h4l3 4v4h-7" />
        <circle cx="7" cy="18" r="2" />
        <circle cx="18" cy="18" r="2" />
      </>
    ),
    settings: (
      <>
        <path d="M4 7h16M4 17h16" />
        <circle cx="9" cy="7" r="3" />
        <circle cx="15" cy="17" r="3" />
      </>
    ),
    menu: <path d="M4 6h16M4 12h16M4 18h16" />,
    close: <path d="m6 6 12 12M6 18 18 6" />,
    plus: <path d="M12 4v16M4 12h16" />,
    arrow: <path d="M4 12h16m-6-6 6 6-6 6" />,
    logout: (
      <>
        <path d="M9 4H4v16h5M12 12h9m-4-4 4 4-4 4" />
      </>
    ),
    link: (
      <>
        <path d="m10 13 4-4M8 16l-1 1a4 4 0 0 1-6-6l4-4a4 4 0 0 1 6 0M16 8l1-1a4 4 0 0 1 6 6l-4 4a4 4 0 0 1-6 0" />
      </>
    ),
  };
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      focusable="false"
    >
      {paths[name] || paths.folder}
    </svg>
  );
}

function Brand() {
  return (
    <span className="brand">
      <span className="brand-mark" aria-hidden="true">
        w<span>.</span>
      </span>
      <span>
        <span className="brand-name">Watson</span>
        <span className="brand-company">
          by{" "}
          <strong>
            Store<span>Connect</span>
          </strong>
        </span>
      </span>
    </span>
  );
}

const workspaceLinks = [
  { key: "dashboard", label: "Overview", icon: "home", group: "Workspace" },
  { key: "list", label: "Investigations", icon: "folder" },
  { key: "environments", label: "Environments", icon: "server" },
  {
    key: "lookup",
    label: "Record lookup",
    icon: "search",
    group: "Investigation tools",
  },
  { key: "audit", label: "Payment audit", icon: "audit" },
  { key: "timeline", label: "Timeline", icon: "timeline" },
  { key: "shipments", label: "Shipments", icon: "truck" },
  {
    key: "integrations",
    label: "Setup & connections",
    icon: "settings",
    group: "Account",
  },
];

function Nav({ page, user, onNav, onLogout, children }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const dialog = React.useRef(null);
  const menuButton = React.useRef(null);
  const active = ["show", "new"].includes(page)
    ? "list"
    : ["env-show", "env-new"].includes(page)
      ? "environments"
      : page;
  const pageName =
    workspaceLinks.find((l) => l.key === active)?.label || "Overview";
  const navigate = (key) => {
    closeMenu(false);
    onNav(key);
  };
  const closeMenu = (restore = true) => {
    dialog.current?.close();
    setMenuOpen(false);
    if (restore) menuButton.current?.focus();
  };
  React.useEffect(() => {
    const mq = window.matchMedia("(min-width: 1100px)");
    const resize = () => {
      if (mq.matches) closeMenu(false);
    };
    mq.addEventListener("change", resize);
    return () => mq.removeEventListener("change", resize);
  }, []);
  React.useEffect(() => {
    if (!menuOpen) return;
    const previous = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = previous;
    };
  }, [menuOpen]);
  const links = (mobile = false) => (
    <>
      <a
        href="#dashboard"
        className="brand-link"
        onClick={(e) => {
          e.preventDefault();
          navigate("dashboard");
        }}
        aria-label="Watson overview"
      >
        <Brand />
      </a>
      {mobile && (
        <button
          className="button button-ghost mobile-close"
          onClick={() => closeMenu()}
        >
          <Icon name="close" />
          Close menu
        </button>
      )}
      <nav
        aria-label={mobile ? "Mobile navigation" : "Main navigation"}
        className="nav-links"
      >
        {workspaceLinks.map((l) => (
          <React.Fragment key={l.key}>
            {l.group && <p className="nav-group">{l.group}</p>}
            <a
              href={`#${l.key}`}
              aria-current={active === l.key ? "page" : undefined}
              onClick={(e) => {
                e.preventDefault();
                navigate(l.key);
              }}
            >
              <Icon name={l.icon} />
              <span>{l.label}</span>
            </a>
          </React.Fragment>
        ))}
      </nav>
      <div className="nav-footer">
        <span className="avatar" aria-hidden="true">
          {user?.name?.slice(0, 1) || "W"}
        </span>
        <div>
          <strong>{user?.name}</strong>
          <span>
            {user?.salesforce_session ? "Salesforce session" : "Watson account"}
          </span>
        </div>
        <button
          className="button button-ghost signout"
          onClick={() => {
            closeMenu(false);
            onLogout();
          }}
        >
          <Icon name="logout" />
          Sign out
        </button>
      </div>
    </>
  );
  return (
    <div className="app-shell">
      <a
        href="#main-content"
        className="skip-link"
        onClick={(e) => {
          e.preventDefault();
          document.getElementById("main-content")?.focus();
        }}
      >
        Skip to main content
      </a>
      <aside className="sidebar" aria-label="Workspace navigation">
        {links()}
      </aside>
      <dialog
        onKeyDown={(e) => {
          if (e.key !== "Tab") return;
          const controls = Array.from(
            dialog.current.querySelectorAll("a[href], button:not(:disabled)"),
          ).filter((el) => el.getClientRects().length);
          const first = controls[0],
            last = controls[controls.length - 1];
          if (e.shiftKey && document.activeElement === first) {
            e.preventDefault();
            last?.focus();
          } else if (!e.shiftKey && document.activeElement === last) {
            e.preventDefault();
            first?.focus();
          }
        }}
        ref={dialog}
        className="mobile-nav"
        aria-label="Navigation"
        onCancel={(e) => {
          e.preventDefault();
          closeMenu();
        }}
        onClose={() => setMenuOpen(false)}
        onClick={(e) => {
          if (e.target === dialog.current) closeMenu();
        }}
      >
        <div>{links(true)}</div>
      </dialog>
      <div className="workspace">
        <header className="topbar">
          <div className="topbar-location">
            <button
              ref={menuButton}
              className="button button-ghost menu-toggle"
              aria-haspopup="dialog"
              aria-expanded={menuOpen}
              onClick={() => {
                dialog.current.showModal();
                setMenuOpen(true);
              }}
            >
              <Icon name="menu" />
              Menu
            </button>
            <span className="topbar-label">
              Workspace <span aria-hidden="true">/</span>{" "}
              <strong>{pageName}</strong>
            </span>
          </div>
          <span className="session-label">
            <span className="status-dot" aria-hidden="true" />
            {user?.salesforce_session
              ? "Salesforce connected"
              : "Signed in to Watson"}
          </span>
        </header>
        <main
          id="main-content"
          className={`main-content page-${page}`}
          tabIndex="-1"
        >
          {children}
        </main>
        <footer className="workspace-footer">
          Watson <span aria-hidden="true">·</span> StoreConnect support
          workspace
        </footer>
      </div>
    </div>
  );
}

function PageHeading({ eyebrow, title, description, children }) {
  return (
    <div className="page-heading">
      <div>
        {eyebrow && <p className="eyebrow">{eyebrow}</p>}
        <h1>{title}</h1>
        {description && <p className="page-description">{description}</p>}
      </div>
      {children && <div className="page-actions">{children}</div>}
    </div>
  );
}

function InvestigationRow({ inv, onNav }) {
  const record = primarySalesforceRecord(inv);
  return (
    <li className="investigation-row">
      <span className="row-icon" aria-hidden="true">
        <Icon name="folder" />
      </span>
      <div className="row-content">
        <a
          href={`#show/${inv.id}`}
          className="row-title"
          onClick={(e) => {
            e.preventDefault();
            onNav("show", inv.id);
          }}
        >
          {inv.title}
        </a>
        <div className="row-meta">
          <span>{inv.environment || "Default environment"}</span>
          {record && (
            <span>
              {salesforceRecordLabel(record.type)} {record.number}
            </span>
          )}
          <span>{inv.user?.name || "Investigation"}</span>
        </div>
      </div>
      <div className="row-status">
        <StatusBadge status={inv.status} />
        <span>{timeAgo(inv.updated_at)}</span>
      </div>
    </li>
  );
}

function EmptyState({ title, children }) {
  return (
    <div className="empty-state">
      <Icon name="folder" size={32} />
      <h3>{title}</h3>
      <p>{children}</p>
    </div>
  );
}

function Dashboard({ user, investigations, environments, onNav }) {
  const open = investigations.filter((i) => i.status === "open").length;
  const resolved = investigations.filter((i) => i.status === "resolved").length;
  return (
    <>
      <PageHeading
        eyebrow="Your support workspace"
        title="A clearer view of every investigation."
        description={`Welcome${user?.name ? `, ${user.name.split(" ")[0]}` : ""}. Pick up where you left off, or start with a new lead.`}
      >
        <Btn onClick={() => onNav("new")}>
          <Icon name="plus" />
          New investigation
        </Btn>
      </PageHeading>
      <section className="overview-banner" aria-label="Workspace introduction">
        <div>
          <p className="eyebrow">Connect the dots</p>
          <h2>
            From first question
            <br />
            to a clear resolution.
          </h2>
          <p>Cases, bugs, tickets and tools. One place to find the answer.</p>
        </div>
        <div className="banner-art" aria-hidden="true">
          <span />
          <span />
          <span />
          <Icon name="search" size={44} />
        </div>
      </section>
      <div className="stats-grid">
        <StatTile
          label="Open investigations"
          value={open}
          color={C.orange}
          onClick={() => onNav("list")}
        />
        <StatTile
          label="Resolved"
          value={resolved}
          color={C.green}
          onClick={() => onNav("list")}
        />
        <StatTile
          label="All investigations"
          value={investigations.length}
          onClick={() => onNav("list")}
        />
        <StatTile
          label="Environments"
          value={environments.length}
          color={C.accent}
          onClick={() => onNav("environments")}
        />
      </div>
      <div className="overview-grid">
        <section className="panel">
          <div className="panel-heading">
            <div>
              <h2>Recent investigations</h2>
              <p>Your team's latest work</p>
            </div>
            <Btn variant="ghost" onClick={() => onNav("list")}>
              View all
              <Icon name="arrow" />
            </Btn>
          </div>
          {investigations.length ? (
            <ul className="investigation-rows">
              {investigations.slice(0, 6).map((inv) => (
                <InvestigationRow key={inv.id} inv={inv} onNav={onNav} />
              ))}
            </ul>
          ) : (
            <EmptyState title="Ready for your first investigation?">
              Create an investigation to keep the subject, evidence and findings
              together.
            </EmptyState>
          )}
        </section>
        <div className="overview-aside">
          <section className="panel quick-tools">
            <div className="panel-heading">
              <div>
                <h2>Start with a tool</h2>
                <p>Get straight to the evidence</p>
              </div>
            </div>
            {[
              {
                key: "lookup",
                icon: "search",
                title: "Record lookup",
                text: "Find an order, payment or record",
              },
              {
                key: "audit",
                icon: "audit",
                title: "Payment audit",
                text: "Trace transactions and mismatches",
              },
              {
                key: "timeline",
                icon: "timeline",
                title: "Build a timeline",
                text: "Follow the sequence of events",
              },
              {
                key: "shipments",
                icon: "truck",
                title: "Check shipments",
                text: "Review fulfillment and sync",
              },
            ].map((t) => (
              <a
                href={`#${t.key}`}
                key={t.key}
                onClick={(e) => {
                  e.preventDefault();
                  onNav(t.key);
                }}
              >
                <span className="tool-icon">
                  <Icon name={t.icon} />
                </span>
                <span>
                  <strong>{t.title}</strong>
                  <span>{t.text}</span>
                </span>
                <Icon name="arrow" />
              </a>
            ))}
          </section>
          <section className="help-card">
            <Icon name="link" />
            <h2>Keep the subject connected</h2>
            <p>
              Search Salesforce from an investigation and link the right Case,
              Bug or Ticket using your own access.
            </p>
            <Btn variant="ghost" onClick={() => onNav("new")}>
              Start an investigation
              <Icon name="arrow" />
            </Btn>
          </section>
        </div>
      </div>
    </>
  );
}

function InvestigationList({ investigations, onNav }) {
  const [filter, setFilter] = React.useState("all");
  const [query, setQuery] = React.useState("");
  const filtered = investigations.filter(
    (i) =>
      (filter === "all" || i.status === filter) &&
      [
        i.title,
        primarySalesforceRecord(i)?.number,
        salesforceRecordLabel(primarySalesforceRecord(i)?.type),
        i.environment,
        i.user?.name,
      ]
        .join(" ")
        .toLowerCase()
        .includes(query.toLowerCase()),
  );
  return (
    <>
      <PageHeading
        eyebrow="Workspace"
        title="Investigations"
        description="Every investigation, its subject, and the path to resolution."
      >
        <Btn onClick={() => onNav("new")}>
          <Icon name="plus" />
          New investigation
        </Btn>
      </PageHeading>
      <section className="panel">
        <div className="list-toolbar">
          <div
            className="filter-group"
            role="group"
            aria-label="Filter investigations by status"
          >
            {["all", "open", "resolved", "stale"].map((s) => (
              <button
                key={s}
                className="filter-button"
                aria-pressed={filter === s}
                onClick={() => setFilter(s)}
              >
                {s[0].toUpperCase() + s.slice(1)}
                <span>
                  {
                    investigations.filter((i) => s === "all" || i.status === s)
                      .length
                  }
                </span>
              </button>
            ))}
          </div>
          <Input
            label="Search investigations"
            value={query}
            onChange={setQuery}
            placeholder="Title, record, environment or owner"
            type="search"
          />
        </div>
        <p className="results-count" role="status">
          {filtered.length} investigation{filtered.length === 1 ? "" : "s"}
        </p>
        {filtered.length ? (
          <ul className="investigation-rows">
            {filtered.map((inv) => (
              <InvestigationRow key={inv.id} inv={inv} onNav={onNav} />
            ))}
          </ul>
        ) : (
          <EmptyState title="No investigations found">
            Try another search or status, or create a new investigation.
          </EmptyState>
        )}
      </section>
    </>
  );
}

function EnvironmentList({ environments, onNav }) {
  const [query, setQuery] = React.useState("");
  const visible = environments.filter((env) =>
    [env.name, env.rails_app, env.db_app]
      .join(" ")
      .toLowerCase()
      .includes(query.toLowerCase()),
  );
  return (
    <>
      <PageHeading
        eyebrow="Workspace"
        title="Environments"
        description="Find a tenant and review its configuration, access and sync health."
      >
        <Btn onClick={() => onNav("env-new")}>
          <Icon name="plus" />
          Add environment
        </Btn>
      </PageHeading>
      <div className="environment-search">
        <Input
          label="Search environments"
          value={query}
          onChange={setQuery}
          type="search"
          placeholder="Name or application"
        />
      </div>
      <p className="results-count" role="status">
        {visible.length} environment{visible.length === 1 ? "" : "s"}
      </p>
      <div className="environment-grid">
        {visible.map((env) => (
          <section key={env.id} className="panel environment-card">
            <span className="tool-icon">
              <Icon name="server" />
            </span>
            <h2>
              <a
                href={`#env-show/${env.id}`}
                onClick={(e) => {
                  e.preventDefault();
                  onNav("env-show", env.id);
                }}
              >
                {env.name}
              </a>
            </h2>
            <dl>
              <dt>Application</dt>
              <dd>{env.rails_app || env.db_app || "Not set"}</dd>
              <dt>Database</dt>
              <dd>{env.db_app || "Not set"}</dd>
            </dl>
            <Btn variant="ghost" onClick={() => onNav("env-show", env.id)}>
              View environment
              <Icon name="arrow" />
            </Btn>
          </section>
        ))}
      </div>
      {!visible.length && (
        <EmptyState title="No environments found">
          Try another search or add an environment to get started.
        </EmptyState>
      )}
    </>
  );
}