'use client';

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

export default function WorkerAcceptedJobsPage() {
  const [jobs, setJobs] = useState<Record<string, unknown>[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    api<{ data: Record<string, unknown>[] }>('/jobs/my/list?status=ACCEPTED,IN_PROGRESS')
      .then((res) => setJobs(res.data))
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  return (
    <DashboardLayout role="worker" title="Accepted Jobs">
      <WorkerPortalShell>
        {loading ? (
          <WorkerPortalLoading label="Loading your active jobs…" />
        ) : jobs.length === 0 ? (
          <WorkerPortalEmpty
            icon={Briefcase}
            title="No active jobs yet"
            description="When a customer hires you, accepted and in-progress jobs will appear here."
            action={
              <Link href="/worker/jobs">
                <Button>Find jobs to quote</Button>
              </Link>
            }
          />
        ) : (
          <div className="space-y-3">
            {jobs.map((job) => (
              <JobCard
                key={job.id as string}
                variant="listing"
                job={job as Parameters<typeof JobCard>[0]['job']}
                href={`/worker/jobs/${job.id}`}
              />
            ))}
          </div>
        )}
      </WorkerPortalShell>
    </DashboardLayout>
  );
}