import type { JobListItem } from "@shared/types.js";
import { Loader2 } from "lucide-react";
import type React from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { cn } from "@/lib/utils";
import type { FilterTab } from "./constants";
import { defaultStatusToken, emptyStateCopy, statusTokens } from "./constants";
import { JobRowContent } from "./JobRowContent";

interface JobListPanelProps {
  isLoading: boolean;
  jobs: JobListItem[];
  activeJobs: JobListItem[];
  /** Jobs in this tab before list filters (search, sources, etc.). */
  unfilteredTabCount: number;
  onResetFilters?: () => void;
  selectedJobId: string | null;
  selectedJobIds: Set<string>;
  activeTab: FilterTab;
  onSelectJob: (jobId: string) => void;
  onToggleSelectJob: (jobId: string) => void;
  onToggleSelectAll: (checked: boolean) => void;
}

export const JobListPanel: React.FC<JobListPanelProps> = ({
  isLoading,
  jobs,
  activeJobs,
  unfilteredTabCount,
  onResetFilters,
  selectedJobId,
  selectedJobIds,
  activeTab,
  onSelectJob,
  onToggleSelectJob,
  onToggleSelectAll,
}) => (
  <div className="min-w-0 rounded-xl border border-border bg-card shadow-sm">
    {isLoading && jobs.length === 0 ? (
      <div className="flex flex-col items-center justify-center gap-3 px-6 py-12 text-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
        <div className="text-sm text-muted-foreground">Loading jobs...</div>
      </div>
    ) : activeJobs.length === 0 ? (
      <div className="flex flex-col items-center justify-center gap-3 px-6 py-12 text-center">
        <div className="text-base font-semibold">
          {unfilteredTabCount > 0
            ? "No jobs match your filters"
            : "No jobs found"}
        </div>
        <p className="max-w-md text-sm text-muted-foreground">
          {unfilteredTabCount > 0
            ? `There ${unfilteredTabCount === 1 ? "is" : "are"} ${unfilteredTabCount.toLocaleString()} job${unfilteredTabCount === 1 ? "" : "s"} in this tab before filters. Clear filters or adjust search.`
            : emptyStateCopy[activeTab]}
        </p>
        {unfilteredTabCount > 0 && onResetFilters ? (
          <Button
            type="button"
            variant="secondary"
            size="sm"
            onClick={onResetFilters}
          >
            Clear filters
          </Button>
        ) : null}
      </div>
    ) : (
      <div className="divide-y divide-border/40">
        <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 px-4 py-2 opacity-100 transition-opacity sm:opacity-50 sm:hover:opacity-100">
          <label
            htmlFor="job-list-select-all"
            className="flex min-w-0 flex-1 items-center gap-2 text-xs text-muted-foreground"
          >
            <Checkbox
              id="job-list-select-all"
              checked={
                activeJobs.length > 0 &&
                activeJobs.every((job) => selectedJobIds.has(job.id))
              }
              onCheckedChange={() => {
                const allSelected =
                  activeJobs.length > 0 &&
                  activeJobs.every((job) => selectedJobIds.has(job.id));
                onToggleSelectAll(!allSelected);
              }}
              aria-label="Select all filtered jobs"
            />
            <span className="min-w-0">Select all filtered</span>
          </label>
          <span
            className="shrink-0 text-xs text-muted-foreground tabular-nums before:content-['·'] before:mr-1.5 before:text-muted-foreground/50 sm:before:content-none"
            aria-live="polite"
          >
            {selectedJobIds.size} selected
          </span>
        </div>
        {activeJobs.map((job) => {
          const isSelected = job.id === selectedJobId;
          const isChecked = selectedJobIds.has(job.id);
          const statusToken = statusTokens[job.status] ?? defaultStatusToken;
          return (
            <div
              key={job.id}
              data-job-id={job.id}
              className={cn(
                "group flex items-center gap-3 px-4 py-3 transition-colors cursor-pointer border-l-2 border-b",
                isChecked
                  ? "!border-l !border-l-primary !bg-muted/40"
                  : "border-l border-l-border/40",
                isSelected
                  ? "bg-primary/15"
                  : "border-b-border/40 hover:bg-muted/20",
                isChecked && isSelected && "outline-2 outline-primary/30",
              )}
            >
              <div className="relative h-4 w-4 shrink-0">
                <span
                  className={cn(
                    "absolute inset-0 m-auto h-2 w-2 rounded-full transition-opacity duration-150 ease-out",
                    statusToken.dot,
                    isChecked || isSelected
                      ? "opacity-0"
                      : "opacity-100 group-hover:opacity-0",
                  )}
                  title={statusToken.label}
                />
                <Checkbox
                  checked={isChecked}
                  onCheckedChange={() => onToggleSelectJob(job.id)}
                  onClick={(event) => event.stopPropagation()}
                  aria-label={`Select ${job.title}`}
                  className={cn(
                    "absolute inset-0 m-0 border-border/80 cursor-pointer text-muted-foreground/70 transition-opacity duration-150 ease-out",
                    "data-[state=checked]:border-primary data-[state=checked]:bg-primary/20 data-[state=checked]:text-primary",
                    "data-[state=checked]:shadow-[0_0_0_1px_hsl(var(--primary)/0.35)]",
                    isChecked || isSelected
                      ? "opacity-100 pointer-events-auto"
                      : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto",
                  )}
                />
              </div>
              <button
                type="button"
                onClick={() => onSelectJob(job.id)}
                data-testid={`select-${job.id}`}
                className="flex min-w-0 flex-1 cursor-pointer text-left"
                aria-pressed={isSelected}
              >
                <JobRowContent
                  job={job}
                  isSelected={isSelected}
                  showStatusDot={false}
                />
              </button>
            </div>
          );
        })}
      </div>
    )}
  </div>
);
