"use client";

import { useState, useEffect } from "react";
import ComponentCard from "@/src/components/admin/common/ComponentCard";
import { ApplicantInfoCard, TimelineList, TimelineItemData } from "../_common/timeline-components";
import { getHIPApplicationTimeline } from "@/src/services/admin/services";

interface TimelineData {
  applicantName: string;
  applicationNo: string;
  submittedDate: string;
  timeline: TimelineItemData[];
}

interface HomeImprovementProgramTimelineProps {
  applicationId: string;
}

export default function HomeImprovementProgramTimeline({
  applicationId
}: HomeImprovementProgramTimelineProps) {
  const [data, setData] = useState<TimelineData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function loadTimeline() {
      try {
        setLoading(true);
        const response = await getHIPApplicationTimeline(Number(applicationId));
        const timelineData = response.data?.data || response.data;
        setData(timelineData);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load timeline');
      } finally {
        setLoading(false);
      }
    }

    if (applicationId) {
      loadTimeline();
    }
  }, [applicationId]);


  if (loading) {
    return (
      <div className="space-y-4">
        <div className="bg-white rounded-xl border border-gray-200 p-3.5 animate-pulse">
          <div className="h-6 bg-gray-200 rounded w-1/3 mb-3"></div>
          <div className="space-y-2">
            <div className="h-4 bg-gray-200 rounded w-2/3"></div>
            <div className="h-4 bg-gray-200 rounded w-1/2"></div>
            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
          </div>
        </div>
        <ComponentCard size="sm" className="border border-gray-200 rounded-xl pb-10" title="Application Activity" desc="Loading...">
          <div className="space-y-4 mt-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="flex items-start gap-4 animate-pulse">
                <div className="w-5 h-5 bg-gray-200 rounded-full"></div>
                <div className="flex-1 space-y-2">
                  <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                  <div className="h-3 bg-gray-200 rounded w-full"></div>
                </div>
              </div>
            ))}
          </div>
        </ComponentCard>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <p className="text-red-600 font-semibold text-center">{error || 'No timeline data available'}</p>
      </div>
    );
  }

  return (
    <>
      <ApplicantInfoCard
        applicantName={data.applicantName}
        applicationNo={data.applicationNo}
        submittedDate={data.submittedDate}
      />

      <ComponentCard size="sm" className="border border-gray-200 rounded-xl pb-10" title="Application Activity" desc="Historical logs">
        {data.timeline.length > 0 ? (
          <TimelineList 
            items={data.timeline} 
             
          />
        ) : (
          <p className="text-gray-500 text-center py-8">No timeline activities found</p>
        )}
      </ComponentCard>
    </>
  );
}