"use client";

import { useEffect, useState, useCallback } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/context/AuthContext";

const API_BASE = "";

export default function ProfilePage() {
  const {user, token, loading, logout} = useAuth();
  const router = useRouter();

  const [pets, setPets] = useState([]);
  const [loadingPets, setLoadingPets] = useState(false);
  const [showForm, setShowForm] = useState(false);
  const [editingPet, setEditingPet] = useState(null);
  const [petName, setPetName] = useState("");
  const [species, setSpecies] = useState("");
  const [breed, setBreed] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [petError, setPetError] = useState(null);

  useEffect(() => {
    if (!loading && !user) {
      router.replace("/login");
    }

  }, [user, loading, router]);

  const loadPets = useCallback(() => {
    if (!token) return;
    setLoadingPets(true);
    fetch(`${API_BASE}/api/v1/my-pets`, {
      headers: { Authorization: `Bearer ${token}` },
    })
      .then((r) => r.json())
      .then(setPets)
      .catch(() => {})
      .finally(() => setLoadingPets(false));
  }, [token]);

  useEffect(() => {
    if (user?.role === "CUSTOMER") {
      loadPets();
    }
  }, [user, loadPets]);

  function handleLogout() {
    logout();
    router.push("/");
  }

  function openAddForm() {
    setEditingPet(null);
    setPetName("");
    setSpecies("");
    setBreed("");
    setPetError(null);
    setShowForm(true);
  }

  function openEditForm(pet) {
    setEditingPet(pet);
    setPetName(pet.petName);
    setSpecies(pet.species);
    setBreed(pet.breed || "");
    setPetError(null);
    setShowForm(true);
  }

  function closeForm() {
    setShowForm(false);
    setEditingPet(null);
    setPetError(null);
  }

  async function handlePetSubmit(e) {
    e.preventDefault();
    setPetError(null);
    setSubmitting(true);

    const url = editingPet
      ? `${API_BASE}/api/v1/my-pets/${editingPet.customerPetId}`
      : `${API_BASE}/api/v1/my-pets`;

    try {
      const res = await fetch(url, {
        method: editingPet ? "PUT" : "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ petName, species, breed: breed || null }),
      });

      if (!res.ok) {
        const data = await res.json().catch(() => null);
        throw new Error(data?.message || `Request failed (${res.status})`);
      }

      closeForm();
      loadPets();
    } 
    
    catch (err) {
      setPetError(err.message);
    } 
    
    finally {
      setSubmitting(false);
    }
  }

  async function handleDeletePet(id) {
    if (!confirm("Remove this pet profile?")) {
      return;
    }

    try {
      await fetch(`${API_BASE}/api/v1/my-pets/${id}`, {
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` },
      });
      loadPets();
    }
    
    catch {
    }
  }

  async function handleImageUpload(petId, file) {
    const formData = new FormData();
    formData.append("image", file);

    try {
      const res = await fetch(`${API_BASE}/api/v1/my-pets/${petId}/image`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` },
        body: formData,
      });

      if (!res.ok) {
        const data = await res.json().catch(() => null);
        alert(data?.message || "Failed to upload image");
        return;
      }

      loadPets();
    } 
    
    catch {
      alert("Failed to upload image");
    }
  }

  if (loading || !user) {
    return <main className="auth-page"><p className="profile-loading">Loading…</p></main>;
  }

  const fields = [
    {label: "Full Name", value: user.fullName},
    {label: "Username", value: user.username},
    {label: "Email", value: user.email},
    {label: "Phone", value: user.phone || "—"},
    {label: "Role", value: user.role},
    ...(user.storeName ? [{ label: "Store", value: user.storeName }] : []),
  ];

  return (
    <main className="profile-page-layout">
      <div className="profile-card">
        <div className="profile-avatar-circle">
          {(user.fullName || user.username).charAt(0).toUpperCase()}
        </div>

        <h1 className="profile-name">{user.fullName || user.username}</h1>
        <span className="profile-role-badge">{user.role}</span>

        <dl className="profile-fields">
          {fields.map(({ label, value }) => (
            <div key={label} className="profile-field-row">
              <dt className="profile-field-label">{label}</dt>
              <dd className="profile-field-value">{value}</dd>
            </div>
          ))}
        </dl>

        <button className="auth-submit-btn profile-logout-btn" onClick={handleLogout}>
          Log Out
        </button>
      </div>

      {user.role === "CUSTOMER" && (
        <div className="profile-pets-section">
          <div className="profile-pets-header">
            <h2 className="profile-pets-title">My Pets</h2>
            <button className="profile-pets-add-btn" onClick={openAddForm}>+ Add Pet</button>
          </div>

          {showForm && (
            <form className="profile-pet-form" onSubmit={handlePetSubmit}>
              <h3 className="profile-pet-form-title">
                {editingPet ? "Edit Pet" : "Add a New Pet"}
              </h3>
              {petError && <div className="appt-error">{petError}</div>}
              <label className="appt-label">
                Name
                <input
                  className="appt-input"
                  type="text"
                  value={petName}
                  onChange={(e) => setPetName(e.target.value)}
                  required
                  maxLength={50}
                />
              </label>
              <label className="appt-label">
                Species
                <input
                  className="appt-input"
                  type="text"
                  value={species}
                  onChange={(e) => setSpecies(e.target.value)}
                  required
                  maxLength={50}
                  placeholder="e.g. Dog, Cat, Bird"
                />
              </label>
              <label className="appt-label">
                Breed (optional)
                <input
                  className="appt-input"
                  type="text"
                  value={breed}
                  onChange={(e) => setBreed(e.target.value)}
                  maxLength={50}
                  placeholder="e.g. Golden Retriever"
                />
              </label>
              <div className="profile-pet-form-actions">
                <button type="submit" className="appt-submit-btn" disabled={submitting}>
                  {submitting ? "Saving..." : editingPet ? "Save Changes" : "Add Pet"}
                </button>
                <button type="button" className="profile-pet-cancel-btn" onClick={closeForm}>
                  Cancel
                </button>
              </div>
            </form>
          )}

          {loadingPets ? (
            <p className="appt-loading">Loading pets...</p>
          ) : pets.length === 0 && !showForm ? (
            <p className="profile-pets-empty">No pet profiles yet. Add your first pet above!</p>
          ) : (
            <div className="profile-pets-grid">
              {pets.map((pet) => (
                <div key={pet.customerPetId} className="profile-pet-card">
                  <div className="profile-pet-card-img-area">
                    {pet.imageUrl ? (
                      <img
                        src={pet.imageUrl}
                        alt={pet.petName}
                        className="profile-pet-card-img"
                      />
                    ) : (
                      <div className="profile-pet-card-placeholder">🐾</div>
                    )}
                    <label className="profile-pet-upload-label">
                      <input
                        type="file"
                        accept="image/jpeg,image/png,image/gif"
                        className="profile-pet-upload-input"
                        onChange={(e) => {
                          if (e.target.files[0]) handleImageUpload(pet.customerPetId, e.target.files[0]);
                          e.target.value = "";
                        }}
                      />
                      📷
                    </label>
                  </div>
                  <div className="profile-pet-card-info">
                    <span className="profile-pet-card-name">{pet.petName}</span>
                    <span className="profile-pet-card-detail">{pet.species}</span>
                    {pet.breed && <span className="profile-pet-card-detail">{pet.breed}</span>}
                  </div>
                  <div className="profile-pet-card-actions">
                    <button className="profile-pet-edit-btn" onClick={() => openEditForm(pet)}>Edit</button>
                    <button className="profile-pet-delete-btn" onClick={() => handleDeletePet(pet.customerPetId)}>Remove</button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </main>
  );
}