Security

"use client";
import { useState } from "react";
import {
  LuKeyRound,
  LuLaptop,
  LuMonitor,
  LuShieldCheck,
  LuSmartphone,
  LuTablet,
} from "react-icons/lu";
import { Badge, Button, Card, ListItem } from "@nexera-ui/react";

const SESSIONS = [
  {
    id: "mac",
    icon: <LuLaptop />,
    device: "MacBook Pro · Chrome",
    where: "London, UK · Active now",
    isCurrent: true,
  },
  {
    id: "iphone",
    icon: <LuSmartphone />,
    device: "iPhone 15 · Northwind app",
    where: "London, UK · 2 hours ago",
    isCurrent: false,
  },
  {
    id: "ipad",
    icon: <LuTablet />,
    device: "iPad Air · Safari",
    where: "Lisbon, Portugal · 3 days ago",
    isCurrent: false,
  },
  {
    id: "pc",
    icon: <LuMonitor />,
    device: "Windows PC · Edge",
    where: "Manchester, UK · 12 September 2026",
    isCurrent: false,
  },
];

/** Security: password, two-step verification and the devices where the person is signed in. */
export default function Security() {
  const [sessions, setSessions] = useState(SESSIONS);
  const [notice, setNotice] = useState("");
  const others = sessions.filter((session) => !session.isCurrent);

  const signOut = (ids: string[], message: string) => {
    setSessions((previous) => previous.filter((session) => !ids.includes(session.id)));
    setNotice(message); // replace with your revoke-session request
  };

  return (
    <div className="@container min-h-[560px] bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-3xl gap-6">
        <header className="grid gap-1">
          <h2 className="text-heading-h2 text-primary">Security</h2>
          <p className="text-body-default text-secondary">
            Keep your account and your team&apos;s personal data safe.
          </p>
        </header>
        <div className="grid gap-4 @3xl:grid-cols-2">
          <Card
            icon={<LuKeyRound />}
            title="Password"
            titleLevel={3}
            body="Last changed on 12 August 2026. Use a password you don't use anywhere else."
            action={
              <Button variant="secondary" size="sm">
                Change password
              </Button>
            }
          />
          <Card
            icon={<LuShieldCheck />}
            title="Two-step verification"
            titleLevel={3}
            body="Codes from your authenticator app. 8 of 10 backup codes left."
            meta={<Badge label="On" tone="success" />}
            action={
              <Button variant="secondary" size="sm">
                Manage
              </Button>
            }
          />
        </div>
        <section
          aria-labelledby="sessions-heading"
          className="grid gap-4 rounded-xl border border-default bg-surface p-5"
        >
          <div className="flex flex-wrap items-start justify-between gap-3">
            <div className="grid gap-0.5">
              <h3 id="sessions-heading" className="text-heading-h4 text-primary">
                Where you&apos;re signed in
              </h3>
              <p className="text-body-small text-secondary">
                Sign out of anything you don&apos;t recognise, then change your password.
              </p>
            </div>
            <Button
              variant="secondary"
              size="sm"
              isDisabled={others.length === 0}
              onPress={() => {
                signOut(
                  others.map((session) => session.id),
                  "Signed out of all other devices.",
                );
              }}
            >
              Sign out of other devices
            </Button>
          </div>
          <p role="status" className="text-body-small text-status-success-fg empty:hidden">
            {notice}
          </p>
          <ul
            aria-labelledby="sessions-heading"
            className="m-0 grid list-none divide-y divide-subtle p-0"
          >
            {sessions.map((session) => (
              <li key={session.id}>
                <ListItem
                  icon={session.icon}
                  title={session.device}
                  subtitle={session.where}
                  trailing={
                    session.isCurrent ? (
                      <Badge label="This device" tone="brand" dot={false} />
                    ) : (
                      <Button
                        variant="ghost"
                        size="sm"
                        aria-label={`Sign out of ${session.device}`}
                        onPress={() => {
                          signOut([session.id], `Signed out of ${session.device}.`);
                        }}
                      >
                        Sign out
                      </Button>
                    )
                  }
                />
              </li>
            ))}
          </ul>
        </section>
      </div>
    </div>
  );
}