"use client";

import { useEffect, useState, useCallback, useMemo } from "react";
import { getCustomerApplicationsList } from "@/src/services/web/services";
import { Application } from "./types";
import { TOTAL_STEPS } from "./constants";
import Header from "./components/Header";
import EmptyState from "./components/EmptyState";
import ApplicationsList from "./components/ApplicationsList";
import LoadingState from "./components/LoadingState";

interface MyApplicationListProps {
  onViewFthb: (id: number) => void;
  onViewHi: (id: number) => void;
  onViewTMR: (id: number) => void;
}

export default function MyApplicationList({
  onViewFthb,
  onViewHi,
  onViewTMR,
}: MyApplicationListProps) {
  const [applications, setApplications] = useState<Application[]>([]);
  const [loading, setLoading] = useState(true);

  const fetchApplications = useCallback(async () => {
    try {
      const response = await getCustomerApplicationsList();
      setApplications(response.data.data);
    } catch (error) {
      console.error("Error fetching applications:", error);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchApplications();
  }, [fetchApplications]);

  const handleView = useCallback((type: string, id: number) => {
    switch (type) {
      case 'First-Time Home Buyer Assistance':
        onViewFthb(id);
        break;
      case 'Home Improvement Program':
        onViewHi(id);
        break;
      case 'Tenant Maintenance Requests':
        onViewTMR(id);
        break;
    }
  }, [onViewFthb, onViewHi, onViewTMR]);

  const handleEdit = useCallback((type: string, id: number) => {
    const routes: Record<string, string> = {
      'Home Improvement Program': `/home-improvement-application-form?id=${id}`,
      'First-Time Home Buyer Assistance': `/first-time-home-buyer-application-form?id=${id}`,
      'Tenant Maintenance Requests': `/rm-application-form?id=${id}`
    };
    
    const route = routes[type];
    if (route) {
      window.location.href = route;
    }
  }, []);

  const isDraft = useCallback((app: Application) => {
    const totalSteps = TOTAL_STEPS[app.application_type] || 6;
    return !app.submission_status || app.active_step < totalSteps;
  }, []);

  const hasApplications = useMemo(() => applications.length > 0, [applications.length]);

  if (loading) {
    return <LoadingState />;
  }

  return (
    <section className="w-full py-10 px-0 lg:px-10">
      <div className="max-w-7xl mx-auto">
        <Header />
        {hasApplications ? (
          <ApplicationsList 
            applications={applications}
            isDraft={isDraft}
            handleEdit={handleEdit}
            handleView={handleView}
          />
        ) : (
          <EmptyState />
        )}
      </div>
    </section>
  );
}