"use client";
import { Link } from "@/components/navigation";
import React, { useState } from "react";

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

  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">Ubah 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">
            User Profile
          </button>
        </Link>
        <Link href={"/profile/change-profile"}>
          <button className="bg-red-700 text-white px-4 py-2 rounded">
            Ubah Foto
          </button>
        </Link>
        <Link href={"/profile/change-password"}>
          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
            Ubah Password
          </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 ? (
              <img
                src={URL.createObjectURL(selectedImage)}
                alt="Preview"
                className="w-full h-full rounded-full object-cover"
              />
            ) : (
              <span className="text-gray-500">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"
          >
            Ganti Foto
          </label>
          <button
            onClick={handleDelete}
            className="border border-red-700 text-red-700 px-4 py-2 rounded"
          >
            Hapus Foto
          </button>
        </div>
      </div>
    </div>
  );
};

export default ChangeProfile;