"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input, Label, Select } from "@/components/ui/input";
import { Card, CardBody, CardHeader, CardTitle } from "@/components/ui/card";

export function ProfileForm({
  user,
  account,
}: {
  user: { name: string; email: string; defaultCurrency: string; avatarUrl: string | null };
  account: { name: string };
}) {
  const router = useRouter();
  const [saving, setSaving] = useState(false);
  const [pwdSaving, setPwdSaving] = useState(false);

  async function saveProfile(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSaving(true);
    const data: Record<string, string> = {};
    for (const [k, v] of new FormData(e.currentTarget).entries()) data[k] = String(v);
    data.accountName = data.account;
    delete data.account;
    const res = await fetch("/api/settings/profile", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    const j = await res.json().catch(() => ({}));
    setSaving(false);
    if (!res.ok) return toast.error(j.error ?? "Failed to save.");
    toast.success("Profile updated.");
    router.refresh();
  }

  async function savePassword(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setPwdSaving(true);
    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
    const res = await fetch("/api/settings/profile", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ currentPassword: data.currentPassword, newPassword: data.newPassword }),
    });
    const j = await res.json().catch(() => ({}));
    setPwdSaving(false);
    if (!res.ok) return toast.error(j.error ?? "Failed to change password.");
    toast.success("Password changed.");
    e.currentTarget.reset();
  }

  return (
    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>Profile</CardTitle>
        </CardHeader>
        <CardBody>
          <form onSubmit={saveProfile} className="space-y-4">
            <div>
              <Label>Business name</Label>
              <Input name="account" defaultValue={account.name} required />
            </div>
            <div>
              <Label>Full name</Label>
              <Input name="name" defaultValue={user.name} required />
            </div>
            <div>
              <Label>Email</Label>
              <Input name="email" type="email" defaultValue={user.email} required />
            </div>
            <div>
              <Label>Default currency</Label>
              <Select name="defaultCurrency" defaultValue={user.defaultCurrency}>
                {["USD", "EUR", "GBP", "INR", "BDT", "PKR", "AED", "SAR"].map((c) => (
                  <option key={c} value={c}>
                    {c}
                  </option>
                ))}
              </Select>
            </div>
            <div className="flex justify-end">
              <Button type="submit" loading={saving}>
                Save
              </Button>
            </div>
          </form>
        </CardBody>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Change password</CardTitle>
        </CardHeader>
        <CardBody>
          <form onSubmit={savePassword} className="space-y-4">
            <div>
              <Label>Current password</Label>
              <Input name="currentPassword" type="password" required />
            </div>
            <div>
              <Label>New password</Label>
              <Input name="newPassword" type="password" minLength={8} required />
            </div>
            <div className="flex justify-end">
              <Button type="submit" loading={pwdSaving}>
                Change password
              </Button>
            </div>
          </form>
        </CardBody>
      </Card>
    </div>
  );
}