import type { Task } from "@mosaic/shared";
import { TaskStatus, TaskPriority } from "@mosaic/shared";

interface DomainOverviewWidgetProps {
  tasks: Task[];
  isLoading: boolean;
}

export function DomainOverviewWidget({
  tasks,
  isLoading,
}: DomainOverviewWidgetProps): React.JSX.Element {
  if (isLoading) {
    return (
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div className="flex justify-center items-center">
          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900"></div>
          <span className="ml-3 text-gray-600">Loading overview...</span>
        </div>
      </div>
    );
  }

  const stats = {
    total: tasks.length,
    inProgress: tasks.filter((t) => t.status === TaskStatus.IN_PROGRESS).length,
    completed: tasks.filter((t) => t.status === TaskStatus.COMPLETED).length,
    highPriority: tasks.filter((t) => t.priority === TaskPriority.HIGH).length,
  };

  const StatCard = ({
    label,
    value,
    color,
  }: {
    label: string;
    value: number;
    color: string;
  }): React.JSX.Element => (
    <div className={`p-4 rounded-lg bg-gradient-to-br ${color}`}>
      <div className="text-3xl font-bold text-white mb-1">{value}</div>
      <div className="text-sm text-white/90">{label}</div>
    </div>
  );

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 className="text-lg font-semibold text-gray-900 mb-4">Domain Overview</h2>
      <div className="grid grid-cols-2 gap-4">
        <StatCard label="Total Tasks" value={stats.total} color="from-blue-500 to-blue-600" />
        <StatCard
          label="In Progress"
          value={stats.inProgress}
          color="from-green-500 to-green-600"
        />
        <StatCard label="Completed" value={stats.completed} color="from-purple-500 to-purple-600" />
        <StatCard
          label="High Priority"
          value={stats.highPriority}
          color="from-red-500 to-red-600"
        />
      </div>
    </div>
  );
}