"use client";

import { useState } from "react";
import Image from "next/image";
import { ServerIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Frame } from "./frame";

export function LoginLayoutPattern() {
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");
  const ready = user.trim() !== "" && pass !== "";
  return (
    <Frame className="grid grid-cols-1 md:grid-cols-2">
      <div className="hidden flex-col justify-between border-r border-border bg-primary p-10 text-primary-foreground md:flex">
        <Image src="/medora-teal-logo.svg" alt="Medora" width={884} height={238} unoptimized className="h-9 w-auto self-start" />
        <div className="space-y-2">
          <p className="text-2xl leading-8 font-semibold">Run the till, the shelves and the books from one place.</p>
          <p className="text-sm opacity-80">Point of sale, inventory with batch expiry, prescriptions and accounts.</p>
        </div>
        <p className="text-xs opacity-70">Version 1.0 (design preview)</p>
      </div>
      <div className="flex items-center justify-center p-8">
        <form className="w-full max-w-sm space-y-5" onSubmit={(e) => e.preventDefault()}>
          <Image src="/medora-logo.svg" alt="Medora" width={884} height={238} unoptimized className="h-8 w-auto md:hidden" />
          <div>
            <h3 className="text-xl font-semibold">Sign in</h3>
            <p className="mt-1 text-sm text-muted-foreground">Use your email or username.</p>
          </div>
          <Field><FieldLabel htmlFor="ll-user">Email or username</FieldLabel><Input id="ll-user" autoComplete="username" value={user} onChange={(e) => setUser(e.target.value)} /></Field>
          <Field><FieldLabel htmlFor="ll-pass">Password</FieldLabel><Input id="ll-pass" type="password" autoComplete="current-password" value={pass} onChange={(e) => setPass(e.target.value)} /></Field>
          <Button type="submit" size="lg" className="w-full" disabled={!ready}>Sign in</Button>
          <div className="flex items-center justify-between text-sm">
            <button type="button" className="cursor-pointer text-muted-foreground underline-offset-4 hover:underline">Forgot password?</button>
            <button type="button" className="flex cursor-pointer items-center gap-1 text-muted-foreground hover:text-foreground"><ServerIcon className="size-4" />Server</button>
          </div>
        </form>
      </div>
    </Frame>
  );
}