"use client";

import ComponentCard from "@/src/components/admin/common/ComponentCard";
import { useStateContext } from "@/src/context/admin/StateContext";
import HomeImprovementProgramDetailList from "../home-improvement-program-details";

import DefaultModal from "@/src/app/admin/(pages)/(application-details)/_common/components/modals/StatusModal";
import DocumentLinkModal from "@/src/app/admin/(pages)/(application-details)/_common/components/modals/DocumentLinkModal";
import { useParams } from "next/navigation";
import TabWiseComponent from "../TabWiseComponent";

import { useEffect, useState } from "react";
import { ProgramDetails } from "@/src/types/admin/types";
import { getHIPApplicationDetails } from "@/src/services/admin/services";
import { ErrorMessage, LoadingSpinner } from "../../_common/components";
import ApplicationTimeline from "../home-improvement-program-timeline";
import PageProtection from "@/src/components/admin/common/PageProtection";

export default function HIPDetailPage({
  applicationId 
}:{
  applicationId : string
}) {
  const { refresh, setRefresh } = useStateContext();
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<ProgramDetails | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function loadData() {
      try {
        setLoading(true);
        const response = await getHIPApplicationDetails(Number(applicationId));
        const programData = response.data?.data || response.data;
        setData(programData);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load data');
      } finally {
        setLoading(false);
      }
    }
    if (applicationId) {
      loadData();
    }
  }, [applicationId]);

  if (loading) {
    return <LoadingSpinner message="Loading program details..." />;
  }

  if (error || !data) {
    return <ErrorMessage error={error || 'No data available'} applicationId={applicationId} />;
  }

  return (
   
      <ComponentCard
        className="relative"
        title="Home Improvement Program Details"
        desc="View complete application details"
      >
        <div className="absolute right-0 top-0 flex align-center gap-0">
          <DocumentLinkModal applicationId={Number(applicationId)} />
          <DefaultModal type='Home Improvement Program' applicationId={Number(applicationId)} />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-10 gap-6 items-start">
          <div className="lg:col-span-7 space-y-4">
            <div className="">
              <HomeImprovementProgramDetailList data={data} />
            </div>
            <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
              <TabWiseComponent applicationId={applicationId} />
            </div>
          </div>

          <div className="lg:col-span-3 space-y-4 sticky top-20 h-fit">
            <ApplicationTimeline applicationId={applicationId} />
          </div>
        </div>
      </ComponentCard>
    
  );
}