"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";

import StepShell from "@/app/components/astrologer/StepShell";
import {
  updateAstrologerProfileImage,
  deleteAstrologerProfileImage,
  getAstrologerProfile,
  friendlyErrorMessage,
} from "@/app/lib/astrologer";

export default function EditProfilePhotoPage() {
  const router = useRouter();

  const fileInputRef = useRef<HTMLInputElement>(null);

  const [existingUrl, setExistingUrl] = useState<string | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
  const [loading, setLoading] = useState(false);
  const [deleting, setDeleting] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem("astrologerToken");

    if (!token) return;

    getAstrologerProfile(token)
      .then((response) => {
        const p = response.data ?? response;
        const url = p?.ProfileImage || p?.profile_image;

        if (url) setExistingUrl(url);
      })
      .catch(() => {});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const picked = e.target.files?.[0];

    e.target.value = "";

    if (!picked) return;

    setFile(picked);
    setPreviewUrl(URL.createObjectURL(picked));
  };

  const handleSave = async () => {
    if (!file) {
      toast.error("Please select a photo");
      return;
    }

    const token = localStorage.getItem("astrologerToken");

    if (!token) {
      router.replace("/astrologer/signin");
      return;
    }

    try {
      setLoading(true);

      const response = await updateAstrologerProfileImage(file, token);

      if (!response.success) {
        toast.error(friendlyErrorMessage(response.message, "Unable to upload. Please try again."));
        return;
      }

      toast.success("Photo saved");

      router.push("/astrologer/profile");
    } catch {
      toast.error("Unable to upload the photo.");
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async () => {
    const token = localStorage.getItem("astrologerToken");

    if (!token) return;

    if (!confirm("Remove your profile photo?")) return;

    try {
      setDeleting(true);

      const response = await deleteAstrologerProfileImage(token);

      if (!response.success) {
        toast.error(friendlyErrorMessage(response.message, "Unable to remove photo."));
        return;
      }

      toast.success("Photo removed");
      setExistingUrl(null);
    } catch {
      toast.error("Unable to remove photo.");
    } finally {
      setDeleting(false);
    }
  };

  const displayUrl = previewUrl || existingUrl;

  return (
    <StepShell step={4} title="Upload image" mode="edit" loading={loading} onSave={handleSave}>
      <div className="astrologer-upload-card">
        <div
          className="rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center"
          style={{
            width: 110,
            height: 110,
            border: "1px solid rgba(255,255,255,.2)",
            overflow: "hidden",
          }}
        >
          {displayUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={displayUrl}
              alt="Profile"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
            />
          ) : (
            <span className="terms-text-color small">no photo</span>
          )}
        </div>

        <p className="terms-text-color small">
          Face centred and clearly lit. Users see this at 72 px, so
          avoid group photos and text overlays.
        </p>

        <button
          type="button"
          className="btn btn-primary w-100"
          onClick={() => fileInputRef.current?.click()}
          disabled={loading}
        >
          {displayUrl ? "Change photo" : "Upload"}
        </button>

        {existingUrl && !file && (
          <button
            type="button"
            className="btn btn-outline-light w-100 mt-2"
            onClick={handleDelete}
            disabled={deleting}
          >
            {deleting ? "Removing..." : "Remove photo"}
          </button>
        )}

        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          style={{ display: "none" }}
          onChange={handleSelect}
        />
      </div>

      <div className="terms-text-color small">
        <div>&bull; Square crop, at least 600 x 600</div>
        <div>&bull; JPG or PNG under 2 MB</div>
        <div>&bull; No watermark or contact details</div>
      </div>
    </StepShell>
  );
}