"use client";

import { useState } from "react";
import Link from "next/link";

import LanguageSwitcher from "@/components/LanguageSwitcher";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { api } from "@/lib/api";
import { setToken } from "@/lib/auth";
import { useTranslation } from "@/lib/i18n";

const RegisterPage = () => {
  const t = useTranslation();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [inviteCode, setInviteCode] = useState("");
  const [error, setError] = useState("");

  const onSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setError("");
    try {
      const result = await api.register({ username, password, inviteCode });
      setToken(result.token);
      window.location.href = "/todos";
    } catch (err) {
      setError(t("registerFailed"));
    }
  };

  return (
    <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-muted via-background to-muted/80 px-4 py-10">
      <div className="absolute right-4 top-4">
        <LanguageSwitcher />
      </div>
      <Card className="w-full max-w-md shadow-lg">
        <CardHeader>
          <CardTitle className="text-2xl">{t("registerTitle")}</CardTitle>
          <CardDescription>{t("registerDesc")}</CardDescription>
        </CardHeader>
        <CardContent>
          <form className="space-y-4" onSubmit={onSubmit}>
            <div className="space-y-2">
              <Label htmlFor="invite">{t("inviteCode")}</Label>
              <Input
                id="invite"
                placeholder={t("enterInviteCode")}
                value={inviteCode}
                onChange={(event) => setInviteCode(event.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="username">{t("username")}</Label>
              <Input
                id="username"
                placeholder={t("enterUsername")}
                value={username}
                onChange={(event) => setUsername(event.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password">{t("password")}</Label>
              <Input
                id="password"
                type="password"
                placeholder={t("enterPassword")}
                value={password}
                onChange={(event) => setPassword(event.target.value)}
              />
            </div>
            {error && <div className="text-sm text-destructive">{error}</div>}
            <Button className="w-full" type="submit">
              {t("register")}
            </Button>
            <Link
              className="block text-center text-sm text-muted-foreground transition hover:text-foreground"
              href="/login"
            >
              {t("hasAccount")}
            </Link>
          </form>
        </CardContent>
      </Card>
    </div>
  );
};

export default RegisterPage;
