"use client";

import {useState} from "react";
import {useForm} from "react-hook-form";
import {zodResolver} from "@hookform/resolvers/zod";
import {z} from "zod";
import {Button} from "@/components/ui/button";
import {Input} from "@/components/ui/input";
import {Label} from "@/components/ui/label";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {CheckCircle2} from "lucide-react";

const profileSchema = z.object({
  firstName: z.string().min(1, "Required"),
  lastName: z.string().min(1, "Required"),
  phone: z.string().optional()
});

type ProfileForm = z.infer<typeof profileSchema>;

async function updateProfile(data: ProfileForm): Promise<{success: boolean; error?: string}> {
  const res = await fetch("/api/account/profile", {
    method: "PATCH",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify(data)
  });
  if (!res.ok) return {success: false, error: "Failed to update"};
  return {success: true};
}

export default function ProfilePage() {
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const form = useForm<ProfileForm>({resolver: zodResolver(profileSchema)});

  async function onSubmit(data: ProfileForm) {
    setError(null);
    setSaved(false);
    const result = await updateProfile(data);
    if (result.success) {
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } else {
      setError(result.error ?? "An error occurred");
    }
  }

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-900">Profile Settings</h1>
        <p className="mt-1 text-slate-500">Update your personal information</p>
      </div>

      <Card className="max-w-xl">
        <CardHeader><CardTitle>Personal Information</CardTitle></CardHeader>
        <CardContent>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-5">
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <Label htmlFor="firstName">First Name *</Label>
                <Input id="firstName" {...form.register("firstName")} className="mt-1" />
                {form.formState.errors.firstName && <p className="mt-1 text-xs text-red-500">{form.formState.errors.firstName.message}</p>}
              </div>
              <div>
                <Label htmlFor="lastName">Last Name *</Label>
                <Input id="lastName" {...form.register("lastName")} className="mt-1" />
                {form.formState.errors.lastName && <p className="mt-1 text-xs text-red-500">{form.formState.errors.lastName.message}</p>}
              </div>
            </div>
            <div>
              <Label htmlFor="phone">Phone Number</Label>
              <Input id="phone" {...form.register("phone")} className="mt-1" placeholder="+1 234 567 8900" />
            </div>
            {error && <p className="text-sm text-red-600">{error}</p>}
            {saved && (
              <div className="flex items-center gap-2 text-sm text-green-600">
                <CheckCircle2 className="h-4 w-4" />
                Profile saved successfully
              </div>
            )}
            <Button type="submit" disabled={form.formState.isSubmitting}>
              {form.formState.isSubmitting ? "Saving..." : "Save Changes"}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}