import type { ProjectRow, ProjectPriority, ProjectStatus } from "@/types/project";
import avatarImage from "@/assets/images/avatar.jpeg";
import { ColumnDef } from "@tanstack/react-table";
import Image from "next/image";
import Link from "next/link";
import { ChevronDown, MoreVertical } from "lucide-react";

function formatDeadline(iso: string) {
  const parsed = /^\d{4}-\d{2}-\d{2}/.test(iso) ? new Date(iso) : null;
  if (!parsed || Number.isNaN(parsed.getTime())) return iso;
  return parsed.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
}

/** Figma palette: High/Medium/Low + Active/Inactive */
const priorityClass: Record<ProjectPriority, string> = {
  low: "border-[#22C55E] text-[#22C55E]",
  medium: "border-[#F59E0B] text-[#F59E0B]",
  high: "border-[#EF4444] text-[#EF4444]",
};

const statusClass: Record<ProjectStatus, string> = {
  active: "border-[#22C55E] text-[#22C55E]",
  inactive: "border-[#EF4444] text-[#EF4444]",
};

const statusLabel: Record<ProjectStatus, string> = {
  active: "Active",
  inactive: "Inactive",
};

const priorityLabel: Record<ProjectPriority, string> = {
  low: "Low",
  medium: "Medium",
  high: "High",
};

function PriorityPill({
  p,
  onChange,
}: {
  p: ProjectPriority;
  onChange?: (next: ProjectPriority) => void;
}) {
  return (
    <label
      className={`inline-flex h-7 min-w-[104px] items-center gap-1 rounded border px-2 text-[13px] font-medium ${priorityClass[p]}`}
    >
      <span className="size-1.5 shrink-0 rounded-full bg-current" aria-hidden />
      <select
        value={p}
        onChange={(e) => onChange?.(e.target.value as ProjectPriority)}
        className="w-full appearance-none bg-transparent pr-4 text-[13px] outline-none"
      >
        <option value="high">High</option>
        <option value="medium">Medium</option>
        <option value="low">Low</option>
      </select>
      <ChevronDown className="size-4 shrink-0 opacity-80" aria-hidden />
    </label>
  );
}

function StatusPill({
  s,
  onChange,
}: {
  s: ProjectStatus;
  onChange?: (next: ProjectStatus) => void;
}) {
  return (
    <label
      className={`inline-flex h-7 min-w-[104px] items-center gap-1 rounded border px-2 text-[13px] font-medium ${statusClass[s]}`}
    >
      <select
        value={s}
        onChange={(e) => onChange?.(e.target.value as ProjectStatus)}
        className="w-full appearance-none bg-transparent pr-4 text-[13px] outline-none"
      >
        <option value="active">Active</option>
        <option value="inactive">Inactive</option>
      </select>
      <ChevronDown className="size-4 shrink-0 opacity-80" aria-hidden />
    </label>
  );
}

const TEAM_STACK = 3;

const SEED_ROWS: Omit<ProjectRow, "id">[] = [
  {
    name: "HR Management System",
    displayId: "13fd5f3",
    leaderName: "Team lead",
    leaderImage: avatarImage,
    teamSize: 18,
    deadline: "2024-03-25",
    priority: "high",
    status: "active",
  },
  {
    name: "Payroll Dashboard",
    displayId: "a8b2c91",
    leaderName: "Team lead",
    leaderImage: avatarImage,
    teamSize: 12,
    deadline: "2024-03-25",
    priority: "medium",
    status: "active",
  },
  {
    name: "Trivia Game (Lockers)",
    displayId: "df645sd",
    leaderName: "Team lead",
    leaderImage: avatarImage,
    teamSize: 18,
    deadline: "2024-03-25",
    priority: "medium",
    status: "active",
  },
  {
    name: "Employee Onboarding",
    displayId: "e21aa44",
    leaderName: "Team lead",
    leaderImage: avatarImage,
    teamSize: 9,
    deadline: "2024-04-02",
    priority: "low",
    status: "active",
  },
  {
    name: "Attendance Tracker",
    displayId: "9c33f01",
    leaderName: "Team lead",
    leaderImage: avatarImage,
    teamSize: 15,
    deadline: "2024-03-18",
    priority: "high",
    status: "inactive",
  },
  {
    name: "My Private Chemist",
    displayId: "13df513",
    leaderName: "Team lead",
    leaderImage: avatarImage,
    teamSize: 21,
    deadline: "2024-03-25",
    priority: "low",
    status: "inactive",
  },
  {
    name: "Leave Management",
    displayId: "7aa90de",
    leaderName: "Team lead",
    leaderImage: avatarImage,
    teamSize: 6,
    deadline: "2024-05-12",
    priority: "medium",
    status: "active",
  },
  {
    name: "Performance Reviews",
    displayId: "55bee12",
    leaderName: "Team lead",
    leaderImage: avatarImage,
    teamSize: 11,
    deadline: "2024-06-01",
    priority: "high",
    status: "active",
  },
  {
    name: "Benefits Portal",
    displayId: "c441fad",
    leaderName: "Team lead",
    leaderImage: avatarImage,
    teamSize: 14,
    deadline: "2024-04-20",
    priority: "low",
    status: "active",
  },
  {
    name: "Recruitment ATS",
    displayId: "2d9e881",
    leaderName: "Team lead",
    leaderImage: avatarImage,
    teamSize: 20,
    deadline: "2024-07-08",
    priority: "medium",
    status: "inactive",
  },
];

/** Enough rows for Figma-style pagination (10 per page, multiple pages). */
export const PROJECT_STATIC_DATA: ProjectRow[] = Array.from({ length: 100 }, (_, i) => {
  const seed = SEED_ROWS[i % SEED_ROWS.length];
  const page = Math.floor(i / SEED_ROWS.length);
  return {
    ...seed,
    id: String(i + 1),
    displayId: page === 0 ? seed.displayId : `${seed.displayId.slice(0, 5)}${(i % 36).toString(36)}`,
    teamSize: seed.teamSize + (i % 5),
  };
});

export function getProjectTableColumns(
  app: string,
  handlers?: {
    onPriorityChange?: (rowId: string, next: ProjectPriority) => void;
    onStatusChange?: (rowId: string, next: ProjectStatus) => void;
  },
): ColumnDef<ProjectRow>[] {
  return [
    {
      accessorKey: "name",
      header: () => <span className="capitalize">Project</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium leading-normal text-[#272833]">{row.original.name}</span>
      ),
    },
    {
      accessorKey: "displayId",
      header: () => <span className="capitalize">ID</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium text-[#8B8D97]">#{row.original.displayId}</span>
      ),
    },
    {
      id: "leader",
      header: () => <span className="capitalize">Leader</span>,
      cell: ({ row }) => {
        const { leaderName, leaderImage } = row.original;
        return leaderImage ? (
          <Image
            className="size-9 shrink-0 rounded-full bg-[#E6ECF1] object-cover"
            alt={leaderName}
            title={leaderName}
            src={leaderImage}
            width={36}
            height={36}
          />
        ) : (
          <span
            className="flex size-9 shrink-0 items-center justify-center rounded-full bg-[#E6ECF1] text-xs font-semibold text-[#383E49]"
            title={leaderName}
          >
            ?
          </span>
        );
      },
      enableSorting: false,
    },
    {
      accessorKey: "teamSize",
      header: () => <span className="capitalize">Team</span>,
      cell: ({ row }) => {
        const { teamSize } = row.original;
        const shown = Math.min(TEAM_STACK, teamSize);
        const extra = teamSize > TEAM_STACK ? teamSize - TEAM_STACK : 0;
        return (
          <div className="flex items-center gap-1.5">
            <div className="flex items-center -space-x-2">
              {Array.from({ length: shown }).map((_, i) => (
                <span
                  key={i}
                  className="relative inline-flex size-8 shrink-0 overflow-hidden rounded-full border-2 border-white bg-[#E6ECF1]"
                >
                  <Image src={avatarImage} alt="" width={32} height={32} className="size-full object-cover" />
                </span>
              ))}
            </div>
            {extra > 0 ? (
              <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-[#074473] text-[11px] font-semibold text-white">
                +{extra}
              </span>
            ) : null}
          </div>
        );
      },
      enableSorting: false,
    },
    {
      accessorKey: "deadline",
      header: () => <span className="capitalize">Deadline</span>,
      cell: ({ row }) => (
        <span className="text-[13px] font-medium text-[#16151C]">{formatDeadline(row.original.deadline)}</span>
      ),
    },
    {
      accessorKey: "priority",
      header: () => <span className="capitalize">Priority</span>,
      cell: ({ row }) => (
        <PriorityPill
          p={row.original.priority}
          onChange={(next) => handlers?.onPriorityChange?.(row.original.id, next)}
        />
      ),
    },
    {
      accessorKey: "status",
      header: () => <span className="capitalize">Status</span>,
      cell: ({ row }) => (
        <StatusPill
          s={row.original.status}
          onChange={(next) => handlers?.onStatusChange?.(row.original.id, next)}
        />
      ),
    },
    {
      id: "action",
      header: () => <span className="capitalize">Action</span>,
      cell: ({ row }) => (
        <Link
          href={`/${app}/projects/${row.original.id}`}
          className="inline-flex text-[#272833] hover:text-[#074473]"
          aria-label={`Open ${row.original.name}`}
        >
          <MoreVertical className="size-5" />
        </Link>
      ),
      enableSorting: false,
    },
  ];
}