"use client";

import { useActionState } from "react";
import { changePasswordAction, updateProfileAction } from "@/app/actions/settings";
import { TextareaField, TextField } from "@/components/settings-fields";
import { PlateBody, PlateFooter } from "@/components/settings-plate";
import { Alert, Button } from "@/components/ui";
import type { User } from "@/lib/users";

export function ProfileForm({ user }: { user: User }) {
  const [state, action, pending] = useActionState(updateProfileAction, undefined);
  return (
    <form action={action}>
      <PlateBody className="max-w-xl">
        <TextField label="Username" description="Usernames can't be changed." value={user.username} disabled readOnly />
        <TextField
          label="Name"
          description="Shown on your profile and used as the author of commits you make in the browser."
          name="name"
          defaultValue={user.name}
          maxLength={100}
          autoComplete="name"
        />
        <TextField
          label="Email"
          description="Used as the author email for commits made in the browser."
          name="email"
          type="email"
          required
          defaultValue={user.email}
          autoComplete="email"
        />
        <TextareaField
          label="Bio"
          name="bio"
          minRows={3}
          maxLength={300}
          defaultValue={user.bio}
          placeholder="Tell us a little bit about yourself"
        />
        {state?.error && <Alert>{state.error}</Alert>}
        {state?.success && <Alert kind="success">{state.success}</Alert>}
      </PlateBody>
      <PlateFooter>
        <Button variant="primary" disabled={pending}>
          {pending ? "Saving…" : "Update Profile"}
        </Button>
      </PlateFooter>
    </form>
  );
}

export function PasswordForm() {
  const [state, action, pending] = useActionState(changePasswordAction, undefined);
  return (
    <form action={action}>
      <PlateBody className="max-w-xl">
        <TextField label="Current password" name="current" type="password" required autoComplete="current-password" />
        <TextField
          label="New password"
          description="At least 8 characters."
          name="password"
          type="password"
          required
          minLength={8}
          autoComplete="new-password"
        />
        <TextField label="Confirm new password" name="confirm" type="password" required minLength={8} autoComplete="new-password" />
        {state?.error && <Alert>{state.error}</Alert>}
        {state?.success && <Alert kind="success">{state.success}</Alert>}
      </PlateBody>
      <PlateFooter>
        <Button disabled={pending}>{pending ? "Updating…" : "Update Password"}</Button>
      </PlateFooter>
    </form>
  );
}