"use client";

import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  FileText,
  Upload,
  Calculator,
  CheckCircle,
  Send,
  Clock,
} from "lucide-react";
import { formatDate } from "@/lib/formatting";

// Mock data - in real app this would come from API
const mockActivity = [
  {
    id: "1",
    type: "document_uploaded",
    title: "P60 uploaded for John Smith",
    description: "Employment certificate for 2023-24",
    clientId: "client-1",
    clientName: "John Smith",
    userId: "user-1",
    userName: "Sarah Wilson",
    timestamp: "2024-01-10T14:30:00Z",
    status: "completed",
  },
  {
    id: "2",
    type: "schedule_computed",
    title: "SA103 calculated for Sarah Johnson",
    description: "Self-employment schedule completed",
    clientId: "client-2",
    clientName: "Sarah Johnson",
    userId: "user-2",
    userName: "Mike Davis",
    timestamp: "2024-01-10T13:15:00Z",
    status: "completed",
  },
  {
    id: "3",
    type: "coverage_checked",
    title: "Coverage check completed",
    description: "2 missing items identified for Michael Brown",
    clientId: "client-3",
    clientName: "Michael Brown",
    userId: "user-1",
    userName: "Sarah Wilson",
    timestamp: "2024-01-10T11:45:00Z",
    status: "attention_required",
  },
  {
    id: "4",
    type: "form_generated",
    title: "SA100 form generated",
    description: "Main return PDF created for Emma Davis",
    clientId: "client-4",
    clientName: "Emma Davis",
    userId: "user-3",
    userName: "Alex Thompson",
    timestamp: "2024-01-10T10:20:00Z",
    status: "completed",
  },
  {
    id: "5",
    type: "submission_prepared",
    title: "HMRC submission ready",
    description: "Return prepared for David Wilson",
    clientId: "client-5",
    clientName: "David Wilson",
    userId: "user-2",
    userName: "Mike Davis",
    timestamp: "2024-01-10T09:30:00Z",
    status: "pending_review",
  },
];

const activityIcons = {
  document_uploaded: Upload,
  schedule_computed: Calculator,
  coverage_checked: CheckCircle,
  form_generated: FileText,
  submission_prepared: Send,
  default: Clock,
};

const statusColors = {
  completed: "bg-green-100 text-green-800",
  attention_required: "bg-yellow-100 text-yellow-800",
  pending_review: "bg-blue-100 text-blue-800",
  failed: "bg-red-100 text-red-800",
};

export function RecentActivity(): JSX.Element {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle>Recent Activity</CardTitle>
        <Badge variant="outline">Last 24 hours</Badge>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {mockActivity.map((activity) => {
            const Icon =
              activityIcons[activity.type as keyof typeof activityIcons] ||
              activityIcons.default;

            return (
              <div
                key={activity.id}
                className="flex items-start space-x-4 p-3 border rounded-lg hover:bg-muted/50 transition-colors"
              >
                <div className="flex-shrink-0">
                  <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
                    <Icon className="h-4 w-4 text-primary" />
                  </div>
                </div>

                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between mb-1">
                    <h4 className="text-sm font-medium truncate">
                      {activity.title}
                    </h4>
                    <Badge
                      variant="outline"
                      className={
                        statusColors[
                          activity.status as keyof typeof statusColors
                        ]
                      }
                    >
                      {activity.status.replace("_", " ")}
                    </Badge>
                  </div>

                  <p className="text-sm text-muted-foreground mb-2">
                    {activity.description}
                  </p>

                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <Avatar className="h-5 w-5">
                        <AvatarFallback className="text-xs">
                          {activity.userName
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <span className="text-xs text-muted-foreground">
                        {activity.userName}
                      </span>
                    </div>

                    <span className="text-xs text-muted-foreground">
                      {formatDate(activity.timestamp, { relative: true })}
                    </span>
                  </div>
                </div>

                <div className="flex-shrink-0">
                  <Link
                    href={`/clients/${activity.clientId}`}
                    className="text-xs text-primary hover:underline"
                  >
                    View Client
                  </Link>
                </div>
              </div>
            );
          })}

          {mockActivity.length === 0 && (
            <div className="text-center py-8 text-muted-foreground">
              <Clock className="h-8 w-8 mx-auto mb-2 opacity-50" />
              <p>No recent activity</p>
              <p className="text-sm">
                Activity will appear here as work is completed
              </p>
            </div>
          )}
        </div>

        {mockActivity.length > 0 && (
          <div className="mt-4 pt-4 border-t">
            <Link
              href="/audit"
              className="text-sm text-primary hover:underline"
            >
              View full audit trail →
            </Link>
          </div>
        )}
      </CardContent>
    </Card>
  );
}