import React, { useState, useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
import { userAPI, itemAPI, rentalAPI, addressAPI } from "../services/api";
import { User, Item, Rental, Address } from "../types";
import { uploadFile, getPublicImageUrl } from "../services/uploadService";
import AvailabilitySettings from "../components/AvailabilitySettings";
import ReviewItemModal from "../components/ReviewModal";
import ReviewRenterModal from "../components/ReviewRenterModal";
import ReviewDetailsModal from "../components/ReviewDetailsModal";
import {
  geocodingService,
  AddressComponents,
} from "../services/geocodingService";
import AddressAutocomplete from "../components/AddressAutocomplete";
import { PlaceDetails } from "../services/placesService";
import {
  useAddressAutocomplete,
  usStates,
} from "../hooks/useAddressAutocomplete";

const Profile: React.FC = () => {
  const { user, updateUser, logout } = useAuth();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [activeSection, setActiveSection] = useState<string>("overview");
  const [profileData, setProfileData] = useState<User | null>(null);
  const [formData, setFormData] = useState<{
    firstName: string;
    lastName: string;
    email: string;
    phone: string;
    address1: string;
    address2: string;
    city: string;
    state: string;
    zipCode: string;
    country: string;
    imageFilename: string;
    itemRequestNotificationRadius: number | null;
  }>({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    address1: "",
    address2: "",
    city: "",
    state: "",
    zipCode: "",
    country: "",
    imageFilename: "",
    itemRequestNotificationRadius: 10,
  });
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [stats, setStats] = useState({
    itemsListed: 0,
    acceptedRentals: 0,
    totalRentals: 0,
  });
  const [showPersonalInfo, setShowPersonalInfo] = useState(false);
  const [availabilityData, setAvailabilityData] = useState({
    generalAvailableAfter: "09:00",
    generalAvailableBefore: "17:00",
    specifyTimesPerDay: false,
    weeklyTimes: {
      sunday: { availableAfter: "09:00", availableBefore: "17:00" },
      monday: { availableAfter: "09:00", availableBefore: "17:00" },
      tuesday: { availableAfter: "09:00", availableBefore: "17:00" },
      wednesday: { availableAfter: "09:00", availableBefore: "17:00" },
      thursday: { availableAfter: "09:00", availableBefore: "17:00" },
      friday: { availableAfter: "09:00", availableBefore: "17:00" },
      saturday: { availableAfter: "09:00", availableBefore: "17:00" },
    },
  });
  const [userAddresses, setUserAddresses] = useState<Address[]>([]);
  const [addressesLoading, setAddressesLoading] = useState(true);
  const [showAddressForm, setShowAddressForm] = useState(false);
  const [editingAddressId, setEditingAddressId] = useState<string | null>(null);
  const [addressFormData, setAddressFormData] = useState({
    address1: "",
    address2: "",
    city: "",
    state: "",
    zipCode: "",
    country: "US",
    latitude: undefined as number | undefined,
    longitude: undefined as number | undefined,
  });
  const [addressGeocoding, setAddressGeocoding] = useState(false);
  const [addressGeocodeError, setAddressGeocodeError] = useState<string | null>(
    null
  );
  const [addressGeocodeSuccess, setAddressGeocodeSuccess] = useState(false);

  // Rental history state
  const [pastRenterRentals, setPastRenterRentals] = useState<Rental[]>([]);
  const [pastOwnerRentals, setPastOwnerRentals] = useState<Rental[]>([]);
  const [rentalHistoryLoading, setRentalHistoryLoading] = useState(true);
  const [showReviewModal, setShowReviewModal] = useState(false);
  const [showReviewRenterModal, setShowReviewRenterModal] = useState(false);
  const [selectedRental, setSelectedRental] = useState<Rental | null>(null);
  const [selectedRentalForReview, setSelectedRentalForReview] =
    useState<Rental | null>(null);
  const [showReviewDetailsModal, setShowReviewDetailsModal] = useState(false);
  const [selectedRentalForDetails, setSelectedRentalForDetails] =
    useState<Rental | null>(null);
  const [reviewDetailsUserType, setReviewDetailsUserType] = useState<
    "renter" | "owner"
  >("renter");

  useEffect(() => {
    fetchProfile();
    fetchStats();
    fetchUserAddresses();
    fetchUserAvailability();
    fetchRentalHistory();
  }, []);

  const fetchUserAvailability = async () => {
    try {
      const response = await userAPI.getAvailability();
      setAvailabilityData(response.data);
    } catch (error) {
      console.error("Error fetching user availability:", error);
    }
  };

  const fetchUserAddresses = async () => {
    try {
      const response = await addressAPI.getAddresses();
      setUserAddresses(response.data);
    } catch (error) {
      console.error("Error fetching addresses:", error);
    } finally {
      setAddressesLoading(false);
    }
  };

  const fetchProfile = async () => {
    try {
      const response = await userAPI.getProfile();
      setProfileData(response.data);
      setFormData({
        firstName: response.data.firstName || "",
        lastName: response.data.lastName || "",
        email: response.data.email || "",
        phone: response.data.phone || "",
        address1: response.data.address1 || "",
        address2: response.data.address2 || "",
        city: response.data.city || "",
        state: response.data.state || "",
        zipCode: response.data.zipCode || "",
        country: response.data.country || "",
        imageFilename: response.data.imageFilename || "",
        itemRequestNotificationRadius:
          response.data.itemRequestNotificationRadius || 10,
      });
      if (response.data.imageFilename) {
        setImagePreview(getPublicImageUrl(response.data.imageFilename));
      }
    } catch (err: any) {
      setError(err.response?.data?.message || "Failed to fetch profile");
    } finally {
      setLoading(false);
    }
  };

  const fetchStats = async () => {
    try {
      // Fetch user's items
      const itemsResponse = await itemAPI.getItems();
      const allItems = itemsResponse.data.items || itemsResponse.data || [];
      const myItems = allItems.filter(
        (item: Item) => item.ownerId === user?.id
      );

      // Fetch rentals where user is the owner (rentals on user's items)
      const ownerRentalsResponse = await rentalAPI.getListings();
      const ownerRentals: Rental[] = ownerRentalsResponse.data;

      const acceptedRentals = ownerRentals.filter((r) =>
        ["confirmed", "active"].includes(r.status)
      );

      setStats({
        itemsListed: myItems.length,
        acceptedRentals: acceptedRentals.length,
        totalRentals: ownerRentals.length,
      });
    } catch (err) {
      console.error("Failed to fetch stats:", err);
    }
  };

  // Helper functions for rental history
  const formatTime = (timeString?: string) => {
    if (!timeString || timeString.trim() === "") return "";
    try {
      const [hour, minute] = timeString.split(":");
      const hourNum = parseInt(hour);
      const hour12 = hourNum === 0 ? 12 : hourNum > 12 ? hourNum - 12 : hourNum;
      const period = hourNum < 12 ? "AM" : "PM";
      return `${hour12}:${minute} ${period}`;
    } catch (error) {
      return "";
    }
  };

  const formatDateTime = (dateTimeString: string) => {
    const date = new Date(dateTimeString).toLocaleDateString();
    return date;
  };

  const fetchRentalHistory = async () => {
    try {
      // Fetch past rentals as a renter
      const renterResponse = await rentalAPI.getRentals();
      const pastRenterRentals = renterResponse.data.filter((r: Rental) =>
        ["completed", "cancelled", "declined"].includes(r.status)
      );
      setPastRenterRentals(pastRenterRentals);

      // Fetch past rentals as an owner
      const ownerResponse = await rentalAPI.getListings();
      const pastOwnerRentals = ownerResponse.data.filter((r: Rental) =>
        ["completed", "cancelled", "declined"].includes(r.status)
      );
      setPastOwnerRentals(pastOwnerRentals);
    } catch (err) {
      console.error("Failed to fetch rental history:", err);
    } finally {
      setRentalHistoryLoading(false);
    }
  };

  const handleReviewClick = (rental: Rental) => {
    setSelectedRental(rental);
    setShowReviewModal(true);
  };

  const handleReviewSuccess = () => {
    fetchRentalHistory(); // Refresh to show updated review status
    alert("Thank you for your review!");
  };

  const handleCompleteClick = async (rental: Rental) => {
    try {
      await rentalAPI.markAsCompleted(rental.id);
      setSelectedRentalForReview(rental);
      setShowReviewRenterModal(true);
      fetchRentalHistory(); // Refresh rental history
    } catch (err: any) {
      alert(
        "Failed to mark rental as completed: " +
          (err.response?.data?.error || err.message)
      );
    }
  };

  const handleReviewRenterSuccess = () => {
    fetchRentalHistory(); // Refresh to show updated review status
  };

  const handleViewReviewDetails = (
    rental: Rental,
    userType: "renter" | "owner"
  ) => {
    setSelectedRentalForDetails(rental);
    setReviewDetailsUserType(userType);
    setShowReviewDetailsModal(true);
  };

  const handleCloseReviewDetails = () => {
    setShowReviewDetailsModal(false);
    setSelectedRentalForDetails(null);
  };

  const handleChange = (
    e: React.ChangeEvent<
      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
    >
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setImageFile(file);

      // Show preview
      const reader = new FileReader();
      reader.onloadend = () => {
        setImagePreview(reader.result as string);
      };
      reader.readAsDataURL(file);

      // Upload image to S3
      try {
        const { key, publicUrl } = await uploadFile("profile", file);

        // Update the imageFilename in formData with the S3 key
        setFormData((prev) => ({
          ...prev,
          imageFilename: key,
        }));

        // Update preview to use the S3 URL
        setImagePreview(publicUrl);
      } catch (err: any) {
        console.error("Image upload error:", err);
        setError(err.message || "Failed to upload image");
        // Reset on error
        setImageFile(null);
        setImagePreview(
          profileData?.imageFilename
            ? getPublicImageUrl(profileData.imageFilename)
            : null
        );
      }
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setSuccess(null);

    try {
      // Don't send imageFilename in the update data as it's handled separately
      const { imageFilename, ...updateData } = formData;

      const response = await userAPI.updateProfile(updateData);
      setProfileData(response.data);
      updateUser(response.data); // Update the auth context
      setEditing(false);
    } catch (err: any) {
      console.error("Profile update error:", err.response?.data);
      const errorMessage =
        err.response?.data?.error ||
        err.response?.data?.message ||
        "Failed to update profile";
      const errorDetails = err.response?.data?.details;

      if (errorDetails && Array.isArray(errorDetails)) {
        const detailMessages = errorDetails
          .map((d: any) => `${d.field}: ${d.message}`)
          .join(", ");
        setError(`${errorMessage} - ${detailMessages}`);
      } else {
        setError(errorMessage);
      }
    }
  };

  const handleCancel = () => {
    setEditing(false);
    setError(null);
    setSuccess(null);
    // Reset form to original data
    if (profileData) {
      setFormData({
        firstName: profileData.firstName || "",
        lastName: profileData.lastName || "",
        email: profileData.email || "",
        phone: profileData.phone || "",
        address1: profileData.address1 || "",
        address2: profileData.address2 || "",
        city: profileData.city || "",
        state: profileData.state || "",
        zipCode: profileData.zipCode || "",
        country: profileData.country || "",
        imageFilename: profileData.imageFilename || "",
        itemRequestNotificationRadius:
          profileData.itemRequestNotificationRadius || 10,
      });
      setImagePreview(
        profileData.imageFilename ? getPublicImageUrl(profileData.imageFilename) : null
      );
    }
  };

  const handleAvailabilityChange = (field: string, value: string | boolean) => {
    setAvailabilityData((prev) => ({ ...prev, [field]: value }));
  };

  const handleWeeklyTimeChange = (
    day: string,
    field: "availableAfter" | "availableBefore",
    value: string
  ) => {
    setAvailabilityData((prev) => ({
      ...prev,
      weeklyTimes: {
        ...prev.weeklyTimes,
        [day]: {
          ...prev.weeklyTimes[day as keyof typeof prev.weeklyTimes],
          [field]: value,
        },
      },
    }));
  };

  const handleSaveAvailability = async () => {
    try {
      await userAPI.updateAvailability(availabilityData);
      setSuccess("Availability settings saved successfully");
      setTimeout(() => setSuccess(null), 3000);
    } catch (error) {
      console.error("Error saving availability:", error);
      setError("Failed to save availability settings");
    }
  };

  const handleSaveNotificationPreferences = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setSuccess(null);

    try {
      const response = await userAPI.updateProfile({
        itemRequestNotificationRadius: formData.itemRequestNotificationRadius,
      });
      setProfileData(response.data);
      updateUser(response.data);
      setSuccess("Notification preferences saved successfully");
      setTimeout(() => setSuccess(null), 3000);
    } catch (err: any) {
      console.error(
        "Notification preferences update error:",
        err.response?.data
      );
      const errorMessage =
        err.response?.data?.error ||
        err.response?.data?.message ||
        "Failed to update notification preferences";
      setError(errorMessage);
    }
  };

  const handleNotificationRadiusChange = async (
    e: React.ChangeEvent<HTMLSelectElement>
  ) => {
    const { value } = e.target;
    setFormData((prev) => ({
      ...prev,
      itemRequestNotificationRadius: parseInt(value),
    }));
    setError(null);

    try {
      const response = await userAPI.updateProfile({
        itemRequestNotificationRadius: parseInt(value),
      });
      setProfileData(response.data);
      updateUser(response.data);
    } catch (err: any) {
      console.error(
        "Notification preferences update error:",
        err.response?.data
      );
      const errorMessage =
        err.response?.data?.error ||
        err.response?.data?.message ||
        "Failed to update notification radius";
      setError(errorMessage);
    }
  };

  const formatAddressDisplay = (address: Address) => {
    return `${address.address1}, ${address.city}, ${address.state} ${address.zipCode}`;
  };

  const handleDeleteAddress = async (addressId: string) => {
    try {
      await addressAPI.deleteAddress(addressId);
      setUserAddresses((prev) => prev.filter((addr) => addr.id !== addressId));
    } catch (error) {
      console.error("Error deleting address:", error);
      setError("Failed to delete address");
    }
  };

  const handleAddAddress = () => {
    setAddressFormData({
      address1: "",
      address2: "",
      city: "",
      state: "",
      zipCode: "",
      country: "US",
      latitude: undefined,
      longitude: undefined,
    });
    setEditingAddressId(null);
    setShowAddressForm(true);
  };

  const handleEditAddress = (address: Address) => {
    setAddressFormData({
      address1: address.address1,
      address2: address.address2 || "",
      city: address.city,
      state: address.state,
      zipCode: address.zipCode,
      country: address.country,
      latitude: address.latitude,
      longitude: address.longitude,
    });
    setEditingAddressId(address.id);
    setShowAddressForm(true);
  };

  const handleAddressFormChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    const { name, value } = e.target;
    setAddressFormData((prev) => ({ ...prev, [name]: value }));
  };

  // Geocoding function for address form
  const geocodeAddressForm = useCallback(
    async (addressData: typeof addressFormData) => {
      if (
        !geocodingService.isAddressComplete(addressData as AddressComponents)
      ) {
        return null;
      }

      setAddressGeocoding(true);
      setAddressGeocodeError(null);
      setAddressGeocodeSuccess(false);

      try {
        const result = await geocodingService.geocodeAddress(
          addressData as AddressComponents
        );

        if ("error" in result) {
          setAddressGeocodeError(result.details || result.error);
          return null;
        } else {
          setAddressGeocodeSuccess(true);
          setAddressFormData((prev) => ({
            ...prev,
            latitude: result.latitude,
            longitude: result.longitude,
          }));
          // Clear success message after 3 seconds
          setTimeout(() => setAddressGeocodeSuccess(false), 3000);
          return { latitude: result.latitude, longitude: result.longitude };
        }
      } catch (error) {
        setAddressGeocodeError("Failed to geocode address");
        return null;
      } finally {
        setAddressGeocoding(false);
      }
    },
    []
  );

  const handleSaveAddress = async (e?: React.FormEvent | React.MouseEvent) => {
    e?.preventDefault();

    // Try to geocode the address before saving
    let coordinates = null;
    try {
      coordinates = await geocodeAddressForm(addressFormData);
    } catch (error) {
      // Geocoding failed, but we'll continue with saving
      console.warn(
        "Geocoding failed, saving address without coordinates:",
        error
      );
    }

    // Prepare the data to save, including coordinates if geocoding succeeded
    const dataToSave = {
      ...addressFormData,
      ...(coordinates && {
        latitude: coordinates.latitude,
        longitude: coordinates.longitude,
      }),
    };

    try {
      if (editingAddressId) {
        // Update existing address
        const response = await addressAPI.updateAddress(
          editingAddressId,
          dataToSave
        );
        setUserAddresses((prev) =>
          prev.map((addr) =>
            addr.id === editingAddressId ? response.data : addr
          )
        );
      } else {
        // Create new address
        const response = await addressAPI.createAddress({
          ...dataToSave,
          isPrimary: userAddresses.length === 0,
        });
        setUserAddresses((prev) => [...prev, response.data]);
      }
      setShowAddressForm(false);
      setEditingAddressId(null);
    } catch (error) {
      console.error("Error saving address:", error);
      setError("Failed to save address");
    }
  };

  const handleCancelAddressForm = () => {
    setShowAddressForm(false);
    setEditingAddressId(null);
    setAddressFormData({
      address1: "",
      address2: "",
      city: "",
      state: "",
      zipCode: "",
      country: "US",
      latitude: undefined,
      longitude: undefined,
    });
    setAddressGeocoding(false);
    setAddressGeocodeError(null);
    setAddressGeocodeSuccess(false);
  };

  // Use address autocomplete hook
  const { parsePlace } = useAddressAutocomplete();

  // Handle place selection from autocomplete
  const handlePlaceSelect = useCallback(
    (place: PlaceDetails) => {
      const parsedAddress = parsePlace(place);
      if (parsedAddress) {
        setAddressFormData((prev) => ({
          ...prev,
          ...parsedAddress,
        }));
        setAddressGeocodeSuccess(true);
        setTimeout(() => setAddressGeocodeSuccess(false), 3000);
      }
    },
    [parsePlace]
  );

  if (loading) {
    return (
      <div className="container mt-5">
        <div className="text-center">
          <div className="spinner-border" role="status">
            <span className="visually-hidden">Loading...</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="container mt-4 mb-5">
      <h1 className="mb-4">Profile</h1>

      {error && (
        <div className="alert alert-danger" role="alert">
          {error}
        </div>
      )}

      {success && (
        <div className="alert alert-success" role="alert">
          {success}
        </div>
      )}

      <div className="row">
        {/* Left Sidebar Menu */}
        <div className="col-md-3">
          <div className="card">
            <div className="list-group list-group-flush">
              <button
                className={`list-group-item list-group-item-action ${
                  activeSection === "overview" ? "active" : ""
                }`}
                onClick={() => setActiveSection("overview")}
              >
                <i className="bi bi-person-circle me-2"></i>
                Overview
              </button>
              <button
                className={`list-group-item list-group-item-action ${
                  activeSection === "owner-settings" ? "active" : ""
                }`}
                onClick={() => setActiveSection("owner-settings")}
              >
                <i className="bi bi-gear me-2"></i>
                Owner Settings
              </button>
              <button
                className={`list-group-item list-group-item-action ${
                  activeSection === "notification-preferences" ? "active" : ""
                }`}
                onClick={() => setActiveSection("notification-preferences")}
              >
                <i className="bi bi-bell me-2"></i>
                Notification Preferences
              </button>
              <button
                className={`list-group-item list-group-item-action ${
                  activeSection === "rental-history" ? "active" : ""
                }`}
                onClick={() => setActiveSection("rental-history")}
              >
                <i className="bi bi-clock-history me-2"></i>
                Rental History
              </button>
              <button
                className="list-group-item list-group-item-action text-danger"
                onClick={logout}
              >
                <i className="bi bi-box-arrow-right me-2"></i>
                Log Out
              </button>
            </div>
          </div>
        </div>

        {/* Right Content Area */}
        <div className="col-md-9">
          {/* Overview Section */}
          {activeSection === "overview" && (
            <div>
              <h4 className="mb-4">Overview</h4>

              {/* Profile Card */}
              <div className="card mb-4">
                <div className="card-body">
                  <div className="text-center">
                    <div className="position-relative d-inline-block mb-3">
                      {imagePreview ? (
                        <img
                          src={imagePreview}
                          alt="Profile"
                          className="rounded-circle"
                          style={{
                            width: "120px",
                            height: "120px",
                            objectFit: "cover",
                          }}
                        />
                      ) : (
                        <div
                          className="rounded-circle bg-secondary d-flex align-items-center justify-content-center"
                          style={{ width: "120px", height: "120px" }}
                        >
                          <i
                            className="bi bi-person-fill text-white"
                            style={{ fontSize: "2.5rem" }}
                          ></i>
                        </div>
                      )}
                      {editing && (
                        <label
                          htmlFor="imageFilenameOverview"
                          className="position-absolute bottom-0 end-0 btn btn-sm btn-primary rounded-circle"
                          style={{
                            width: "35px",
                            height: "35px",
                            padding: "0",
                          }}
                        >
                          <i className="bi bi-camera-fill"></i>
                          <input
                            type="file"
                            id="imageFilenameOverview"
                            accept="image/*"
                            onChange={handleImageChange}
                            className="d-none"
                          />
                        </label>
                      )}
                    </div>

                    <div>
                      <h5>
                        {profileData?.firstName} {profileData?.lastName}
                      </h5>
                      <p className="text-muted">@{profileData?.username}</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Personal Information Card */}
              <div className="card mb-4">
                <div className="card-body">
                  <div className="d-flex align-items-center justify-content-between mb-3">
                    <div className="d-flex align-items-center">
                      <h5 className="card-title mb-0">Personal Information</h5>
                      <button
                        type="button"
                        className="btn btn-link text-primary p-0 ms-2"
                        onClick={() => setShowPersonalInfo(!showPersonalInfo)}
                        style={{ textDecoration: "none" }}
                      >
                        <i
                          className={`bi ${
                            showPersonalInfo ? "bi-eye" : "bi-eye-slash"
                          } fs-5`}
                        ></i>
                      </button>
                    </div>
                    {showPersonalInfo && (
                      <div>
                        {editing ? (
                          <div className="d-flex gap-2">
                            <button
                              type="button"
                              className="btn btn-primary btn-sm"
                              onClick={handleSubmit}
                            >
                              Save Changes
                            </button>
                            <button
                              type="button"
                              className="btn btn-secondary btn-sm"
                              onClick={handleCancel}
                            >
                              Cancel
                            </button>
                          </div>
                        ) : (
                          <button
                            type="button"
                            className="btn btn-primary btn-sm"
                            onClick={() => setEditing(true)}
                          >
                            Edit Information
                          </button>
                        )}
                      </div>
                    )}
                  </div>
                  {showPersonalInfo && (
                    <form onSubmit={handleSubmit}>
                      <div className="row mb-3">
                        <div className="col-md-6">
                          <label htmlFor="firstName" className="form-label">
                            First Name
                          </label>
                          <input
                            type="text"
                            className="form-control"
                            id="firstName"
                            name="firstName"
                            value={formData.firstName}
                            onChange={handleChange}
                            disabled={!editing}
                            required
                          />
                        </div>
                        <div className="col-md-6">
                          <label htmlFor="lastName" className="form-label">
                            Last Name
                          </label>
                          <input
                            type="text"
                            className="form-control"
                            id="lastName"
                            name="lastName"
                            value={formData.lastName}
                            onChange={handleChange}
                            disabled={!editing}
                            required
                          />
                        </div>
                      </div>

                      <div className="mb-3">
                        <label htmlFor="email" className="form-label">
                          Email
                        </label>
                        <input
                          type="email"
                          className="form-control"
                          id="email"
                          name="email"
                          value={formData.email}
                          onChange={handleChange}
                          disabled={!editing}
                        />
                      </div>

                      <div className="mb-3">
                        <label htmlFor="phone" className="form-label">
                          Phone Number
                        </label>
                        <input
                          type="tel"
                          className="form-control"
                          id="phone"
                          name="phone"
                          value={formData.phone}
                          onChange={handleChange}
                          placeholder="(123) 456-7890"
                          disabled={!editing}
                        />
                      </div>

                      <hr className="my-4" />

                      {/* Saved Addresses Section */}
                      <div className="mb-3">
                        <label className="form-label">Saved Addresses</label>

                        {addressesLoading ? (
                          <div className="text-center py-3">
                            <div
                              className="spinner-border spinner-border-sm"
                              role="status"
                            >
                              <span className="visually-hidden">
                                Loading addresses...
                              </span>
                            </div>
                          </div>
                        ) : (
                          <>
                            {userAddresses.length === 0 && !showAddressForm ? (
                              <div className="text-center py-3">
                                <p className="text-muted mb-2">
                                  No saved addresses yet
                                </p>
                                <small className="text-muted">
                                  Add an address or create your first listing to
                                  save one automatically
                                </small>
                              </div>
                            ) : (
                              <>
                                {userAddresses.length > 0 &&
                                  !showAddressForm && (
                                    <>
                                      <div className="list-group list-group-flush mb-3">
                                        {userAddresses.map((address) => (
                                          <div
                                            key={address.id}
                                            className="list-group-item d-flex justify-content-between align-items-start"
                                          >
                                            <div className="flex-grow-1">
                                              <div className="fw-medium">
                                                {formatAddressDisplay(address)}
                                              </div>
                                              {address.address2 && (
                                                <small className="text-muted">
                                                  {address.address2}
                                                </small>
                                              )}
                                            </div>
                                            <div className="btn-group">
                                              <button
                                                className="btn btn-outline-secondary btn-sm"
                                                onClick={() =>
                                                  handleEditAddress(address)
                                                }
                                              >
                                                <i className="bi bi-pencil"></i>
                                              </button>
                                              <button
                                                className="btn btn-outline-danger btn-sm"
                                                onClick={() =>
                                                  handleDeleteAddress(
                                                    address.id
                                                  )
                                                }
                                              >
                                                <i className="bi bi-trash"></i>
                                              </button>
                                            </div>
                                          </div>
                                        ))}
                                      </div>
                                      <button
                                        className="btn btn-outline-primary"
                                        onClick={handleAddAddress}
                                      >
                                        Add New Address
                                      </button>
                                    </>
                                  )}
                              </>
                            )}

                            {/* Show Add New Address button even when no addresses exist */}
                            {userAddresses.length === 0 && !showAddressForm && (
                              <div className="text-center">
                                <button
                                  className="btn btn-outline-primary"
                                  onClick={handleAddAddress}
                                >
                                  Add New Address
                                </button>
                              </div>
                            )}

                            {/* Address Form */}
                            {showAddressForm && (
                              <div>
                                <div className="row mb-3">
                                  <div className="col-md-6">
                                    <label
                                      htmlFor="addressFormAddress1"
                                      className="form-label"
                                    >
                                      Address Line 1 *
                                    </label>
                                    <AddressAutocomplete
                                      id="addressFormAddress1"
                                      name="address1"
                                      value={addressFormData.address1}
                                      onChange={(value) => {
                                        const syntheticEvent = {
                                          target: {
                                            name: "address1",
                                            value,
                                            type: "text",
                                          },
                                        } as React.ChangeEvent<HTMLInputElement>;
                                        handleAddressFormChange(syntheticEvent);
                                      }}
                                      onPlaceSelect={handlePlaceSelect}
                                      placeholder="Start typing an address..."
                                      className="form-control"
                                      required
                                      countryRestriction="us"
                                      types={["address"]}
                                    />
                                  </div>
                                  <div className="col-md-6">
                                    <label
                                      htmlFor="addressFormAddress2"
                                      className="form-label"
                                    >
                                      Address Line 2
                                    </label>
                                    <input
                                      type="text"
                                      className="form-control"
                                      id="addressFormAddress2"
                                      name="address2"
                                      value={addressFormData.address2}
                                      onChange={handleAddressFormChange}
                                      placeholder="Apt, Suite, Unit, etc."
                                    />
                                  </div>
                                </div>

                                <div className="row mb-3">
                                  <div className="col-md-6">
                                    <label
                                      htmlFor="addressFormCity"
                                      className="form-label"
                                    >
                                      City *
                                    </label>
                                    <input
                                      type="text"
                                      className="form-control"
                                      id="addressFormCity"
                                      name="city"
                                      value={addressFormData.city}
                                      onChange={handleAddressFormChange}
                                      required
                                    />
                                  </div>
                                  <div className="col-md-3">
                                    <label
                                      htmlFor="addressFormState"
                                      className="form-label"
                                    >
                                      State *
                                    </label>
                                    <select
                                      className="form-select"
                                      id="addressFormState"
                                      name="state"
                                      value={addressFormData.state}
                                      onChange={handleAddressFormChange}
                                      required
                                    >
                                      <option value="">Select State</option>
                                      {usStates.map((state) => (
                                        <option key={state} value={state}>
                                          {state}
                                        </option>
                                      ))}
                                    </select>
                                  </div>
                                  <div className="col-md-3">
                                    <label
                                      htmlFor="addressFormZipCode"
                                      className="form-label"
                                    >
                                      ZIP Code *
                                    </label>
                                    <input
                                      type="text"
                                      className="form-control"
                                      id="addressFormZipCode"
                                      name="zipCode"
                                      value={addressFormData.zipCode}
                                      onChange={handleAddressFormChange}
                                      onKeyDown={(e) => {
                                        if (e.key === "Enter") {
                                          handleSaveAddress(e);
                                        }
                                      }}
                                      placeholder="12345"
                                      required
                                    />
                                  </div>
                                </div>

                                <div className="d-flex gap-2">
                                  <button
                                    type="button"
                                    className="btn btn-primary"
                                    onClick={handleSaveAddress}
                                  >
                                    {editingAddressId
                                      ? "Update Address"
                                      : "Save Address"}
                                  </button>
                                  <button
                                    type="button"
                                    className="btn btn-secondary"
                                    onClick={handleCancelAddressForm}
                                  >
                                    Cancel
                                  </button>
                                </div>
                              </div>
                            )}
                          </>
                        )}
                      </div>
                    </form>
                  )}
                </div>
              </div>

              {/* Stats Card */}
              <div className="card">
                <div className="card-body">
                  <h5 className="card-title">Account Statistics</h5>
                  <div className="row text-center">
                    <div className="col-md-4">
                      <div className="p-3">
                        <h4 className="text-primary mb-1">
                          {stats.itemsListed}
                        </h4>
                        <h6 className="text-muted">Items Listed</h6>
                      </div>
                    </div>
                    <div className="col-md-4">
                      <div className="p-3">
                        <h4 className="text-success mb-1">
                          {stats.acceptedRentals}
                        </h4>
                        <h6 className="text-muted">Active Rentals</h6>
                      </div>
                    </div>
                    <div className="col-md-4">
                      <div className="p-3">
                        <h4 className="text-info mb-1">{stats.totalRentals}</h4>
                        <h6 className="text-muted">Total Rentals</h6>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* Rental History Section */}
          {activeSection === "rental-history" && (
            <div>
              <h4 className="mb-4">Rental History</h4>

              {rentalHistoryLoading ? (
                <div className="text-center py-5">
                  <div className="spinner-border" role="status">
                    <span className="visually-hidden">Loading...</span>
                  </div>
                </div>
              ) : (
                <>
                  {/* As Renter Section */}
                  {pastRenterRentals.length > 0 && (
                    <div className="mb-5">
                      <h5 className="mb-3">
                        <i className="bi bi-person me-2"></i>
                        As Renter ({pastRenterRentals.length})
                      </h5>
                      <div className="row">
                        {pastRenterRentals.map((rental) => (
                          <div
                            key={rental.id}
                            className="col-md-6 col-lg-4 mb-4"
                          >
                            <div className="card h-100">
                              {rental.item?.imageFilenames && rental.item.imageFilenames[0] && (
                                <img
                                  src={getPublicImageUrl(rental.item.imageFilenames[0])}
                                  className="card-img-top"
                                  alt={rental.item.name}
                                  style={{
                                    height: "150px",
                                    objectFit: "cover",
                                  }}
                                />
                              )}
                              <div className="card-body">
                                <h6 className="card-title">
                                  {rental.item
                                    ? rental.item.name
                                    : "Item Unavailable"}
                                </h6>

                                <div className="mb-2">
                                  <span
                                    className={`badge ${
                                      rental.status === "completed"
                                        ? "bg-success"
                                        : rental.status === "declined"
                                        ? "bg-secondary"
                                        : "bg-danger"
                                    }`}
                                  >
                                    {rental.status.charAt(0).toUpperCase() +
                                      rental.status.slice(1)}
                                  </span>
                                </div>

                                <p className="mb-1 small">
                                  <strong>Period:</strong>
                                  <br />
                                  <strong>Start:</strong>{" "}
                                  {formatDateTime(rental.startDateTime)}
                                  <br />
                                  <strong>End:</strong>{" "}
                                  {formatDateTime(rental.endDateTime)}
                                </p>

                                <p className="mb-1 small">
                                  <strong>Total:</strong> ${rental.totalAmount}
                                </p>

                                {rental.owner && (
                                  <p className="mb-1 small">
                                    <strong>Owner:</strong>{" "}
                                    <span
                                      onClick={() =>
                                        navigate(`/users/${rental.ownerId}`)
                                      }
                                      style={{ cursor: "pointer" }}
                                    >
                                      {rental.owner.firstName}{" "}
                                      {rental.owner.lastName}
                                    </span>
                                  </p>
                                )}

                                {rental.status === "declined" &&
                                  rental.declineReason && (
                                    <div className="alert alert-warning mt-2 mb-1 p-2 small">
                                      <strong>Decline reason:</strong>{" "}
                                      {rental.declineReason}
                                    </div>
                                  )}

                                <div className="d-flex gap-2 mt-3">
                                  {rental.status === "completed" &&
                                    !rental.itemRating &&
                                    !rental.itemReviewSubmittedAt && (
                                      <button
                                        className="btn btn-sm btn-primary"
                                        onClick={() =>
                                          handleReviewClick(rental)
                                        }
                                      >
                                        Review
                                      </button>
                                    )}
                                  {rental.itemReviewSubmittedAt &&
                                    !rental.itemReviewVisible && (
                                      <div className="text-info small">
                                        <i className="bi bi-clock me-1"></i>
                                        Review Submitted
                                      </div>
                                    )}
                                  {((rental.renterPrivateMessage &&
                                    rental.renterReviewVisible) ||
                                    (rental.itemReviewVisible &&
                                      rental.itemRating)) && (
                                    <button
                                      className="btn btn-sm btn-outline-primary mt-2"
                                      onClick={() =>
                                        handleViewReviewDetails(
                                          rental,
                                          "renter"
                                        )
                                      }
                                    >
                                      View Review Details
                                    </button>
                                  )}
                                  {rental.status === "completed" &&
                                    rental.rating &&
                                    !rental.itemRating && (
                                      <div className="text-success small">
                                        <i className="bi bi-check-circle-fill me-1"></i>
                                        Reviewed ({rental.rating}/5)
                                      </div>
                                    )}
                                </div>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* As Owner Section */}
                  {pastOwnerRentals.length > 0 && (
                    <div className="mb-5">
                      <h5 className="mb-3">
                        <i className="bi bi-house me-2"></i>
                        As Owner ({pastOwnerRentals.length})
                      </h5>
                      <div className="row">
                        {pastOwnerRentals.map((rental) => (
                          <div
                            key={rental.id}
                            className="col-md-6 col-lg-4 mb-4"
                          >
                            <div className="card h-100">
                              {rental.item?.imageFilenames && rental.item.imageFilenames[0] && (
                                <img
                                  src={getPublicImageUrl(rental.item.imageFilenames[0])}
                                  className="card-img-top"
                                  alt={rental.item.name}
                                  style={{
                                    height: "150px",
                                    objectFit: "cover",
                                  }}
                                />
                              )}
                              <div className="card-body">
                                <h6 className="card-title">
                                  {rental.item
                                    ? rental.item.name
                                    : "Item Unavailable"}
                                </h6>

                                {rental.renter && (
                                  <p className="mb-1 small">
                                    <strong>Renter:</strong>{" "}
                                    <span
                                      onClick={() =>
                                        navigate(`/users/${rental.renterId}`)
                                      }
                                      style={{ cursor: "pointer" }}
                                    >
                                      {rental.renter.firstName}{" "}
                                      {rental.renter.lastName}
                                    </span>
                                  </p>
                                )}

                                <div className="mb-2">
                                  <span
                                    className={`badge ${
                                      rental.status === "completed"
                                        ? "bg-success"
                                        : rental.status === "declined"
                                        ? "bg-secondary"
                                        : "bg-danger"
                                    }`}
                                  >
                                    {rental.status.charAt(0).toUpperCase() +
                                      rental.status.slice(1)}
                                  </span>
                                </div>

                                <p className="mb-1 small">
                                  <strong>Period:</strong>
                                  <br />
                                  {formatDateTime(rental.startDateTime)} -{" "}
                                  {formatDateTime(rental.endDateTime)}
                                </p>

                                <p className="mb-1 small">
                                  <strong>Total:</strong> ${rental.totalAmount}
                                </p>

                                <div className="d-flex gap-2 mt-3">
                                  {rental.status === "completed" &&
                                    !rental.renterRating &&
                                    !rental.renterReviewSubmittedAt && (
                                      <button
                                        className="btn btn-sm btn-primary"
                                        onClick={() => {
                                          setSelectedRentalForReview(rental);
                                          setShowReviewRenterModal(true);
                                        }}
                                      >
                                        Review Renter
                                      </button>
                                    )}
                                  {rental.renterReviewSubmittedAt &&
                                    !rental.renterReviewVisible && (
                                      <div className="text-info small">
                                        <i className="bi bi-clock me-1"></i>
                                        Review Submitted
                                      </div>
                                    )}
                                  {((rental.itemPrivateMessage &&
                                    rental.itemReviewVisible) ||
                                    (rental.renterReviewVisible &&
                                      rental.renterRating)) && (
                                    <button
                                      className="btn btn-sm btn-outline-primary mt-2"
                                      onClick={() =>
                                        handleViewReviewDetails(rental, "owner")
                                      }
                                    >
                                      View Review Details
                                    </button>
                                  )}
                                </div>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Empty State */}
                  {pastRenterRentals.length === 0 &&
                    pastOwnerRentals.length === 0 && (
                      <div className="text-center py-5">
                        <i
                          className="bi bi-clock-history text-muted mb-3"
                          style={{ fontSize: "3rem" }}
                        ></i>
                        <h5 className="text-muted">No Rental History</h5>
                        <p className="text-muted">
                          Your completed rentals and rental requests will appear
                          here.
                        </p>
                      </div>
                    )}
                </>
              )}
            </div>
          )}

          {/* Owner Settings Section */}
          {activeSection === "owner-settings" && (
            <div>
              <h4 className="mb-4">Owner Settings</h4>

              {/* Availability Card */}
              <div className="card">
                <div className="card-body">
                  <h5 className="card-title">Availability</h5>
                  <AvailabilitySettings
                    data={availabilityData}
                    onChange={handleAvailabilityChange}
                    onWeeklyTimeChange={handleWeeklyTimeChange}
                  />
                  <button
                    className="btn btn-outline-success mt-3"
                    onClick={handleSaveAvailability}
                  >
                    Save Availability
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* Notification Preferences Section */}
          {activeSection === "notification-preferences" && (
            <div>
              <h4 className="mb-4">Notification Preferences</h4>

              <div className="card">
                <div className="card-body">
                  <div className="mb-3">
                    <div className="form-check">
                      <input
                        className="form-check-input"
                        type="checkbox"
                        id="enableItemRequestNotifications"
                        checked={
                          formData.itemRequestNotificationRadius !== null &&
                          formData.itemRequestNotificationRadius !== undefined
                        }
                        onChange={async (e) => {
                          const isEnabled = e.target.checked;
                          const newRadius = isEnabled ? 10 : null; // Default to 10 miles when enabled
                          setFormData((prev) => ({
                            ...prev,
                            itemRequestNotificationRadius: newRadius,
                          }));
                          setError(null);

                          try {
                            const response = await userAPI.updateProfile({
                              itemRequestNotificationRadius: newRadius,
                            });
                            setProfileData(response.data);
                            updateUser(response.data);
                          } catch (err: any) {
                            console.error(
                              "Notification preferences update error:",
                              err.response?.data
                            );
                            const errorMessage =
                              err.response?.data?.error ||
                              err.response?.data?.message ||
                              "Failed to update notification preferences";
                            setError(errorMessage);
                          }
                        }}
                      />
                      <label
                        className="form-check-label"
                        htmlFor="enableItemRequestNotifications"
                      >
                        Enable Item Request Notifications
                      </label>
                    </div>
                    <div className="form-text mb-3">
                      Receive notifications when someone nearby posts an item
                      request
                    </div>
                  </div>

                  {formData.itemRequestNotificationRadius !== null &&
                    formData.itemRequestNotificationRadius !== undefined && (
                      <div className="mb-3">
                        <label
                          htmlFor="itemRequestNotificationRadius"
                          className="form-label"
                        >
                          Notification Radius
                        </label>
                        <select
                          className="form-select"
                          id="itemRequestNotificationRadius"
                          name="itemRequestNotificationRadius"
                          value={formData.itemRequestNotificationRadius}
                          onChange={handleNotificationRadiusChange}
                        >
                          <option value="5">5 miles</option>
                          <option value="10">10 miles</option>
                          <option value="25">25 miles</option>
                          <option value="50">50 miles</option>
                          <option value="100">100 miles</option>
                        </select>
                        <div className="form-text">
                          You'll receive notifications for item requests within
                          this distance from your primary address
                        </div>
                      </div>
                    )}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Review Modals */}
      {selectedRental && (
        <ReviewItemModal
          show={showReviewModal}
          onClose={() => {
            setShowReviewModal(false);
            setSelectedRental(null);
          }}
          rental={selectedRental}
          onSuccess={handleReviewSuccess}
        />
      )}

      {selectedRentalForReview && (
        <ReviewRenterModal
          show={showReviewRenterModal}
          onClose={() => {
            setShowReviewRenterModal(false);
            setSelectedRentalForReview(null);
          }}
          rental={selectedRentalForReview}
          onSuccess={handleReviewRenterSuccess}
        />
      )}

      {/* Review Details Modal */}
      {selectedRentalForDetails && (
        <ReviewDetailsModal
          show={showReviewDetailsModal}
          onClose={handleCloseReviewDetails}
          rental={selectedRentalForDetails}
          userType={reviewDetailsUserType}
        />
      )}
    </div>
  );
};

export default Profile;