"use client";

import { App, Button, Card, Form, Input, Typography } from "antd";
import { useState } from "react";
import { changePassword, updateProfile } from "@/lib/api/profile";
import { ApiError } from "@/lib/api/client";
import { useAuth } from "@/lib/auth/AuthProvider";
import { TwoFactorDevicesCard } from "./TwoFactorDevicesCard";

interface ProfileFormValues {
  name: string;
}

interface PasswordFormValues {
  current_password: string;
  password: string;
  password_confirmation: string;
}

export default function ProfilePage() {
  const { message } = App.useApp();
  const { user, refresh } = useAuth();
  const [profileForm] = Form.useForm<ProfileFormValues>();
  const [passwordForm] = Form.useForm<PasswordFormValues>();
  const [isSavingProfile, setIsSavingProfile] = useState(false);
  const [isSavingPassword, setIsSavingPassword] = useState(false);

  if (!user) return null;

  async function handleProfileSubmit(values: ProfileFormValues) {
    setIsSavingProfile(true);
    try {
      await updateProfile(values.name);
      message.success("Display name updated.");
      void refresh();
    } catch (err) {
      message.error(err instanceof ApiError ? err.message : "Couldn't save that change.");
    } finally {
      setIsSavingProfile(false);
    }
  }

  async function handlePasswordSubmit(values: PasswordFormValues) {
    setIsSavingPassword(true);
    try {
      await changePassword(values);
      message.success("Password changed.");
      passwordForm.resetFields();
    } catch (err) {
      message.error(err instanceof ApiError ? err.message : "Couldn't change your password.");
    } finally {
      setIsSavingPassword(false);
    }
  }

  return (
    <div className="flex flex-col gap-4 page page-profile">
      <Typography.Title level={4} style={{ margin: 0 }}>
        Profile
      </Typography.Title>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card title="Display Name" className="dms_profile_display_name_card">
          <Form<ProfileFormValues>
            form={profileForm}
            layout="vertical"
            onFinish={handleProfileSubmit}
            initialValues={{ name: user.name }}
            className="dms_profile_display_name_form"
          >
            <Form.Item
              name="name"
              label="Display name"
              rules={[{ required: true, message: "Enter a name" }]}
              className="dms_profile_name_field"
            >
              <Input autoFocus />
            </Form.Item>
            <Form.Item style={{ marginBottom: 0 }} className="dms_profile_name_submit_field">
              <Button
                type="primary"
                htmlType="submit"
                loading={isSavingProfile}
                className="dms_profile_name_save_btn"
              >
                Save
              </Button>
            </Form.Item>
          </Form>
        </Card>

        <Card title="Change Password" className="dms_profile_password_card">
          <Form<PasswordFormValues>
            form={passwordForm}
            layout="vertical"
            onFinish={handlePasswordSubmit}
            className="dms_profile_password_form"
          >
            <Form.Item
              name="current_password"
              label="Current password"
              rules={[{ required: true, message: "Enter your current password" }]}
              className="dms_profile_current_password_field"
            >
              <Input.Password autoComplete="current-password" />
            </Form.Item>
            <Form.Item
              name="password"
              label="New password"
              rules={[
                { required: true, message: "Enter a new password" },
                { min: 8, message: "At least 8 characters" },
              ]}
              hasFeedback
              className="dms_profile_new_password_field"
            >
              <Input.Password autoComplete="new-password" />
            </Form.Item>
            <Form.Item
              name="password_confirmation"
              label="Repeat new password"
              dependencies={["password"]}
              hasFeedback
              rules={[
                { required: true, message: "Repeat the new password" },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue("password") === value) return Promise.resolve();
                    return Promise.reject(new Error("Passwords do not match"));
                  },
                }),
              ]}
              className="dms_profile_password_confirmation_field"
            >
              <Input.Password autoComplete="new-password" />
            </Form.Item>
            <Form.Item style={{ marginBottom: 0 }} className="dms_profile_password_submit_field">
              <Button
                type="primary"
                htmlType="submit"
                loading={isSavingPassword}
                className="dms_profile_password_save_btn"
              >
                Change password
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>

      <TwoFactorDevicesCard />
    </div>
  );
}