"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import avatarImage from "@/assets/images/avatar.jpeg";
import Image from "next/image";
import {
  BadgeDollarSign,
  ChevronDown,
  ChevronUp,
  Filter,
  MoreVertical,
  Search,
  Wallet,
} from "lucide-react";

type PayrollStatus = "Completed" | "Pending";

type PayrollRow = {
  id: string;
  name: string;
  employeeId: string;
  role: string;
  salary: string;
  status: PayrollStatus;
};

const payrollRows: PayrollRow[] = [
  {
    id: "1",
    name: "Jacob Jones",
    employeeId: "2d1fa35",
    role: "Team Lead - Design",
    salary: "108k Rs",
    status: "Completed",
  },
  {
    id: "2",
    name: "Leaise Watson",
    employeeId: "2d1fa35",
    role: "Web Designer",
    salary: "102k Rs",
    status: "Pending",
  },
  {
    id: "3",
    name: "Leslie Alexander",
    employeeId: "2d1fa35",
    role: "Python Developer",
    salary: "95k Rs",
    status: "Completed",
  },
  {
    id: "4",
    name: "Christian Dior",
    employeeId: "2d1fa35",
    role: "React JS Developer",
    salary: "48k Rs",
    status: "Completed",
  },
  {
    id: "5",
    name: "Jenny Wilson",
    employeeId: "2d1fa35",
    role: "Data Analyst",
    salary: "55k Rs",
    status: "Pending",
  },
  {
    id: "6",
    name: "Ronald Richard",
    employeeId: "2d1fa35",
    role: "Team Lead - Design",
    salary: "102k Rs",
    status: "Completed",
  },
];

const Page = () => {
  const hasPayrollData = payrollRows.length > 0;

  return (
    <div className="space-y-5 bg-[#f4f5fa] p-5 md:p-6">
      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <h1 className="text-[26px] font-bold leading-[1.35] text-[#1c1d22]">
          Employee&apos;s Salaries
        </h1>
        <div className="flex flex-wrap items-center gap-3">
          <Dialog>
            <DialogTrigger asChild>
              <Button
                variant="outline"
                className="h-11 rounded-md border-[#074473] px-5 text-[16px] font-semibold text-[#074473] hover:bg-[#eef4f8]"
              >
                Add Payroll Items
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-[660px] rounded-2xl border-0 p-5 sm:p-6 [&>button]:right-4 [&>button]:top-4 [&>button]:h-8 [&>button]:w-8 [&>button]:rounded-full [&>button]:bg-[#e7edf3] [&>button]:opacity-100">
              <DialogHeader className="space-y-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-[#d8dbe2] bg-white">
                  <Wallet className="h-5 w-5 text-[#28303f]" />
                </div>
                <DialogTitle className="text-left text-[28px] font-bold leading-none text-[#1c1d22]">
                  Add Payroll Items
                </DialogTitle>
              </DialogHeader>

              <form className="mt-1 space-y-4">
                <div className="relative">
                  <select
                    className="h-[52px] w-full appearance-none rounded-md border border-[#eceff4] bg-[#f5f7fb] px-4 text-[15px] text-[#8b8d97] outline-none"
                    defaultValue=""
                  >
                    <option value="" disabled>
                      Type Of Payroll
                    </option>
                    <option value="allowance">Allowance</option>
                    <option value="deduction">Deduction</option>
                    <option value="bonus">Bonus</option>
                  </select>
                  <ChevronDown className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-[#8b8d97]" />
                </div>

                <Input
                  placeholder="Name Of Payroll"
                  className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                />

                <div className="relative">
                  <Input
                    placeholder="Enter Amount"
                    className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] pr-12 text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                  />
                  <div className="absolute right-2 top-1/2 flex -translate-y-1/2 flex-col overflow-hidden rounded border border-[#d9dde5]">
                    <button
                      type="button"
                      className="flex h-[18px] w-7 items-center justify-center bg-[#eef2f7] text-[#8b8d97]"
                      aria-label="Increase amount"
                    >
                      <ChevronUp className="h-3.5 w-3.5" />
                    </button>
                    <button
                      type="button"
                      className="flex h-[18px] w-7 items-center justify-center border-t border-[#d9dde5] bg-[#eef2f7] text-[#8b8d97]"
                      aria-label="Decrease amount"
                    >
                      <ChevronDown className="h-3.5 w-3.5" />
                    </button>
                  </div>
                </div>

                <div className="flex flex-wrap items-center gap-6">
                  <label className="inline-flex items-center gap-3 text-[15px] text-[#8b8d97]">
                    <input
                      type="checkbox"
                      className="size-[19px] rounded border border-[#cfd3d4] accent-[#074473]"
                    />
                    All Employee
                  </label>
                  <label className="inline-flex items-center gap-3 text-[15px] text-[#8b8d97]">
                    <input
                      type="checkbox"
                      className="size-[19px] rounded border border-[#cfd3d4] accent-[#074473]"
                    />
                    Select Employee
                  </label>
                </div>

                <div className="relative">
                  <select
                    className="h-[52px] w-full appearance-none rounded-md border border-[#eceff4] bg-[#f5f7fb] px-4 text-[15px] text-[#c0c4cc] outline-none"
                    defaultValue=""
                  >
                    <option value="" disabled>
                      Select Employee
                    </option>
                    <option value="jacob-jones">Jacob Jones</option>
                    <option value="leaise-watson">Leaise Watson</option>
                    <option value="leslie-alexander">Leslie Alexander</option>
                  </select>
                  <ChevronDown className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-[#b2b8c2]" />
                </div>
              </form>

              <DialogFooter className="mt-2 flex !flex-row items-center justify-center gap-2 sm:justify-center sm:space-x-0">
                <DialogClose asChild>
                  <Button
                    type="button"
                    variant="outline"
                    className="h-[50px] w-[166px] rounded-[10px] border-[#dfe3ea] bg-white text-[20px] font-semibold text-[#1c1d22] hover:bg-gray-50"
                  >
                    Cancel
                  </Button>
                </DialogClose>
                <DialogClose asChild>
                  <Button
                    type="button"
                    className="h-[50px] w-[166px] rounded-[10px] border border-[#074473] bg-[#074473] text-[20px] font-semibold text-white hover:bg-[#0a4e83]"
                  >
                    Add
                  </Button>
                </DialogClose>
              </DialogFooter>
            </DialogContent>
          </Dialog>
          <Dialog>
            <DialogTrigger asChild>
              <Button className="h-11 rounded-md border border-[#074473] bg-[#074473] px-8 text-[16px] font-semibold text-white hover:bg-[#0a4e83]">
                Add Salary
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-[760px] rounded-2xl border-0 p-5 sm:p-7 [&>button]:right-4 [&>button]:top-4 [&>button]:h-8 [&>button]:w-8 [&>button]:rounded-full [&>button]:bg-[#e7edf3] [&>button]:opacity-100">
              <DialogHeader className="space-y-3">
                <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-[#d8dbe2] bg-white">
                  <Wallet className="h-5 w-5 text-[#28303f]" />
                </div>
                <DialogTitle className="text-left text-[28px] font-bold leading-none text-[#1c1d22]">
                  Add Salary
                </DialogTitle>
              </DialogHeader>

              <form className="mt-1 space-y-4">
                <div className="grid gap-3 md:grid-cols-2">
                  <div className="relative">
                    <select
                      className="h-[52px] w-full appearance-none rounded-md border border-[#eceff4] bg-[#f5f7fb] px-4 text-[15px] text-[#8b8d97] outline-none"
                      defaultValue=""
                    >
                      <option value="" disabled>
                        Select Employee
                      </option>
                      <option value="jacob-jones">Jacob Jones</option>
                      <option value="leaise-watson">Leaise Watson</option>
                      <option value="leslie-alexander">Leslie Alexander</option>
                    </select>
                    <ChevronDown className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-[#8b8d97]" />
                  </div>
                  <Input
                    placeholder="Net Salary"
                    className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                  />
                </div>

                <div className="grid gap-3 md:grid-cols-2">
                  <div className="space-y-2">
                    <p className="text-[16px] font-semibold text-[#1c1d22]">Earnings</p>
                    <Input
                      placeholder="Basic"
                      className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                    />
                  </div>
                  <div className="space-y-2">
                    <p className="text-[16px] font-semibold text-[#1c1d22]">Deduction</p>
                    <Input
                      placeholder="TDS"
                      className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                    />
                  </div>
                </div>

                <div className="grid gap-3 md:grid-cols-2">
                  <Input
                    placeholder="Conveyance"
                    className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                  />
                  <Input
                    placeholder="Leave"
                    className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                  />
                </div>

                <div className="grid gap-3 md:grid-cols-2">
                  <Input
                    placeholder="Allowance"
                    className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                  />
                  <Input
                    placeholder="Tax"
                    className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                  />
                </div>

                <div className="grid gap-3 md:grid-cols-2">
                  <Input
                    placeholder="Medical Allowance"
                    className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                  />
                  <Input
                    placeholder="Other"
                    className="h-[52px] rounded-md border-[#eceff4] bg-[#f5f7fb] text-[15px] text-[#4f4f4f] placeholder:text-[#a1a6b2]"
                  />
                </div>
              </form>

              <DialogFooter className="mt-2 flex !flex-row items-center justify-center gap-2 sm:justify-center sm:space-x-0">
                <DialogClose asChild>
                  <Button
                    type="button"
                    variant="outline"
                    className="h-[50px] w-[166px] rounded-[10px] border-[#dfe3ea] bg-white text-[20px] font-semibold text-[#1c1d22] hover:bg-gray-50"
                  >
                    Cancel
                  </Button>
                </DialogClose>
                <DialogClose asChild>
                  <Button
                    type="button"
                    className="h-[50px] w-[166px] rounded-[10px] border border-[#074473] bg-[#074473] text-[20px] font-semibold text-white hover:bg-[#0a4e83]"
                  >
                    Add
                  </Button>
                </DialogClose>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </div>

      <Card className="rounded-xl border-[#f1f3f9] bg-white shadow-none">
        <CardContent className="space-y-7 p-5 md:p-7">
          <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <h2 className="text-[20px] font-bold leading-[1.35] text-[#383e49]">
              {hasPayrollData ? "All Employee’s Salaries" : "Employee&apos;s Payroll Items"}
            </h2>
            <div className="flex flex-wrap items-center gap-2">
              <div className="relative min-w-[210px]">
                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#8b8d97]" />
                <Input
                  placeholder="Search"
                  className="h-10 rounded-md border border-[#e1e2e9] bg-white pl-9 text-sm placeholder:text-[#abafb1] focus-visible:ring-1 focus-visible:ring-[#074473]"
                />
              </div>
              <Button
                variant="outline"
                className="h-10 rounded-md border-[#e1e2e9] bg-white px-4 text-sm font-normal text-[#8b8d97] hover:bg-gray-50"
              >
                <Filter className="mr-2 h-4 w-4" />
                Filters
              </Button>
              <Button
                variant="outline"
                className="h-10 rounded-md border-[#e1e2e9] bg-white px-4 text-sm font-normal text-[#8b8d97] hover:bg-gray-50"
              >
                <Filter className="mr-2 h-4 w-4" />
                Filters
              </Button>
            </div>
          </div>

          {hasPayrollData ? (
            <div className="overflow-hidden rounded-md border border-[#e1e2e9]">
              <div className="overflow-x-auto">
                <table className="w-full min-w-[980px] border-collapse">
                  <thead className="bg-[#f8fafc]">
                    <tr className="border-b border-[#e1e2e9]">
                      <th className="w-[48px] px-4 py-3 text-left">
                        <input
                          type="checkbox"
                          className="size-4 cursor-pointer rounded-sm border border-[#074473] accent-[#074473]"
                          aria-label="Select all rows"
                        />
                      </th>
                      <th className="px-4 py-3 text-left text-[14px] font-semibold text-[#1c1d22]">
                        Image
                      </th>
                      <th className="px-4 py-3 text-left text-[14px] font-semibold text-[#1c1d22]">
                        Name
                      </th>
                      <th className="px-4 py-3 text-left text-[14px] font-semibold text-[#1c1d22]">
                        Employee ID
                      </th>
                      <th className="px-4 py-3 text-left text-[14px] font-semibold text-[#1c1d22]">
                        Role
                      </th>
                      <th className="px-4 py-3 text-left text-[14px] font-semibold text-[#1c1d22]">
                        Salary
                      </th>
                      <th className="px-4 py-3 text-left text-[14px] font-semibold text-[#1c1d22]">
                        Status
                      </th>
                      <th className="px-4 py-3 text-left text-[14px] font-semibold text-[#1c1d22]">
                        Action
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {payrollRows.map((row) => {
                      const isPending = row.status === "Pending";
                      return (
                        <tr key={row.id} className="border-b border-[#eef1f6] last:border-b-0">
                          <td className="px-4 py-3">
                            <input
                              type="checkbox"
                              className="size-4 cursor-pointer rounded-sm border border-[#074473] accent-[#074473]"
                              aria-label={`Select ${row.name}`}
                            />
                          </td>
                          <td className="px-4 py-2">
                            <Image
                              src={avatarImage}
                              alt={row.name}
                              width={42}
                              height={42}
                              className="h-[42px] w-[42px] rounded-xl object-cover"
                            />
                          </td>
                          <td className="px-4 py-3 text-[14px] font-medium text-[#16151c]">{row.name}</td>
                          <td className="px-4 py-3 text-[14px] text-[#16151c]">{row.employeeId}</td>
                          <td className="px-4 py-3 text-[14px] text-[#16151c]">{row.role}</td>
                          <td className="px-4 py-3 text-[14px] text-[#16151c]">{row.salary}</td>
                          <td className="px-4 py-3">
                            <button
                              type="button"
                              className={`inline-flex h-7 min-w-[104px] items-center justify-between rounded border px-2 text-[13px] ${
                                isPending
                                  ? "border-[#F79009] text-[#F79009]"
                                  : "border-[#039855] text-[#039855]"
                              }`}
                            >
                              {row.status}
                              <ChevronDown className="ml-2 h-3.5 w-3.5" />
                            </button>
                          </td>
                          <td className="px-4 py-3">
                            <button
                              type="button"
                              className="inline-flex text-[#16151c] transition-colors hover:text-[#074473]"
                              aria-label={`Open actions for ${row.name}`}
                            >
                              <MoreVertical className="h-4 w-4" />
                            </button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>

              <div className="flex items-center justify-between border-t border-[#e1e2e9] px-4 py-3">
                <Button
                  variant="outline"
                  className="h-9 rounded-md border-[#e1e2e9] px-4 text-sm font-normal text-[#4f4f4f]"
                >
                  Previous
                </Button>
                <span className="text-sm text-[#abafb1]">page 1 of 10</span>
                <Button
                  variant="outline"
                  className="h-9 rounded-md border-[#e1e2e9] px-4 text-sm font-normal text-[#4f4f4f]"
                >
                  Next
                </Button>
              </div>
            </div>
          ) : (
            <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 py-6 text-center">
              <div className="flex h-[88px] w-[88px] items-center justify-center rounded-full border border-[#e1e2e9] bg-[#f2f4f7]">
                <BadgeDollarSign className="h-8 w-8 text-[#8b8d97]" />
              </div>
              <div className="space-y-1">
                <p className="text-[28px] font-bold leading-[1.3] text-[#1c1d22]">
                  No Payroll Added Yet!
                </p>
                <p className="text-[20px] leading-[1.4] text-[#8b8d97]">
                  Add More Payrolls Of Employee
                </p>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
};

export default Page;