src/components/tasks/TaskTimeLogCard.tsx

import React, { useState, useEffect } from "react";
import { TimeLog, timeLogApi } from "@/services/timeLogApi";
import { Employee, employeeApi } from "@/services/employeeApi";
import { format } from "date-fns";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Clock, Loader2, User } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { useQuery } from "@tanstack/react-query";

interface TaskTimeLogCardProps {
  taskId: number;
  entityType?: "Task" | "Issue";
}

const TaskTimeLogCard: React.FC<TaskTimeLogCardProps> = ({ 

  taskId,

  entityType = "Task"

}) => {
  const [timeLogs, setTimeLogs] = useState<TimeLog[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Fetch employees data
  const { 
    data: employees = [], 
    isLoading: isLoadingEmployees 
  } = useQuery({
    queryKey: ["employees"],
    queryFn: () => employeeApi.getAll(),
  });

  useEffect(() => {
    const fetchTimeLogs = async () => {
      try {
        setIsLoading(true);
        setError(null);
        
        let logs: TimeLog[] = [];
        
        if (entityType === "Issue") {
          logs = await timeLogApi.getTimeLogByIssueID(taskId);
        } else {
          logs = await timeLogApi.getTimeLogByTaskID(taskId);
        }
        
        setTimeLogs(logs);
      } catch (err) {
        console.error(`Error fetching time logs for ${entityType}:`, err);
        setError(`Failed to load time logs for this ${entityType.toLowerCase()}. Please try again later.`);
      } finally {
        setIsLoading(false);
      }
    };

    if (taskId) {
      fetchTimeLogs();
    }
  }, [taskId, entityType]);

  // Format date for display
  const formatDate = (dateString: string) => {
    try {
      return format(new Date(dateString), "MMM dd, yyyy");
    } catch (error) {
      return "Invalid date";
    }
  };

  // Utility to strip HTML tags from text for tooltips
  const stripHtmlTags = (html: string): string => {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    return tempDiv.textContent || tempDiv.innerText || '';
  };

  // Helper to get employee name by userId
  const getEmployeeNameByUserId = (userId: string): string => {
    const employee = employees.find(emp => emp.userId.toString() === userId);
    if (employee) {
      return `${employee.firstName} ${employee.lastName}`;
    }
    return userId;
  };

  // Calculate total hours spent
  const totalHoursSpent = timeLogs.reduce((total, log) => total + log.hrsSpent, 0);

  // Mobile view time log card
  const renderMobileTimeLog = (log: TimeLog) => (
    <div key={log.id} className="border rounded-md p-3 mb-2 text-sm">

      <div className="flex justify-between items-start mb-2">

        <Badge variant="outline" className="font-mono bg-indigo-50 text-indigo-700 border-indigo-200 px-2 py-0.5">

          {log.startTime} - {log.endTime}

        </Badge>

        <Badge variant="secondary" className="font-medium">

          {log.hrsSpent.toFixed(2)} hrs

        </Badge>

      </div>

      <div className="mb-2">

        <p className="text-xs text-muted-foreground mb-1">Date</p>

        <div className="flex items-center">

          <Clock className="h-3 w-3 text-muted-foreground mr-1" />

          <span>{formatDate(log.workDate)}</span>

        </div>

      </div>

      <div className="border-t pt-2 mt-2">

        <p className="text-xs text-muted-foreground mb-1">Comments</p>

        <div className="text-sm line-clamp-3" title={stripHtmlTags(log.comments || "No comments")} dangerouslySetInnerHTML={{ __html: log.comments || "No comments" }} />

      </div>

      <div className="text-xs text-muted-foreground mt-2 text-right">

        <div className="flex items-center justify-end gap-1">

          <Avatar className="h-5 w-5">

            <AvatarFallback className="bg-primary/10 text-primary text-xs">

              {getEmployeeNameByUserId(log.createdBy)?.slice(0, 2).toUpperCase() || 'U'}

            </AvatarFallback>

          </Avatar>

          <span>Logged by {getEmployeeNameByUserId(log.createdBy)}</span>

        </div>

      </div>

    </div>
  );

  return (
    <Card className="border shadow-sm">

      <CardHeader className="pb-2 sm:pb-4">

        <CardTitle className="text-lg sm:text-xl flex items-center">

          <Clock className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />

          Time Logs

        </CardTitle>

        <CardDescription>

          Time spent on this {entityType.toLowerCase()}: {totalHoursSpent.toFixed(2)} hours

        </CardDescription>

      </CardHeader>

      <CardContent>

        {isLoading || isLoadingEmployees ? (

          <div className="flex justify-center items-center py-6">

            <Loader2 className="h-6 w-6 animate-spin text-primary" />

            <span className="ml-2">Loading time logs...</span>

          </div>

        ) : error ? (

          <div className="text-center text-red-500 py-4">{error}</div>

        ) : timeLogs.length === 0 ? (

          <div className="text-center text-muted-foreground py-6">

            No time logs recorded for this {entityType.toLowerCase()}.

          </div>

        ) : (

          <>

            {/* Mobile view - Card layout */}

            <div className="sm:hidden">

              {timeLogs.map(renderMobileTimeLog)}

            </div>

            

            {/* Desktop view - Table layout */}

            <div className="hidden sm:block overflow-x-auto">

              <Table>

                <TableHeader>

                  <TableRow>

                    <TableHead>Date</TableHead>

                    <TableHead>Time Range</TableHead>

                    <TableHead>Hours</TableHead>

                    <TableHead>Comments</TableHead>

                    <TableHead>Logged By</TableHead>

                  </TableRow>

                </TableHeader>

                <TableBody>

                  {timeLogs.map((log) => (

                    <TableRow key={log.id}>

                      <TableCell>

                        {formatDate(log.workDate)}

                      </TableCell>

                      <TableCell>

                        <Badge variant="outline" className="font-mono bg-indigo-50 text-indigo-700 border-indigo-200 px-2 py-0.5">

                          {log.startTime} - {log.endTime}

                        </Badge>

                      </TableCell>

                      <TableCell>

                        <span className="font-medium">{log.hrsSpent.toFixed(2)}</span>

                      </TableCell>

                      <TableCell className="max-w-xs">

                        <div className="truncate" title={stripHtmlTags(log.comments || "No comments")} dangerouslySetInnerHTML={{ __html: log.comments || "No comments" }} />

                      </TableCell>

                      <TableCell>

                        <div className="flex items-center gap-2">

                          <Avatar className="h-7 w-7">

                            <AvatarFallback className="bg-gradient-to-br from-indigo-500 to-purple-500 text-white text-xs">

                              {getEmployeeNameByUserId(log.createdBy)?.slice(0, 2).toUpperCase() || 'U'}

                            </AvatarFallback>

                          </Avatar>

                          <div className="text-sm font-medium text-gray-800">

                            {getEmployeeNameByUserId(log.createdBy)}

                          </div>

                        </div>

                      </TableCell>

                    </TableRow>

                  ))}

                </TableBody>

              </Table>

            </div>

          </>

        )}

      </CardContent>
    </Card>
  );
};

export default TaskTimeLogCard;