'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { ClipboardList } from 'lucide-react';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Button } from '@/components/ui/button';
import {
  QuotationApplicationCard,
  type WorkerQuotation,
} from '@/components/worker/QuotationApplicationCard';
import {
  WorkerPortalEmpty,
  WorkerPortalLoading,
  WorkerPortalShell,
} from '@/components/worker/WorkerPortal';
import { api } from '@/lib/api';

export default function WorkerApplicationsPage() {
  const [quotations, setQuotations] = useState<WorkerQuotation[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api<{ data: WorkerQuotation[] }>('/quotations/my')
      .then((res) => setQuotations(res.data))
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  return (
    <DashboardLayout role="worker" title="My Applications">
      <WorkerPortalShell>
        {loading ? (
          <WorkerPortalLoading label="Loading applications…" />
        ) : quotations.length === 0 ? (
          <WorkerPortalEmpty
            icon={ClipboardList}
            title="No applications yet"
            description="Jobs you've applied to will show up here."
            action={
              <Link href="/worker/jobs">
                <Button>Browse available jobs</Button>
              </Link>
            }
          />
        ) : (
          <div className="space-y-3">
            {quotations.map((quotation) => (
              <QuotationApplicationCard key={quotation.id} quotation={quotation} />
            ))}
          </div>
        )}
      </WorkerPortalShell>
    </DashboardLayout>
  );
}