SetupForm.tsx

// src/app/setup/SetupForm.tsx
"use client"

import { H2 } from "@typography"
import Image from "next/image"
import { useRouter } from "next/navigation"
import { type SubmitEvent, useState } from "react"
import { Button, Card, Input, Toggle } from "@/components/ui"
import { Notice } from "@/components/ui/Notice"
import { SNAPSHOT_RETENTION_MAX, SNAPSHOT_RETENTION_MIN } from "@/lib/limits"

export function SetupForm() {
  const router = useRouter()
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [retentionEnabled, setRetentionEnabled] = useState(false)
  const [retentionDays, setRetentionDays] = useState(365)
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [isSubmitting, setIsSubmitting] = useState(false)

  async function handleSubmit(e: SubmitEvent<HTMLFormElement>) {
    e.preventDefault()
    setErrors({})

    if (!username.trim() || username.trim().length < 3) {
      setErrors({ username: "Username must be at least 3 characters." })
      return
    }

    if (password.length < 8) {
      setErrors({ password: "Password must be at least 8 characters." })
      return
    }

    if (password !== confirmPassword) {
      setErrors({ confirmPassword: "Passwords do not match." })
      return
    }

    setIsSubmitting(true)

    try {
      const payload: Record<string, unknown> = { password, username: username.trim() }
      if (retentionEnabled && retentionDays > 0) {
        payload.snapshotRetentionDays = retentionDays
      }

      const setupRes = await fetch("/api/auth/setup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      })

      if (!setupRes.ok) {
        const data = (await setupRes.json()) as { error?: string }
        const msg = data.error ?? "Setup failed. Please try again."
        const lowerMsg = msg.toLowerCase()
        if (lowerMsg.includes("username")) {
          setErrors({ username: msg })
        } else if (lowerMsg.includes("match")) {
          setErrors({ confirmPassword: msg })
        } else if (lowerMsg.includes("8 char") || lowerMsg.includes("password")) {
          setErrors({ password: msg })
        } else {
          setErrors({ form: msg })
        }
        return
      }

      const loginRes = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ password, username: username.trim() }),
      })

      if (!loginRes.ok) {
        const data = (await loginRes.json()) as { error?: string }
        setErrors({ form: data.error ?? "Login after setup failed. Please go to the login page." })
        return
      }

      router.push("/")
    } catch {
      setErrors({ form: "An unexpected error occurred. Please try again." })
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className="min-h-screen bg-base flex items-center justify-center px-4">
      <div className="w-full max-w-sm">
        <div className="mb-8 text-center">
          <Image
            src="/img/trackerTracker_logo.svg"
            alt="Tracker Tracker"
            width={160}
            height={40}
            className="mx-auto"
            style={{ height: 40, width: "auto" }}
            priority
          />
          <H2 className="mt-6 text-secondary text-center">Create an account</H2>
        </div>

        <Card elevation="elevated" className="p-6">
          <form onSubmit={handleSubmit} className="flex flex-col gap-5">
            <Input
              label="Username"
              type="text"
              autoComplete="username"
              placeholder="Min. 3 characters"
              required
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              error={errors.username}
              disabled={isSubmitting}
            />

            <Input
              label="Master Password"
              type="password"
              autoComplete="new-password"
              placeholder="Min. 8 characters"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              error={errors.password}
              disabled={isSubmitting}
              required
            />

            <Input
              label="Confirm Password"
              type="password"
              autoComplete="new-password"
              placeholder="Re-enter password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              error={errors.confirmPassword}
              disabled={isSubmitting}
              required
            />

            <div className="border-t border-border pt-4 mt-1">
              <Toggle
                label="Enable snapshot retention"
                description={
                  retentionEnabled
                    ? `Snapshots older than ${retentionDays} days will be pruned automatically.`
                    : "Disabled — snapshots will be kept indefinitely. You can change this later in Settings."
                }
                checked={retentionEnabled}
                onChange={setRetentionEnabled}
                disabled={isSubmitting}
              />
              {retentionEnabled && (
                <Input
                  label="Retention (days)"
                  type="number"
                  min={SNAPSHOT_RETENTION_MIN}
                  max={SNAPSHOT_RETENTION_MAX}
                  value={String(retentionDays)}
                  onChange={(e) =>
                    setRetentionDays(
                      Math.max(
                        SNAPSHOT_RETENTION_MIN,
                        Math.min(SNAPSHOT_RETENTION_MAX, Number(e.target.value) || 365)
                      )
                    )
                  }
                  disabled={isSubmitting}
                  className="mt-3"
                />
              )}
            </div>

            <Notice message={errors.form} />

            <Button
              type="submit"
              variant="primary"
              size="md"
              className="w-full mt-1"
              disabled={isSubmitting}
              text={isSubmitting ? "Setting up…" : "Create Account"}
            />
          </form>
        </Card>
      </div>
    </div>
  )
}