/**
 * User Metrics Section Component
 * Displays personal metrics for regular users
 */

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { MessageSquare, Clock } from 'lucide-react';
import { DashboardKPIs } from '@/services/dashboard.service';
import { formatHoursMinutes } from '@/utils/slaTracker';

interface UserMetricsSectionProps {
  kpis: DashboardKPIs | null;
}

export function UserMetricsSection({ kpis }: UserMetricsSectionProps) {
  if (!kpis) return null;

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6" data-testid="user-metrics-section">
      {/* Collaboration Activity */}
      <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="user-activity-card">
        <CardHeader className="pb-3">
          <div className="flex items-center gap-2">
            <div className="p-2 bg-indigo-100 rounded-lg">
              <MessageSquare className="h-4 w-4 text-indigo-600" />
            </div>
            <CardTitle className="text-sm">My Activity</CardTitle>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <div className="grid grid-cols-2 gap-2">
              <div className="text-center p-3 bg-indigo-50 rounded">
                <p className="text-xs text-muted-foreground mb-1">Work Notes</p>
                <p className="text-xl sm:text-2xl font-bold text-indigo-600">{kpis.engagement.workNotesAdded}</p>
              </div>
              <div className="text-center p-3 bg-purple-50 rounded">
                <p className="text-xs text-muted-foreground mb-1">Attachments</p>
                <p className="text-xl sm:text-2xl font-bold text-purple-600">
                  {kpis.engagement.attachmentsUploaded}
                </p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Avg Response Time */}
      <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="user-response-time-card">
        <CardHeader className="pb-3">
          <div className="flex items-center gap-2">
            <div className="p-2 bg-purple-100 rounded-lg">
              <Clock className="h-4 w-4 text-purple-600" />
            </div>
            <CardTitle className="text-sm">Avg Response Time</CardTitle>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <div className="flex items-baseline gap-2">
              <span className="text-2xl sm:text-3xl font-bold text-purple-600">
                {formatHoursMinutes(kpis.tatEfficiency.avgCycleTimeHours)}
              </span>
            </div>
            <Separator />
            <div className="text-xs text-muted-foreground text-center">
              ≈ {kpis.tatEfficiency.avgCycleTimeDays.toFixed(1)} working days
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

