import React, { useState, useEffect } from 'react';
import { useParams } from "react-router-dom";
import MatrimonyProfile from "../components/profiledetail/MatrimonyProfile"
import PartnerPreferences from "../components/profiledetail/PartnerPreferences"
import MatchingList from "../components/profiledashboard/MatchingList";
import { getProfileDetail } from "../services/profileActionApi";
import { CircularProgress, Box } from "@mui/material";

const ProfileDetailPage = () => {
  const { id } = useParams();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  const fetchDetail = async (showLoading = true) => {
    if (showLoading) setLoading(true);
    try {
      const res = await getProfileDetail(id);
      setData(res);
    } catch (error) {
      console.error("Failed to fetch profile details:", error);
    } finally {
      if (showLoading) setLoading(false);
    }
  };

  useEffect(() => {
    if (id) {
      fetchDetail();
    }
  }, [id]);

  if (loading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
        <CircularProgress color="error" />
      </Box>
    );
  }

  if (!data) {
    return (
      <div className="text-center py-20 text-gray-500 text-xl">
        Profile details not found.
      </div>
    );
  }

  return (
    <>
    <div className="w-[100%] max-w-[1400px] mx-auto my-10">
      <MatrimonyProfile data={data} onRefresh={fetchDetail} />
      <PartnerPreferences data={data} />
      <MatchingList matches={data.all_matches} />
    </div>
    </>
  );
};

export default ProfileDetailPage;