"use client";

import { useRouter } from "next/navigation";
import { Input } from "@/src/components/commons/Input";
import { Button } from "@/src/components/commons/Button";
import { Typography } from "@/src/components/commons/Typography";
import Header from "@/src/components/commons/Header";
import { useChangePasswordForm } from "@/src/hooks/useChangePasswordForm";
import { useLanguage } from "@/src/hooks/useLanguage";

export function ChangePasswordPage() {
  const { t } = useLanguage();
  const router = useRouter();
  const {
    oldPassword,
    setOldPassword,
    newPassword,
    setNewPassword,
    confirmPassword,
    setConfirmPassword,
    error,
    success,
    isLoading,
    handleSubmit,
  } = useChangePasswordForm();

  return (
    <div>
      <Header />
      <div className="flex flex-col min-h-[calc(100vh-80px)] items-center justify-center gap-10 py-10">
        <div className="max-w-sm w-full">
          <div className="border-2 border-zinc-100 shadow-[0_10px_15px_rgba(0,0,0,0.1)] rounded-2xl p-6">
            <div className="text-center space-y-3 mb-6">
              <Typography variant="h3" color="#006f36ff">
                {t("changePassword.title")}
              </Typography>
            </div>

            <form onSubmit={handleSubmit} className="space-y-4">
              <Input
                id="oldPassword"
                type="password"
                label={t("changePassword.old_password_label")}
                placeholder={t("changePassword.old_password_placeholder")}
                value={oldPassword}
                onChange={(e) => setOldPassword(e.target.value)}
                required
              />

              <Input
                id="newPassword"
                type="password"
                label={t("changePassword.new_password_label")}
                placeholder={t("changePassword.new_password_placeholder")}
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
                required
              />

              <Input
                id="confirmPassword"
                type="password"
                label={t("changePassword.confirm_password_label")}
                placeholder={t("changePassword.confirm_password_placeholder")}
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                required
              />

              {error && (
                <Typography variant="b2" color="#dc2626" className="text-center">
                  {error}
                </Typography>
              )}

              {success && (
                <Typography variant="b2" color="#006f36" className="text-center">
                  {t("changePassword.success")}
                </Typography>
              )}

              <Button type="submit" isLoading={isLoading} className="mt-4">
                {t("changePassword.submit")}
              </Button>

              <Button
                type="button"
                variant="secondary"
                onClick={() => router.push("/")}
                className="mt-2"
              >
                {t("changePassword.cancel")}
              </Button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}