'use client';

import { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { Briefcase, PlusCircle } from 'lucide-react';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Button } from '@/components/ui/button';
import { JobCard } from '@/components/jobs/JobCard';
import {
  applyCustomerJobListFilters,
  countActiveCustomerJobListFilters,
  defaultCustomerJobListFilters,
  type CustomerJobListFilters,
  type FeedJob,
} from '@/components/jobs/JobFeed';
import {
  CustomerJobFeedFilterButton,
  CustomerJobFeedFilterModal,
} from '@/components/jobs/CustomerJobFeedFilterModal';
import { api } from '@/lib/api';
import {
  PortalEmpty,
  PortalLoading,
  PortalShell,
} from '@/components/portal/Portal';

export default function CustomerJobsPage() {
  const [jobs, setJobs] = useState<FeedJob[]>([]);
  const [loading, setLoading] = useState(true);
  const [filters, setFilters] = useState<CustomerJobListFilters>(defaultCustomerJobListFilters);
  const [filterOpen, setFilterOpen] = useState(false);

  useEffect(() => {
    api<{ data: FeedJob[] }>('/jobs/my/list')
      .then((res) => setJobs(res.data))
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  const filteredJobs = useMemo(
    () => applyCustomerJobListFilters(jobs, filters),
    [jobs, filters]
  );

  const activeFilterCount = useMemo(
    () => countActiveCustomerJobListFilters(filters),
    [filters]
  );

  return (
    <DashboardLayout role="customer" title="My Jobs">
      <PortalShell>
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <p className="text-sm text-muted">
              Jobs you&apos;ve posted — track quotes, hires, and progress.
            </p>
            {!loading && (
              <p className="mt-1 text-xs text-muted">
                <Briefcase className="mr-1 inline h-3.5 w-3.5 -mt-0.5 text-primary" />
                <span className="font-semibold text-slate-700">{filteredJobs.length}</span> job
                {filteredJobs.length !== 1 ? 's' : ''}
                {activeFilterCount > 0 ? ' matching filters' : ''}
              </p>
            )}
          </div>
          <div className="flex shrink-0 items-center gap-2">
            <CustomerJobFeedFilterButton
              activeCount={activeFilterCount}
              onClick={() => setFilterOpen(true)}
            />
            <Link href="/customer/jobs/create">
              <Button size="sm" variant="accent" className="gap-1.5">
                <PlusCircle className="h-4 w-4" />
                Post job
              </Button>
            </Link>
          </div>
        </div>

        {loading ? (
          <PortalLoading label="Loading your jobs…" />
        ) : filteredJobs.length === 0 ? (
          <PortalEmpty
            icon={Briefcase}
            title={activeFilterCount > 0 ? 'No jobs match your filters' : 'No jobs yet'}
            description={
              activeFilterCount > 0
                ? 'Try adjusting your filters or reset to see all your jobs.'
                : 'Post your first job to start receiving quotes from workers.'
            }
            action={
              <Link href="/customer/jobs/create">
                <Button>Post a job</Button>
              </Link>
            }
          />
        ) : (
          <div className="space-y-3">
            {filteredJobs.map((job) => (
              <JobCard
                key={job.id}
                job={job as Parameters<typeof JobCard>[0]['job']}
                href={`/customer/jobs/${job.id}`}
              />
            ))}
          </div>
        )}
      </PortalShell>

      <CustomerJobFeedFilterModal
        open={filterOpen}
        onClose={() => setFilterOpen(false)}
        filters={filters}
        onChange={setFilters}
        resultCount={filteredJobs.length}
      />
    </DashboardLayout>
  );
}