"use client";
import { Link } from "@/components/navigation";
import Image from "next/image";
import React, { useState } from "react";
import { useTranslations } from "next-intl";

const ChangeProfile: React.FC = () => {
  const [selectedImage, setSelectedImage] = useState<File | null>(null);
  const t = useTranslations("LandingPage");

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      setSelectedImage(e.target.files[0]);
    }
  };

  const handleSave = () => {
    if (selectedImage) {
      console.log("Foto berhasil diganti:", selectedImage.name);
      alert("Foto berhasil diganti.");
    } else {
      alert("Silakan pilih foto terlebih dahulu.");
    }
  };

  const handleDelete = () => {
    setSelectedImage(null);
    alert("Foto berhasil dihapus.");
  };

  return (
    <div className="px-4 lg:px-14 py-8">
      <div className="text-center mb-8">
        <div className="w-20 h-20 mx-auto rounded-full bg-red-700 flex items-center justify-center">
          <span className="text-white text-3xl font-bold">👤</span>
        </div>
        <h1 className="text-2xl font-bold mt-4">{t("changePhoto", { defaultValue: "Change Photo" })}</h1>
      </div>

      <div className="flex justify-center gap-4 mb-8">
        <Link href={"/profile"}>
          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">{t("userProfile", { defaultValue: "User Profile" })}</button>
        </Link>
        <Link href={"/profile/change-profile"}>
          <button className="bg-red-700 text-white px-4 py-2 rounded">{t("changePhoto", { defaultValue: "Change Photo" })}</button>
        </Link>
        <Link href={"/profile/change-password"}>
          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">{t("changePass", { defaultValue: "Change Pass" })}</button>
        </Link>
      </div>

      <div className="w-80 mx-auto bg-gray-900 text-white shadow-md p-8 rounded">
        <div className="flex justify-center mb-6">
          <div className="w-40 h-40 rounded-full border border-gray-300 flex items-center justify-center">
            {selectedImage ? <Image width={1920} height={1080} src={URL.createObjectURL(selectedImage)} alt="Preview" className="w-full h-full rounded-full object-cover" /> : <span className="text-gray-500">{t("noImage", { defaultValue: "No Image" })}</span>}
          </div>
        </div>

        <div className="flex justify-center gap-4">
          <input type="file" id="upload" accept="image/*" className="hidden" onChange={handleImageChange} />
          <label htmlFor="upload" className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer">
            {t("changePhoto", { defaultValue: "Change Photo" })}
          </label>
          <button onClick={handleDelete} className="border border-red-700 text-red-700 px-4 py-2 rounded">
            {t("deletePhoto", { defaultValue: "Delete Photo" })}{" "}
          </button>
        </div>
      </div>
    </div>
  );
};

export default ChangeProfile;