Integrations

"use client";
import { useState } from "react";
import {
  LuBriefcase,
  LuCake,
  LuCalendar,
  LuCalendarOff,
  LuMessageSquare,
  LuReceipt,
  LuUserPlus,
  LuVideo,
} from "react-icons/lu";
import { Badge, CheckboxCard, CheckboxGroup, Switch } from "@nexera-ui/react";

const APPS = [
  {
    id: "chat",
    name: "Team chat",
    icon: <LuMessageSquare />,
    text: "Post approvals, birthdays and new starters to your channels.",
  },
  {
    id: "calendar",
    name: "Google Calendar",
    icon: <LuCalendar />,
    text: "Add approved leave to each person's calendar as out of office.",
  },
  {
    id: "meetings",
    name: "Video meetings",
    icon: <LuVideo />,
    text: "Create a meeting link for every interview and review.",
  },
  {
    id: "accounting",
    name: "Accounting",
    icon: <LuReceipt />,
    text: "Send payroll journals and approved expenses to your ledger.",
  },
  {
    id: "ats",
    name: "Applicant tracking",
    icon: <LuBriefcase />,
    text: "Turn hired candidates into employees with their details filled in.",
  },
];

/** Integrations: connect other apps and choose what Northwind shares with the team chat integration. */
export default function Integrations() {
  const [connected, setConnected] = useState<Set<string>>(new Set(["chat", "calendar"]));
  const toggle = (id: string, isOn: boolean) => {
    setConnected((previous) => {
      const next = new Set(previous);
      if (isOn) next.add(id);
      else next.delete(id);
      return next;
    });
  };

  return (
    <div className="@container min-h-[640px] bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-4xl gap-6">
        <header className="grid gap-1">
          <h2 className="text-heading-h2 text-primary">Integrations</h2>
          <p className="text-body-default text-secondary">
            {connected.size} of {APPS.length} connected. Only admins can connect apps for Northwind
            UK.
          </p>
        </header>
        <ul aria-label="Apps" className="m-0 grid list-none gap-3 p-0 @3xl:grid-cols-2">
          {APPS.map((app) => {
            const isOn = connected.has(app.id);
            return (
              <li
                key={app.id}
                className="flex items-start gap-3 rounded-xl border border-default bg-surface p-4"
              >
                <span
                  className="grid size-10 shrink-0 place-items-center rounded-lg bg-brand-subtle text-brand-text"
                  aria-hidden="true"
                >
                  {app.icon}
                </span>
                <div className="grid min-w-0 flex-1 gap-1">
                  <div className="flex flex-wrap items-center gap-2">
                    <h3 className="text-body-strong text-primary">{app.name}</h3>
                    <Badge
                      label={isOn ? "Connected" : "Not connected"}
                      tone={isOn ? "success" : "neutral"}
                    />
                  </div>
                  <p className="text-body-small text-secondary">{app.text}</p>
                </div>
                <Switch
                  aria-label={`Connect ${app.name}`}
                  isSelected={isOn}
                  onChange={(value) => {
                    toggle(app.id, value);
                  }}
                />
              </li>
            );
          })}
        </ul>
        {connected.has("chat") ? (
          <section
            aria-labelledby="chat-settings"
            className="grid gap-4 rounded-xl border border-default bg-surface p-5"
          >
            <div className="grid gap-0.5">
              <h3 id="chat-settings" className="text-heading-h4 text-primary">
                Team chat settings
              </h3>
              <p className="text-body-small text-secondary">
                Posts go to #northwind-people. Private details such as pay are never shared.
              </p>
            </div>
            <CheckboxGroup
              label="What to post"
              name="chat-events"
              defaultValue={["leave", "starters"]}
            >
              <CheckboxCard
                value="leave"
                icon={<LuCalendarOff />}
                title="Who's out today"
                description="A summary at 9:00 each weekday."
              />
              <CheckboxCard
                value="starters"
                icon={<LuUserPlus />}
                title="New starters"
                description="A welcome post on their first day."
              />
              <CheckboxCard
                value="birthdays"
                icon={<LuCake />}
                title="Birthdays"
                description="Only for people who share their birthday."
              />
            </CheckboxGroup>
          </section>
        ) : null}
      </div>
    </div>
  );
}