path: root/frontend/src/app/(main)/goals/components/goals-list.tsx

"use client";

import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { Edit, Trash2, BarChart, AlertCircle } from "lucide-react";
import Link from "next/link";
import { useToast } from "@/components/ui/use-toast";
import { formatCurrency } from "@/lib/utils";
import { api } from "@/lib/api";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

// Type definitions
export interface Goal {
  id: number;
  name: string;
  targetAmount: number;
  currentAmount: number;
  status: string;
  targetDate: string;
}

export interface GoalProgress {
  goal: Goal;
  percentComplete: number;
  amountRemaining: number;
  daysRemaining: number;
  requiredPerDay: number;
  requiredPerMonth: number;
  onTrack: boolean;
}

// Backend API response type
interface ApiGoal {
  ID: number;
  Name: string;
  TargetAmount: number;
  CurrentAmount: number;
  Status: string;
  TargetDate: string;
  // Other fields might exist but we don't need them
}

interface ApiGoalProgress {
  goal: ApiGoal;
  percentComplete: number;
  amountRemaining: number;
  daysRemaining: number;
  requiredPerDay: number;
  requiredPerMonth: number;
  onTrack: boolean;
}

export function GoalsList() {
  const [goals, setGoals] = useState<GoalProgress[]>([]);
  const [loading, setLoading] = useState(true);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [goalToDelete, setGoalToDelete] = useState<{id: number, name: string} | null>(null);
  const { toast } = useToast();

  const fetchGoals = useCallback(async () => {
    try {
      setLoading(true);
      
      // Add timestamp parameter to prevent caching
      const response = await api.get(`/goals/progress/all?cache=${new Date().getTime()}`);
      
      if (!response.data || !Array.isArray(response.data)) {
        setGoals([]);
        return;
      }
      
      // Validate and sanitize the data before setting state
      const validatedGoals = response.data.map((goalProgress: ApiGoalProgress) => {
        // Map API field names (uppercase) to our component field names (lowercase)
        const mappedGoal = {
          id: goalProgress.goal.ID,
          name: goalProgress.goal.Name,
          targetAmount: Number(goalProgress.goal.TargetAmount) || 0,
          currentAmount: Number(goalProgress.goal.CurrentAmount) || 0,
          status: goalProgress.goal.Status,
          targetDate: goalProgress.goal.TargetDate
        };
        
        return {
          goal: mappedGoal,
          percentComplete: Number(goalProgress.percentComplete) || 0,
          amountRemaining: Number(goalProgress.amountRemaining) || 0,
          daysRemaining: Number(goalProgress.daysRemaining) || 0,
          requiredPerDay: Number(goalProgress.requiredPerDay) || 0,
          requiredPerMonth: Number(goalProgress.requiredPerMonth) || 0,
          onTrack: Boolean(goalProgress.onTrack)
        };
      });
      
      setGoals(validatedGoals);
    } catch (error) {
      console.error("Error fetching goals:", error);
      toast({
        title: "Error",
        description: "Failed to fetch goals. Please try again later.",
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  }, [toast]);

  // Fetch goals when component mounts or if URL contains a refresh parameter
  useEffect(() => {
    fetchGoals();
    
    // Add event listener to refresh when the window gains focus (user comes back to the tab)
    window.addEventListener("focus", fetchGoals);
    
    return () => {
      window.removeEventListener("focus", fetchGoals);
    };
  }, [fetchGoals]);

  const confirmDelete = (id: number, name: string) => {
    setGoalToDelete({ id, name });
    setDeleteDialogOpen(true);
  };

  const handleDeleteConfirm = async () => {
    if (!goalToDelete) return;
    
    try {
      const goalId = Number(goalToDelete.id);
      await api.delete(`/goals/${goalId}`);
      toast({
        title: "Goal deleted",
        description: "The goal has been successfully deleted.",
      });
      fetchGoals();
    } catch (error) {
      console.error("Error deleting goal:", error);
      toast({
        title: "Error",
        description: "Failed to delete the goal. Please try again.",
        variant: "destructive",
      });
    } finally {
      setDeleteDialogOpen(false);
      setGoalToDelete(null);
    }
  };

  const handleDeleteCancel = () => {
    setDeleteDialogOpen(false);
    setGoalToDelete(null);
  };

  if (loading) {
    return <div className="text-center py-8">Loading goals...</div>;
  }

  if (!goals || goals.length === 0) {
    return (
      <div className="text-center py-8">
        <p className="text-muted-foreground mb-4">You haven&apos;t created any goals yet.</p>
        <Link href="/goals/new">
          <Button>Create your first goal</Button>
        </Link>
      </div>
    );
  }

  return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
        {goals.map((goalProgress, index) => {
          const { goal, percentComplete, amountRemaining, daysRemaining, onTrack } = goalProgress;
          const isCompleted = goal.status === "Achieved";

          return (
            <Card key={`goal-${goal.id}-${index}`} className="flex flex-col h-full">
              <CardHeader className="pb-2">
                <div className="flex flex-wrap justify-between items-start gap-2">
                  <CardTitle className="text-base sm:text-lg break-words mr-2">{goal.name}</CardTitle>
                  <Badge variant={isCompleted ? "default" : onTrack ? "outline" : "destructive"} className="whitespace-nowrap">
                    {isCompleted ? "Achieved" : onTrack ? "On Track" : "Behind"}
                  </Badge>
                </div>
                <p className="text-xs sm:text-sm text-muted-foreground mt-1 break-words">
                  Saving for: {goal.name}
                </p>
              </CardHeader>
              <CardContent className="flex-1 py-2">
                <div className="mb-3">
                  <div className="flex justify-between mb-1 text-sm">
                    <span>Progress</span>
                    <span>{Math.round(percentComplete)}%</span>
                  </div>
                  <Progress value={percentComplete} className="h-2" />
                </div>
                
                <div className="space-y-1 text-xs sm:text-sm">
                  <div key={`target-${goal.id}`} className="flex justify-between">
                    <span className="text-muted-foreground">Target</span>
                    <span className="font-medium">{formatCurrency(goal.targetAmount)}</span>
                  </div>
                  <div key={`current-${goal.id}`} className="flex justify-between">
                    <span className="text-muted-foreground">Current</span>
                    <span className="font-medium">{formatCurrency(goal.currentAmount)}</span>
                  </div>
                  <div key={`remaining-${goal.id}`} className="flex justify-between">
                    <span className="text-muted-foreground">Remaining</span>
                    <span className="font-medium">{formatCurrency(amountRemaining)}</span>
                  </div>
                  {daysRemaining > 0 && (
                    <div key={`days-left-${goal.id}`} className="flex justify-between">
                      <span className="text-muted-foreground">Days Left</span>
                      <span className="font-medium">{daysRemaining}</span>
                    </div>
                  )}
                  {goal.targetDate && (
                    <div key={`target-date-${goal.id}`} className="flex justify-between">
                      <span className="text-muted-foreground">Target Date</span>
                      <span className="font-medium">{new Date(goal.targetDate).toLocaleDateString()}</span>
                    </div>
                  )}
                </div>
              </CardContent>
              <CardFooter className="pt-2 flex flex-wrap gap-2">
                <div className="flex flex-col sm:flex-row gap-2 w-full">
                  <Link key={`details-link-${goal.id}`} href={`/goals/${goal.id}`} className="flex-1 min-w-[80px]">
                    <Button variant="outline" size="sm" className="w-full text-xs">
                      <BarChart className="mr-1 h-3 w-3" />
                      Details
                    </Button>
                  </Link>
                  <Link key={`edit-link-${goal.id}`} href={`/goals/edit/${goal.id}`} className="flex-1 min-w-[80px]">
                    <Button variant="outline" size="sm" className="w-full text-xs">
                      <Edit className="mr-1 h-3 w-3" />
                      Edit
                    </Button>
                  </Link>
                  <Button 
                    key={`delete-button-${goal.id}`}
                    variant="outline" 
                    size="sm" 
                    className="flex-1 min-w-[80px] text-xs"
                    onClick={() => confirmDelete(goal.id, goal.name)}
                  >
                    <Trash2 className="mr-1 h-3 w-3" />
                    Delete
                  </Button>
                </div>
              </CardFooter>
            </Card>
          );
        })}
      </div>

      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent className="sm:max-w-[425px] p-4 sm:p-6 gap-4">
          <DialogHeader className="space-y-3">
            <DialogTitle className="flex items-center gap-2 text-lg">
              <AlertCircle className="h-5 w-5 text-destructive" />
              Confirm Deletion
            </DialogTitle>
            <DialogDescription className="text-sm">
              Are you sure you want to delete the goal &ldquo;{goalToDelete?.name}&rdquo;? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="mt-4 flex-col sm:flex-row gap-2">
            <Button 
              variant="outline" 
              onClick={handleDeleteCancel}
              className="w-full sm:w-auto"
            >
              Cancel
            </Button>
            <Button 
              variant="destructive" 
              onClick={handleDeleteConfirm}
              className="w-full sm:w-auto"
            >
              Delete Goal
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}