"use client";

import { useState, useTransition } from "react";
import { updateAvatar } from "@/lib/actions/profile";
import { Avatar } from "@/components/ui/Avatar";

export function AvatarEditModal({
  username,
  avatarUrl,
  onClose,
}: {
  username: string;
  avatarUrl: string | null;
  onClose: () => void;
}) {
  const [file, setFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  function handleSave() {
    if (!file) return;
    setError(null);
    const formData = new FormData();
    formData.set("file", file);
    startTransition(async () => {
      const result = await updateAvatar(undefined, formData);
      if (result?.error) {
        setError(result.error);
        return;
      }
      onClose();
    });
  }

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-6"
      onClick={onClose}
    >
      <div
        className="w-full max-w-sm rounded-lg bg-warm-white p-6 shadow-xl"
        onClick={(e) => e.stopPropagation()}
      >
        <h2 className="font-heading text-xl font-semibold text-charcoal">
          Update profile photo
        </h2>

        <div className="mt-4 flex justify-center">
          {previewUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={previewUrl}
              alt="New avatar preview"
              className="h-32 w-32 rounded-full object-cover"
            />
          ) : (
            <Avatar username={username} avatarUrl={avatarUrl} size="xl" />
          )}
        </div>

        <label className="mt-4 block">
          <input
            type="file"
            accept="image/png,image/jpeg"
            onChange={(e) => {
              const nextFile = e.target.files?.[0] ?? null;
              setFile(nextFile);
              setPreviewUrl(nextFile ? URL.createObjectURL(nextFile) : null);
              setError(null);
            }}
            className="block w-full text-sm text-charcoal"
          />
        </label>
        <p className="mt-1 text-xs text-charcoal/60">
          PNG or JPG, under 2MB. Resized to 400x400px.
        </p>

        {error && <p className="mt-2 text-xs text-terracotta">{error}</p>}

        <div className="mt-6 flex justify-end gap-3">
          <button
            type="button"
            onClick={onClose}
            className="rounded-full border border-charcoal/20 px-5 py-2 text-sm font-medium text-charcoal hover:bg-charcoal/5"
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={handleSave}
            disabled={!file || isPending}
            className="rounded-full bg-terracotta px-5 py-2 text-sm font-medium text-white hover:bg-terracotta/90 disabled:opacity-60"
          >
            {isPending ? "Saving..." : "Save"}
          </button>
        </div>
      </div>
    </div>
  );
}