import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar";
import { EmptyState } from "@/shared/components/ui/empty-state";
import { Inbox } from "lucide-react";

interface SubmissionItem {
  id: string;
  studentName: string;
  studentAvatar?: string;
  assignment: string;
  submittedAt: string;
  status: "submitted" | "late";
}

const MOCK_SUBMISSIONS: SubmissionItem[] = [
  {
    id: "1",
    studentName: "Alice Johnson",
    assignment: "React Component Composition",
    submittedAt: "10 minutes ago",
    status: "submitted",
  },
  {
    id: "2",
    studentName: "Bob Smith",
    assignment: "Design System Analysis",
    submittedAt: "1 hour ago",
    status: "submitted",
  },
  {
    id: "3",
    studentName: "Charlie Brown",
    assignment: "React Component Composition",
    submittedAt: "2 hours ago",
    status: "late",
  },
  {
    id: "4",
    studentName: "Diana Prince",
    assignment: "CSS Grid Layout",
    submittedAt: "Yesterday",
    status: "submitted",
  },
  {
    id: "5",
    studentName: "Evan Wright",
    assignment: "Design System Analysis",
    submittedAt: "Yesterday",
    status: "submitted",
  },
];

export function RecentSubmissions() {
  const hasSubmissions = MOCK_SUBMISSIONS.length > 0;

  return (
    <Card className="col-span-4 lg:col-span-4">
      <CardHeader>
        <CardTitle>Recent Submissions</CardTitle>
      </CardHeader>
      <CardContent>
        {!hasSubmissions ? (
           <EmptyState
             icon={Inbox}
             title="No New Submissions"
             description="All caught up! There are no new submissions to review."
             className="border-none h-[300px]"
           />
        ) : (
          <div className="space-y-6">
            {MOCK_SUBMISSIONS.map((item) => (
              <div key={item.id} className="flex items-center justify-between group">
                <div className="flex items-center space-x-4">
                  <Avatar className="h-9 w-9">
                    <AvatarImage src={item.studentAvatar} alt={item.studentName} />
                    <AvatarFallback>{item.studentName.charAt(0)}</AvatarFallback>
                  </Avatar>
                  <div className="space-y-1">
                    <p className="text-sm font-medium leading-none">
                      {item.studentName}
                    </p>
                    <p className="text-sm text-muted-foreground">
                      Submitted <span className="font-medium text-foreground">{item.assignment}</span>
                    </p>
                  </div>
                </div>
                <div className="flex items-center space-x-2">
                  <div className="text-sm text-muted-foreground">
                      {/* Using static date for demo to prevent hydration mismatch */}
                      {item.submittedAt}
                  </div>
                  {item.status === "late" && (
                      <span className="inline-flex items-center rounded-full border border-destructive px-2 py-0.5 text-xs font-semibold text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
                          Late
                      </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}