'use client';

import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import { Bookmark } from 'lucide-react';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Button } from '@/components/ui/button';
import {
  SavedWorkerCard,
  type SavedWorkerListItem,
} from '@/components/workers/SavedWorkerCard';
import {
  PortalEmpty,
  PortalLoading,
  PortalShell,
  PortalSection,
} from '@/components/portal/Portal';
import { api } from '@/lib/api';

export default function SavedWorkersPage() {
  const [workers, setWorkers] = useState<SavedWorkerListItem[]>([]);
  const [loading, setLoading] = useState(true);

  const loadSaved = useCallback(() => {
    setLoading(true);
    api<{ data: SavedWorkerListItem[] }>('/users/customer/saved-workers')
      .then((res) => setWorkers(res.data))
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    loadSaved();
  }, [loadSaved]);

  return (
    <DashboardLayout role="customer" title="Saved Workers">
      <PortalShell>
        <PortalSection
          icon={Bookmark}
          title="Your saved workers"
          description="Workers you've bookmarked. Request a quote to hire them, or use Hire again after a completed job."
        >
          {loading ? (
            <PortalLoading label="Loading saved workers…" />
          ) : workers.length === 0 ? (
            <PortalEmpty
              icon={Bookmark}
              title="No saved workers yet"
              description="Save workers from their profile or after a completed job to hire them again quickly."
              action={
                <Link href="/workers">
                  <Button>Browse workers</Button>
                </Link>
              }
            />
          ) : (
            <div className="space-y-3">
              {workers.map((worker) => (
                <SavedWorkerCard
                  key={worker.id}
                  worker={worker}
                  onRemoved={loadSaved}
                />
              ))}
            </div>
          )}
        </PortalSection>
      </PortalShell>
    </DashboardLayout>
  );
}