"use client";

import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { AlertCircle, Clock, FileText, MessageSquare } from "lucide-react";
import { formatDate } from "@/lib/formatting";

// Mock data - in real app this would come from API
const mockTasks = [
  {
    id: "1",
    type: "clarification" as const,
    title: "Missing P60 for John Smith",
    description: "Employment income evidence required for SA102",
    clientId: "client-1",
    clientName: "John Smith",
    taxYear: "2023-24",
    priority: "high" as const,
    dueDate: "2024-01-15",
  },
  {
    id: "2",
    type: "review_request" as const,
    title: "Review SA103 calculations",
    description: "Self-employment profit calculation needs approval",
    clientId: "client-2",
    clientName: "Sarah Johnson",
    taxYear: "2023-24",
    priority: "medium" as const,
    dueDate: "2024-01-20",
  },
  {
    id: "3",
    type: "missing_evidence" as const,
    title: "Bank statements required",
    description: "Property income verification needed",
    clientId: "client-3",
    clientName: "Michael Brown",
    taxYear: "2023-24",
    priority: "urgent" as const,
    dueDate: "2024-01-12",
  },
];

const taskIcons = {
  clarification: MessageSquare,
  missing_evidence: FileText,
  review_request: Clock,
  calculation_error: AlertCircle,
};

const priorityColors = {
  low: "bg-gray-100 text-gray-800",
  medium: "bg-blue-100 text-blue-800",
  high: "bg-orange-100 text-orange-800",
  urgent: "bg-red-100 text-red-800",
};

export function TasksList(): JSX.Element {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle>Pending Tasks</CardTitle>
        <Badge variant="secondary">{mockTasks.length}</Badge>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {mockTasks.map((task) => {
            const Icon = taskIcons[task.type];
            return (
              <div
                key={task.id}
                className="flex items-start space-x-4 p-4 border rounded-lg hover:bg-muted/50 transition-colors"
              >
                <div className="flex-shrink-0">
                  <Icon className="h-5 w-5 text-muted-foreground mt-0.5" />
                </div>

                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between mb-1">
                    <h4 className="text-sm font-medium truncate">
                      {task.title}
                    </h4>
                    <Badge
                      variant="outline"
                      className={priorityColors[task.priority]}
                    >
                      {task.priority}
                    </Badge>
                  </div>

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

                  <div className="flex items-center justify-between text-xs text-muted-foreground">
                    <span>
                      {task.clientName} • {task.taxYear}
                    </span>
                    <span>
                      Due {formatDate(task.dueDate, { format: "short" })}
                    </span>
                  </div>
                </div>

                <div className="flex-shrink-0">
                  <Button variant="ghost" size="sm" asChild>
                    <Link href={`/clients/${task.clientId}`}>View</Link>
                  </Button>
                </div>
              </div>
            );
          })}

          {mockTasks.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 pending tasks</p>
              <p className="text-sm">All caught up!</p>
            </div>
          )}
        </div>

        {mockTasks.length > 0 && (
          <div className="mt-4 pt-4 border-t">
            <Button variant="outline" className="w-full" asChild>
              <Link href="/tasks">View All Tasks</Link>
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
}