"use client";

import React, { useEffect, useRef, useState } from "react";
import { CheckCircle2, Circle, Loader2, XCircle, RefreshCcw } from "lucide-react";
import ComponentCard2 from "@/src/components/admin/common/ComponentCard2";
import { getTenantMaintenanceTimeline } from "@/src/services/admin/services";
import ComponentCard from "@/src/components/admin/common/ComponentCard";
import { ApplicantInfoCard, TimelineList } from "../_common/timeline-components";

interface Props {
  applicationId: string;
}

interface TimelineItem {
  id: number;
  title: string;
  description: string;
  date: string;
  status: "Completed" | "In Progress" | "Rejected" | "Pending";
}

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

const StatusIcon = ({ status }: { status: string }) => {
  switch (status) {
    case "Completed": return <CheckCircle2 className="w-5 h-5 text-teal-600 fill-teal-50" />;
    case "In Progress": return <Loader2 className="w-5 h-5 text-blue-600 animate-spin" />;
    case "Rejected": return <XCircle className="w-5 h-5 text-red-600 fill-red-50" />;
    default: return <Circle className="w-5 h-5 text-gray-300 fill-white" />;
  }
};

export default function TenantMaintenanceRequestTimeline({ applicationId }: Props) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [timelineData, setTimelineData] = 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 getTenantMaintenanceTimeline(Number(applicationId));
        setTimelineData(response.data?.data || response.data);
      } 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 || !timelineData) {
    return (
      <div className="relative bg-white rounded-xl border border-gray-200 shadow-sm p-3.5">
        <p className="text-red-600 font-semibold text-center">{error || 'No timeline data available'}</p>
      </div>
    );
  }

  return (
    <>

      <ApplicantInfoCard
        applicantName={timelineData.applicantName}
        applicationNo={timelineData.applicationNo}
        submittedDate={timelineData.submittedDate}
      />




      <ComponentCard size="sm" className="border border-gray-200 rounded-xl pb-10" title="Application Activity" desc="Historical logs">
        {timelineData.timeline.length > 0 ? (
          <TimelineList
            items={timelineData.timeline}

          />
        ) : (
          <p className="text-gray-500 text-center py-8">No timeline activities found</p>
        )}
      </ComponentCard>
    </>
  );
}