import avatarImage from "@/assets/images/avatar.jpeg";
import type { CandidateRow, CandidateStatus, CandidateTab, ScheduleOutcome } from "@/types/candidate";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ColumnDef } from "@tanstack/react-table";
import { Check, ChevronDown, FolderOpen, MoreVertical } from "lucide-react";
import Image from "next/image";

const STATUS_LABEL: Record<CandidateStatus, string> = {
  new: "New",
  "in-progress": "In Progress",
  rejected: "Rejected",
  selected: "Selected",
};

const SCHEDULE_OUTCOME_LABEL: Record<ScheduleOutcome, string> = {
  hired: "Hired",
  "in-progress": "In Progress",
  rejected: "Rejected",
};

function scheduleOutcomePillClass(outcome: ScheduleOutcome): string {
  switch (outcome) {
    case "hired":
      return "border-[#039855] bg-[#ECFDF3] text-[#039855]";
    case "in-progress":
      return "border-[#F79009] bg-[#FFF8F1] text-[#F79009]";
    case "rejected":
      return "border-[#F04438] bg-[#FEF2F2] text-[#F04438]";
    default:
      return "border-[#858C94] bg-[#F9FAFB] text-[#858C94]";
  }
}

function statusStyles(status: CandidateStatus): string {
  switch (status) {
    case "new":
      return "border-[#074473] text-[#074473]";
    case "in-progress":
      return "border-[#F79009] text-[#F79009]";
    case "rejected":
      return "border-[#F04438] text-[#F04438]";
    case "selected":
      return "border-[#039855] text-[#039855]";
    default:
      return "border-[#858C94] text-[#858C94]";
  }
}

/** Six Figma seed rows (repeated to fill pages). */
const APPLIED_SEED: Omit<CandidateRow, "id" | "image" | "tab">[] = [
  {
    name: "Jacob Jones",
    email: "jacob.12@gmail.com",
    mobile: "+92 300 1234567",
    appliedFor: "Team Lead - Design",
    status: "new",
  },
  {
    name: "Louise Watson",
    email: "louise.watson@gmail.com",
    mobile: "+92 301 2345678",
    appliedFor: "Web Designer",
    status: "in-progress",
  },
  {
    name: "Leslie Alexander",
    email: "leslie.a@gmail.com",
    mobile: "+92 302 3456789",
    appliedFor: "Marketing Coordinator",
    status: "rejected",
  },
  {
    name: "Christian Dior",
    email: "christian.d@gmail.com",
    mobile: "+92 303 4567890",
    appliedFor: "Python Developer",
    status: "in-progress",
  },
  {
    name: "Jenny Wilson",
    email: "jenny.wilson@gmail.com",
    mobile: "+92 304 5678901",
    appliedFor: "React JS Developer",
    status: "selected",
  },
  {
    name: "Ronald Richard",
    email: "ronald.r@gmail.com",
    mobile: "+92 305 6789012",
    appliedFor: "Data Analyst",
    status: "selected",
  },
];

/** 100 rows → 10 pages at 10/page (matches Figma “page 1 of 10”). */
const APPLIED_DUMMY: CandidateRow[] = Array.from({ length: 100 }, (_, i) => {
  const seed = APPLIED_SEED[i % APPLIED_SEED.length];
  return {
    id: `applied-${i + 1}`,
    image: avatarImage,
    tab: "applied" as const,
    name: seed.name,
    email: i < APPLIED_SEED.length ? seed.email : `${seed.email.split("@")[0]}+${i}@${seed.email.split("@")[1]}`,
    mobile: seed.mobile,
    appliedFor: seed.appliedFor,
    status: seed.status,
  };
});

const SHORTLISTED_DUMMY: CandidateRow[] = [
  {
    id: "short-1",
    image: avatarImage,
    tab: "shortlisted",
    name: "Leslie Wilson",
    email: "leslie.wilson@gmail.com",
    mobile: "+92 306 7890123",
    appliedFor: "Designer",
    status: "selected",
    availableTimings: "Mon–Fri, 10:00 AM – 4:00 PM",
  },
  {
    id: "short-2",
    image: avatarImage,
    tab: "shortlisted",
    name: "Jenny Wilson",
    email: "jenny.wilson@gmail.com",
    mobile: "+92 304 5678901",
    appliedFor: "React JS Developer",
    status: "selected",
    availableTimings: "Wed & Fri, 2:00 PM – 6:00 PM",
  },
  {
    id: "short-3",
    image: avatarImage,
    tab: "shortlisted",
    name: "Ronald Richard",
    email: "ronald.r@gmail.com",
    mobile: "+92 305 6789012",
    appliedFor: "Data Analyst",
    status: "selected",
    availableTimings: "Daily, 9:00 AM – 1:00 PM",
  },
];

const SCHEDULE_SEED: Omit<CandidateRow, "id" | "image" | "tab">[] = [
  {
    name: "Leeise Watson",
    email: "watson01@gmail.com",
    mobile: "+92 3115432489",
    appliedFor: "Web Designer",
    status: "selected",
    scheduledDateRange: "28 Mar - 30 Mar 2024",
    scheduledTimeRange: "11:00pm - 3:00pm",
    scheduleOutcome: "hired",
  },
  {
    name: "Christian Dior",
    email: "christian9@gmail.com",
    mobile: "+92 3548924628",
    appliedFor: "Python Developer",
    status: "in-progress",
    scheduledDateRange: "27 Mar - 30 Mar 2024",
    scheduledTimeRange: "11:00pm - 3:00pm",
    scheduleOutcome: "in-progress",
  },
  {
    name: "Ronald Richard",
    email: "ronald32@gmail.com",
    mobile: "+92 3015495437",
    appliedFor: "Data Analyst",
    status: "selected",
    scheduledDateRange: "29 Mar - 31 Mar 2024",
    scheduledTimeRange: "11:00pm - 3:00pm",
    scheduleOutcome: "rejected",
  },
];

/** 100 rows → 10 pages at 10/page. */
const SCHEDULED_DUMMY: CandidateRow[] = Array.from({ length: 100 }, (_, i) => {
  const seed = SCHEDULE_SEED[i % SCHEDULE_SEED.length];
  return {
    id: `sched-${i + 1}`,
    image: avatarImage,
    tab: "scheduled" as const,
    name: seed.name,
    email: i < SCHEDULE_SEED.length ? seed.email : `${seed.email.split("@")[0]}+${i}@${seed.email.split("@")[1]}`,
    mobile: seed.mobile,
    appliedFor: seed.appliedFor,
    status: seed.status,
    scheduledDateRange: seed.scheduledDateRange,
    scheduledTimeRange: seed.scheduledTimeRange,
    scheduleOutcome: seed.scheduleOutcome,
  };
});

export const CANDIDATE_STATIC_DATA: CandidateRow[] = [
  ...APPLIED_DUMMY,
  ...SHORTLISTED_DUMMY,
  ...SCHEDULED_DUMMY,
];

export type CandidateColumnOptions = {
  tab: CandidateTab;
  onScheduleInterview?: (row: CandidateRow) => void;
};

function selectionColumn(): ColumnDef<CandidateRow> {
  return {
    id: "select",
    header: ({ table }) => (
      <div className="flex justify-center">
        <input
          type="checkbox"
          className="size-4 cursor-pointer rounded-sm border border-[#074473] accent-[#074473]"
          checked={table.getIsAllPageRowsSelected()}
          onChange={table.getToggleAllPageRowsSelectedHandler()}
          aria-label="Select all on this page"
        />
      </div>
    ),
    cell: ({ row }) => (
      <div className="flex justify-center">
        <input
          type="checkbox"
          className="size-4 cursor-pointer rounded-sm border border-[#074473] accent-[#074473]"
          checked={row.getIsSelected()}
          onChange={row.getToggleSelectedHandler()}
          aria-label={`Select ${row.original.name}`}
        />
      </div>
    ),
    enableSorting: false,
    size: 48,
  };
}

function imageColumn(): ColumnDef<CandidateRow> {
  return {
    accessorKey: "image",
    header: () => <span className="capitalize">Image</span>,
    cell: ({ row }) => (
      <Image
        className="size-11 shrink-0 rounded-full bg-[#E6ECF1] object-cover"
        alt=""
        src={row.original.image}
        width={44}
        height={44}
      />
    ),
    enableSorting: false,
  };
}

function getShortlistedColumns(onScheduleInterview?: (row: CandidateRow) => void): ColumnDef<CandidateRow>[] {
  return [
    selectionColumn(),
    imageColumn(),
    {
      accessorKey: "name",
      header: () => <span className="capitalize">Candidate Name</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium leading-normal text-[#272833]">{row.original.name}</span>
      ),
    },
    {
      accessorKey: "appliedFor",
      header: () => <span>Applied For</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium text-[#272833]">{row.original.appliedFor}</span>
      ),
    },
    {
      id: "availableTimings",
      header: () => <span>User Available Timings</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium text-[#272833]">
          {row.original.availableTimings ?? "—"}
        </span>
      ),
    },
    {
      id: "action",
      header: () => <span className="capitalize">Action</span>,
      cell: ({ row }) => (
        <button
          type="button"
          className="text-[13px] font-semibold text-[#074473] underline underline-offset-2 hover:text-[#063A5C]"
          onClick={() => onScheduleInterview?.(row.original)}
        >
          Schedule Now
        </button>
      ),
      enableSorting: false,
    },
  ];
}

function getScheduledColumns(onReSchedule?: (row: CandidateRow) => void): ColumnDef<CandidateRow>[] {
  return [
    selectionColumn(),
    imageColumn(),
    {
      accessorKey: "name",
      header: () => <span className="capitalize">Candidate Name</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium leading-normal text-[#272833]">{row.original.name}</span>
      ),
    },
    {
      accessorKey: "email",
      header: () => <span>Email Address</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium text-[#272833]">{row.original.email}</span>
      ),
    },
    {
      accessorKey: "mobile",
      header: () => <span>Mobile Number</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium text-[#272833]">{row.original.mobile}</span>
      ),
    },
    {
      accessorKey: "appliedFor",
      header: () => <span>Applied For</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium text-[#272833]">{row.original.appliedFor}</span>
      ),
    },
    {
      id: "scheduledTimings",
      header: () => <span>User Available Timings</span>,
      cell: ({ row }) => (
        <div className="flex flex-col gap-0.5">
          <span className="text-[13px] font-medium text-[#272833]">
            {row.original.scheduledDateRange ?? "—"}
          </span>
          <span className="text-[13px] font-medium text-[#272833]">
            {row.original.scheduledTimeRange ?? "—"}
          </span>
        </div>
      ),
    },
    {
      id: "scheduleOutcome",
      header: () => <span className="capitalize">Status</span>,
      cell: ({ row }) => {
        const outcome = row.original.scheduleOutcome;
        if (!outcome) {
          return <span className="text-[13px] text-[#8B8D97]">—</span>;
        }
        return (
          <span
            className={`inline-flex rounded-md border px-2.5 py-1 text-[13px] font-medium leading-snug ${scheduleOutcomePillClass(outcome)}`}
          >
            {SCHEDULE_OUTCOME_LABEL[outcome]}
          </span>
        );
      },
    },
    {
      id: "action",
      header: () => <span className="capitalize">Action</span>,
      cell: ({ row }) => (
        <button
          type="button"
          className="text-[13px] font-semibold text-[#074473] underline underline-offset-2 hover:text-[#063A5C]"
          onClick={() => onReSchedule?.(row.original)}
        >
          Re-Schedule
        </button>
      ),
      enableSorting: false,
    },
  ];
}

function getAppliedColumns(app: string): ColumnDef<CandidateRow>[] {
  return [
    selectionColumn(),
    imageColumn(),
    {
      accessorKey: "name",
      header: () => <span className="capitalize">Candidate Name</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium leading-normal text-[#272833]">{row.original.name}</span>
      ),
    },
    {
      accessorKey: "email",
      header: () => <span>Email Address</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium text-[#272833]">{row.original.email}</span>
      ),
    },
    {
      accessorKey: "mobile",
      header: () => <span>Mobile Number</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium text-[#272833]">{row.original.mobile}</span>
      ),
    },
    {
      accessorKey: "appliedFor",
      header: () => <span>Applied For</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium text-[#272833]">{row.original.appliedFor}</span>
      ),
    },
    {
      accessorKey: "status",
      header: () => <span className="capitalize">Status</span>,
      cell: ({ row }) => {
        const status = row.original.status;
        return (
          <button
            type="button"
            className={`inline-flex w-full max-w-[152px] items-center justify-between gap-1 rounded border px-2 py-0.5 text-[13px] font-medium leading-snug ${statusStyles(status)}`}
          >
            {STATUS_LABEL[status]}
            <ChevronDown className="size-4 shrink-0 opacity-80" aria-hidden />
          </button>
        );
      },
    },
    {
      id: "resume",
      header: () => <span className="capitalize">Resumes</span>,
      cell: () => (
        <Button
          type="button"
          variant="outline"
          className="h-8 gap-1.5 rounded-md border-[#074473] bg-white px-3 text-xs font-medium text-[#074473] hover:bg-[#074473]/5"
        >
          <FolderOpen className="size-3.5 shrink-0" aria-hidden />
          Download
        </Button>
      ),
      enableSorting: false,
    },
    {
      id: "action",
      header: () => <span className="capitalize">Action</span>,
      cell: ({ row }) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              className="inline-flex rounded p-1 text-[#272833] hover:bg-[#F3F4F6] hover:text-[#074473]"
              aria-label={`More actions for ${row.original.name}`}
            >
              <MoreVertical className="size-5" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="min-w-[160px]">
            <DropdownMenuItem>View profile</DropdownMenuItem>
            <DropdownMenuItem>Move to shortlist</DropdownMenuItem>
            <DropdownMenuItem className="text-[#F04438]">Reject</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
      enableSorting: false,
    },
  ];
}

export function getCandidateTableColumns(
  app: string,
  options: CandidateColumnOptions,
): ColumnDef<CandidateRow>[] {
  if (options.tab === "shortlisted") {
    return getShortlistedColumns(options.onScheduleInterview);
  }
  if (options.tab === "scheduled") {
    return getScheduledColumns(options.onScheduleInterview);
  }
  return getAppliedColumns(app);
}