Sign In

"use client"

import * as React from "react"
import { LockIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Avatar, AvatarFallback } from "@/registry/macos/ui/avatar"
import { Button } from "@/registry/macos/ui/button"
import { Checkbox } from "@/registry/macos/ui/checkbox"
import { IconTile } from "@/registry/macos/ui/icon-tile"
import { Input } from "@/registry/macos/ui/input"
import { Label } from "@/registry/macos/ui/label"
import {
  Window,
  WindowContent,
  WindowControls,
  WindowMain,
  WindowTitle,
  WindowTitlebar,
} from "@/registry/macos/ui/window"

// A sign-in window: email, password, and a short reset confirmation.
export function Login01({
  className,
  ...props
}: React.ComponentProps<typeof Window>) {
  const emailId = React.useId()
  const passwordId = React.useId()
  const [email, setEmail] = React.useState("maya@example.com")
  const [password, setPassword] = React.useState("")
  const [mode, setMode] = React.useState<"form" | "reset" | "in">("form")

  return (
    <Window className={cn("h-[448px] w-[340px]", className)} {...props}>
      <WindowMain>
        <WindowTitlebar>
          <WindowControls />
          <WindowTitle>Sign In</WindowTitle>
        </WindowTitlebar>
        <WindowContent className="flex flex-col px-8 pt-8 pb-6">
          {mode === "in" ? (
            <div className="flex flex-1 flex-col items-center justify-center text-center">
              <Avatar className="size-16 text-[22px]">
                <AvatarFallback>MC</AvatarFallback>
              </Avatar>
              <h2 className="mt-4 text-mac-title-1 font-bold">Signed in</h2>
              <p className="mt-1 text-mac-subheadline text-mac-label-secondary">{email}</p>
              <Button variant="secondary" className="mt-6" onClick={() => setMode("form")}>
                Sign Out
              </Button>
            </div>
          ) : mode === "reset" ? (
            <div className="flex flex-1 flex-col items-center justify-center text-center">
              <IconTile color="blue" className="size-16 rounded-[16px] [&_svg]:size-8">
                <LockIcon strokeWidth={1.75} />
              </IconTile>
              <h2 className="mt-4 text-mac-title-1 font-bold">Check your inbox</h2>
              <p className="mt-1 max-w-[240px] text-mac-body text-mac-label-secondary">
                A reset link would be sent to {email}.
              </p>
              <Button variant="secondary" className="mt-6" onClick={() => setMode("form")}>
                Back to Sign In
              </Button>
            </div>
          ) : (
            <form
              className="flex flex-1 flex-col"
              onSubmit={(event) => {
                event.preventDefault()
                setMode("in")
              }}
            >
              <div className="flex flex-col items-center text-center">
                <IconTile color="blue" className="size-16 rounded-[16px] [&_svg]:size-8">
                  <LockIcon strokeWidth={1.75} />
                </IconTile>
                <h2 className="mt-4 text-mac-title-1 font-bold">Welcome back</h2>
                <p className="mt-1 text-mac-subheadline text-mac-label-secondary">
                  Sign in to continue.
                </p>
              </div>
              <div className="mt-6 flex flex-col gap-3">
                <div className="flex flex-col gap-1">
                  <Label htmlFor={emailId}>Email</Label>
                  <Input
                    id={emailId}
                    type="email"
                    autoComplete="username"
                    value={email}
                    onChange={(event) => setEmail(event.target.value)}
                    required
                  />
                </div>
                <div className="flex flex-col gap-1">
                  <div className="flex items-center justify-between">
                    <Label htmlFor={passwordId}>Password</Label>
                    <Button
                      type="button"
                      variant="link"
                      className="text-mac-subheadline"
                      onClick={() => setMode("reset")}
                    >
                      Forgot?
                    </Button>
                  </div>
                  <Input
                    id={passwordId}
                    type="password"
                    autoComplete="current-password"
                    value={password}
                    onChange={(event) => setPassword(event.target.value)}
                    placeholder="Required"
                    required
                  />
                </div>
                <Label className="gap-[6px]">
                  <Checkbox defaultChecked />
                  Remember me
                </Label>
              </div>
              <Button type="submit" size="lg" className="mt-auto w-full">
                Sign In
              </Button>
            </form>
          )}
        </WindowContent>
      </WindowMain>
    </Window>
  )
}