"use client";

import { Card, CardContent } from "@/components/ui/card";
import { 
  FolderKanban, 
  CheckCircle2, 
  Clock, 
  AlertTriangle, 
  Users,
  TrendingUp,
  TrendingDown,
  MessageSquare
} from "lucide-react";

interface AnalyticsData {
  taskCount: number;
  taskDifference: number;
  assignedTaskCount: number;
  assignedTaskDifference: number;
  completedTaskCount: number;
  completedTaskDifference: number;
  incompleteTaskCount: number;
  incompleteTaskDifference: number;
  overdueTaskCount: number;
  overdueTaskDifference: number;
  totalComments: number;
  thisMonthComments: number;
  commentsDifference: number;
}

interface AnalyticsRowProps {
  data: AnalyticsData;
}

const AnalyticsCard = ({ 
  title, 
  value, 
  difference, 
  icon: Icon 
}: { 
  title: string; 
  value: number; 
  difference: number; 
  icon: any;
}) => {
  const isPositive = difference > 0;
  const isNegative = difference < 0;
  
  return (
    <Card className="border-0 shadow-sm">
      <CardContent className="p-4">
        <div className="flex items-center justify-between">
          <div className="space-y-1">
            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
              {title}
            </p>
            <p className="text-2xl font-bold">{value}</p>
            {difference !== 0 && (
              <div className="flex items-center gap-1">
                {isPositive && <TrendingUp className="h-3 w-3 text-muted-foreground" />}
                {isNegative && <TrendingDown className="h-3 w-3 text-muted-foreground" />}
                <span className="text-xs text-muted-foreground">
                  {isPositive ? '+' : ''}{difference} from last period
                </span>
              </div>
            )}
          </div>
          <div className="h-8 w-8 bg-muted rounded-lg flex items-center justify-center">
            <Icon className="h-4 w-4 text-muted-foreground" />
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export const AnalyticsRow = ({ data }: AnalyticsRowProps) => {
  return (
    <div className="grid grid-cols-2 lg:grid-cols-6 gap-4">
      <AnalyticsCard
        title="Total Tasks"
        value={data.taskCount}
        difference={data.taskDifference}
        icon={FolderKanban}
      />
      <AnalyticsCard
        title="Assigned Tasks"
        value={data.assignedTaskCount}
        difference={data.assignedTaskDifference}
        icon={Users}
      />
      <AnalyticsCard
        title="Completed Tasks"
        value={data.completedTaskCount}
        difference={data.completedTaskDifference}
        icon={CheckCircle2}
      />
      <AnalyticsCard
        title="Incomplete Tasks"
        value={data.incompleteTaskCount}
        difference={data.incompleteTaskDifference}
        icon={Clock}
      />
      <AnalyticsCard
        title="Overdue Tasks"
        value={data.overdueTaskCount}
        difference={data.overdueTaskDifference}
        icon={AlertTriangle}
      />
      <AnalyticsCard
        title="Total Comments"
        value={data.totalComments}
        difference={data.commentsDifference}
        icon={MessageSquare}
      />
    </div>
  );
}; 