import { loginAction } from "@/app/actions";
import { Field, Input, PageShell, PrimaryButton, SectionCard } from "@/components/ui";

export default async function LoginPage({
  searchParams
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const params = await searchParams;
  const hasError = params.error === "1";

  return (
    <PageShell>
      <div className="flex min-h-screen flex-col justify-center">
        <div className="mb-8 space-y-2">
          <p className="text-sm text-[var(--muted)]">Shared internal access</p>
          <h1 className="text-4xl font-semibold">Food Tracker</h1>
          <p className="text-sm text-[var(--muted)]">Use the shared account to manage daily lunch and mandazi distribution.</p>
        </div>

        <SectionCard title="Log in">
          <form action={loginAction} className="grid gap-4">
            <Field label="Email">
              <Input name="email" type="email" defaultValue="admin@foodtracker.local" required />
            </Field>
            <Field label="Password">
              <Input name="password" type="password" defaultValue="password123" required />
            </Field>
            {hasError ? <p className="text-sm text-red-600">Invalid email or password.</p> : null}
            <PrimaryButton type="submit">Log in</PrimaryButton>
          </form>
        </SectionCard>
      </div>
    </PageShell>
  );
}