import { hatcheryApplications, farmApplications, getStatusColor, formatStatus } from '@/data/dummyData';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ArrowRight, Fish, Warehouse } from 'lucide-react';
import { Link } from 'react-router-dom';

export function RecentApplications() {
  const allApplications = [
    ...hatcheryApplications.map(h => ({ ...h, type: 'hatchery' as const })),
    ...farmApplications.map(f => ({ ...f, type: 'farm' as const })),
  ]
    .sort((a, b) => new Date(b.submittedDate).getTime() - new Date(a.submittedDate).getTime())
    .slice(0, 5);

  return (
    <Card className="card-hover">
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className="text-lg font-semibold">Recent Applications</CardTitle>
        <Button variant="ghost" size="sm" asChild className="text-primary">
          <Link to="/applications">
            View all <ArrowRight className="ml-1 h-4 w-4" />
          </Link>
        </Button>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {allApplications.map((app) => (
            <div
              key={app.id}
              className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 p-3 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors"
            >
              <div className={`rounded-lg p-2 ${app.type === 'hatchery' ? 'bg-primary/10 text-primary' : 'bg-emerald-100 text-emerald-700'}`}>
                {app.type === 'hatchery' ? <Fish className="h-5 w-5" /> : <Warehouse className="h-5 w-5" />}
              </div>
              <div className="flex-1 min-w-0">
                <p className="font-medium text-sm truncate">
                  {app.type === 'hatchery' ? (app as any).hatcheryName : (app as any).farmName}
                </p>
                <p className="text-xs text-muted-foreground">{app.applicationNo}</p>
              </div>
              <div className="w-full sm:w-auto sm:text-right">
                <Badge className={getStatusColor(app.status)}>{formatStatus(app.status)}</Badge>
                <p className="text-xs text-muted-foreground mt-1">{app.submittedDate}</p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}