Session expired

"use client";
import { useState } from "react";
import { LuLock } from "react-icons/lu";
import { Alert, AvatarLabel, Avatar, Button, CheckboxField, Input, Modal } from "@nexera-ui/react";

const DRAFT = [
  { term: "Leave type", value: "Annual leave" },
  { term: "Dates", value: "Mon 14 Dec – Fri 18 Dec 2026" },
  { term: "Working days", value: "5 of 18 remaining" },
  { term: "Approver", value: "Ahmed Raza" },
];

/** Session expired: ask the person to sign in again in a dialog, keeping their unsaved leave request in place. */
export default function SessionExpired() {
  const [signedIn, setSignedIn] = useState(false);
  const [open, setOpen] = useState(false);
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="@container min-h-[520px] bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-2xl gap-6">
        <header className="grid gap-1">
          <h2 className="text-heading-h2 text-primary">Request time off</h2>
          <p className="text-body-default text-secondary">
            Your draft is kept on this device until you submit it.
          </p>
        </header>
        {signedIn ? (
          <Alert
            tone="success"
            title="Welcome back, Ayesha"
            description="You're signed in again. Your draft is right where you left it."
          />
        ) : (
          <Alert
            tone="warning"
            title="Your session expired"
            description="For your security, Northwind signs you out after 30 minutes without activity. Sign in to submit your request."
            actions={
              <Modal
                title="Sign in to continue"
                subtitle="Enter your password to pick up where you left off. Nothing you typed is lost."
                size="sm"
                isOpen={open}
                onOpenChange={setOpen}
                trigger={<Button size="sm">Sign in again</Button>}
                secondaryAction={
                  <Button variant="secondary" size="md" slot="close">
                    Sign out
                  </Button>
                }
                primaryAction={
                  <Button type="submit" form="reauth" size="md">
                    Sign in
                  </Button>
                }
              >
                <form
                  id="reauth"
                  className="grid gap-4"
                  onSubmit={(event) => {
                    event.preventDefault();
                    setSignedIn(true); // replace with your sign-in request
                    setOpen(false);
                  }}
                >
                  <AvatarLabel
                    size="md"
                    name="Ayesha Khan"
                    subtitle="ayesha.khan@northwind.io"
                    avatar={<Avatar initials="AK" isDecorative />}
                  />
                  <div className="grid gap-2">
                    <Input
                      label="Password"
                      type={showPassword ? "text" : "password"}
                      name="password"
                      autoComplete="current-password"
                      leadingIcon={<LuLock />}
                      isRequired
                    />
                    <CheckboxField
                      label="Show password"
                      isSelected={showPassword}
                      onChange={setShowPassword}
                    />
                  </div>
                </form>
              </Modal>
            }
          />
        )}
        <section
          aria-labelledby="draft-heading"
          className="grid gap-4 rounded-xl border border-default bg-surface p-5"
        >
          <h3 id="draft-heading" className="text-heading-h4 text-primary">
            Draft request
          </h3>
          <dl className="grid gap-4 @md:grid-cols-2">
            {DRAFT.map((item) => (
              <div key={item.term} className="grid gap-0.5">
                <dt className="text-body-small text-secondary">{item.term}</dt>
                <dd className="text-body-strong text-primary">{item.value}</dd>
              </div>
            ))}
          </dl>
          <p className="rounded-lg bg-sunken p-3 text-body-small text-secondary">
            &ldquo;Family trip to Lisbon. Sara has agreed to cover payroll questions that
            week.&rdquo;
          </p>
          <div className="flex flex-wrap justify-end gap-2">
            <Button variant="secondary" size="md" isDisabled={!signedIn}>
              Save draft
            </Button>
            <Button size="md" isDisabled={!signedIn}>
              Submit request
            </Button>
          </div>
        </section>
      </div>
    </div>
  );
}