"use client";

import avatarImage from "@/assets/images/avatar.jpeg";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Download,
  MoreVertical,
  Search,
  SlidersHorizontal,
} from "lucide-react";
import Image from "next/image";
import { useMemo, useState } from "react";

type ReportTab = "employee" | "payslip" | "leave";

type EmployeeReportRow = {
  id: string;
  name: string;
  gender: string;
  email: string;
  contactNumber: string;
  department: string;
  joiningDate: string;
};

type UserDetailField = {
  label: string;
  value: string;
};

type PayslipReportRow = {
  id: string;
  name: string;
  employeeId: string;
  paidAmount: string;
  month: string;
  year: string;
};

type LeaveReportRow = {
  id: string;
  name: string;
  leaveType: string;
  numberOfDays: string;
  remainingLeave: string;
  totalLeave: string;
};

const REPORT_TABS: { id: ReportTab; label: string }[] = [
  { id: "employee", label: "Employee Report" },
  { id: "payslip", label: "Payslip Report" },
  { id: "leave", label: "Leave Report" },
];

const EMPLOYEE_REPORT_ROWS: EmployeeReportRow[] = [
  {
    id: "1",
    name: "Janet Adebayo",
    gender: "Female",
    email: "janet.ab18@gmail.com",
    contactNumber: "+92 3145697874",
    department: "Dev Department",
    joiningDate: "28 Feb 2024",
  },
  {
    id: "2",
    name: "Somraj Johnson",
    gender: "Male",
    email: "somjo.12@gmail.com",
    contactNumber: "+92 345698712",
    department: "Finance Department",
    joiningDate: "28 Feb 2024",
  },
  {
    id: "3",
    name: "Francis Doe",
    gender: "Male",
    email: "fdo12@gmail.com",
    contactNumber: "+92 345678945",
    department: "IT Support",
    joiningDate: "21 Feb 2024",
  },
  {
    id: "4",
    name: "Christian Dior",
    gender: "Male",
    email: "christi9@gmail.com",
    contactNumber: "+92 345678945",
    department: "Design Department",
    joiningDate: "18 Feb 2024",
  },
  {
    id: "5",
    name: "Janet Adebayo",
    gender: "Casual Leave",
    email: "10 Feb 2024",
    contactNumber: "+92 345678945",
    department: "IT Support",
    joiningDate: "14 Feb 2024",
  },
  {
    id: "6",
    name: "Francis Doe",
    gender: "Paternity Leave",
    email: "3 Feb 2024",
    contactNumber: "+92 345678945",
    department: "Finance Department",
    joiningDate: "9 Feb 2024",
  },
];

const PAYSLIP_REPORT_ROWS: PayslipReportRow[] = [
  {
    id: "1",
    name: "Janet Adebayo",
    employeeId: "f4d6a51",
    paidAmount: "janet.ab1@gmail.com",
    month: "+92 314569874",
    year: "Deve Department",
  },
  {
    id: "2",
    name: "Samuel Johnson",
    employeeId: "a3c2f11",
    paidAmount: "samjo.12@gmail.com",
    month: "+92 345698712",
    year: "Finance Department",
  },
  {
    id: "3",
    name: "Francis Doe",
    employeeId: "b6a9e45",
    paidAmount: "fdo12@gmail.com",
    month: "+92 345678945",
    year: "IT Support",
  },
  {
    id: "4",
    name: "Christian Dior",
    employeeId: "k2d8r09",
    paidAmount: "christi@gmail.com",
    month: "+92 345678945",
    year: "Design Department",
  },
  {
    id: "5",
    name: "Janet Adebayo",
    employeeId: "m7q4s16",
    paidAmount: "10 Feb 2024",
    month: "+92 345678945",
    year: "IT Support",
  },
  {
    id: "6",
    name: "Francis Doe",
    employeeId: "z9h3p60",
    paidAmount: "3 Feb 2024",
    month: "+92 345678945",
    year: "Finance Department",
  },
];

const LEAVE_REPORT_ROWS: LeaveReportRow[] = [
  {
    id: "1",
    name: "Janet Adebayo",
    leaveType: "Female",
    numberOfDays: "janet.ab18@gmail.com",
    remainingLeave: "+92 314569874",
    totalLeave: "Deve Department",
  },
  {
    id: "2",
    name: "Samuel Johnson",
    leaveType: "Male",
    numberOfDays: "samjo.12@gmail.com",
    remainingLeave: "+92 345698712",
    totalLeave: "Finance Department",
  },
  {
    id: "3",
    name: "Francis Doe",
    leaveType: "Male",
    numberOfDays: "fdo12@gmail.com",
    remainingLeave: "+92 345678945",
    totalLeave: "IT Support",
  },
  {
    id: "4",
    name: "Christian Dior",
    leaveType: "Male",
    numberOfDays: "christi@gmail.com",
    remainingLeave: "+92 345678945",
    totalLeave: "Design Department",
  },
  {
    id: "5",
    name: "Janet Adebayo",
    leaveType: "Casual Leave",
    numberOfDays: "10 Feb 2024",
    remainingLeave: "+92 345678945",
    totalLeave: "IT Support",
  },
  {
    id: "6",
    name: "Francis Doe",
    leaveType: "Paternity Leave",
    numberOfDays: "3 Feb 2024",
    remainingLeave: "+92 345678945",
    totalLeave: "Finance Department",
  },
];

const USER_DETAIL_LEFT: UserDetailField[] = [
  { label: "Employee Name", value: "Janet Adebayo" },
  { label: "Mobile Number", value: "+1 348 065 6506" },
  { label: "Date of Birth", value: "July 14, 1999" },
  { label: "Gender", value: "Female" },
  { label: "Experience", value: "03 Days 04 Month 01 Year" },
  { label: "City", value: "California" },
  { label: "Country", value: "United State" },
];

const USER_DETAIL_RIGHT: UserDetailField[] = [
  { label: "Employee ID", value: "f4d6a51" },
  { label: "Email Address", value: "janet.abayo@gamil.com" },
  { label: "Marital Status", value: "Married" },
  { label: "Nationality", value: "America" },
  { label: "Designation", value: "Design Department" },
  { label: "State", value: "New York" },
  { label: "Zip Code", value: "35624" },
];

export default function Page() {
  const [activeTab, setActiveTab] = useState<ReportTab>("employee");
  const [search, setSearch] = useState("");
  const [selectedEmployee, setSelectedEmployee] = useState<EmployeeReportRow | null>(null);

  const filteredEmployeeRows = useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return EMPLOYEE_REPORT_ROWS;
    return EMPLOYEE_REPORT_ROWS.filter((row) =>
      [
        row.name,
        row.gender,
        row.email,
        row.contactNumber,
        row.department,
        row.joiningDate,
      ].some((field) => field.toLowerCase().includes(q)),
    );
  }, [search]);

  const filteredPayslipRows = useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return PAYSLIP_REPORT_ROWS;
    return PAYSLIP_REPORT_ROWS.filter((row) =>
      [row.name, row.employeeId, row.paidAmount, row.month, row.year].some((field) =>
        field.toLowerCase().includes(q),
      ),
    );
  }, [search]);

  const filteredLeaveRows = useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return LEAVE_REPORT_ROWS;
    return LEAVE_REPORT_ROWS.filter((row) =>
      [row.name, row.leaveType, row.numberOfDays, row.remainingLeave, row.totalLeave].some((field) =>
        field.toLowerCase().includes(q),
      ),
    );
  }, [search]);

  return (
    <div className="min-h-0 space-y-4 bg-[#F4F5FA] p-5 md:p-6">
      <div className="rounded-xl border border-[#EBEEF2] bg-white">
        <div className="border-b border-[#EBEEF2] px-4 pt-1 sm:px-6">
          <nav className="-mb-px flex flex-wrap gap-6" aria-label="Report tabs">
            {REPORT_TABS.map((tab) => {
              const isActive = tab.id === activeTab;
              return (
                <button
                  key={tab.id}
                  type="button"
                  onClick={() => setActiveTab(tab.id)}
                  className={`relative pb-3 pt-2 text-xs font-medium transition-colors sm:text-sm ${
                    isActive ? "text-[#074473]" : "text-[#6B7280] hover:text-[#374151]"
                  }`}
                >
                  {tab.label}
                  {isActive ? (
                    <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-[#074473]" />
                  ) : null}
                </button>
              );
            })}
          </nav>
        </div>

        <div className="space-y-5 p-4 sm:p-6">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <h1 className="text-xl font-bold text-[#1C1D22]">Employee Report</h1>
            <div className="flex flex-wrap items-center gap-2">
              <div className="relative w-full min-w-[200px] sm:w-auto sm:min-w-[230px]">
                <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-[#ABAFB1]" />
                <Input
                  type="search"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  placeholder="Search"
                  className="h-9 rounded-md border-[#E1E2E9] bg-white pl-8 text-xs text-[#383E49] placeholder:text-[#ABAFB1] focus-visible:ring-[#074473]"
                />
              </div>
              <Button
                type="button"
                variant="outline"
                className="h-9 gap-1 rounded-md border-[#E1E2E9] bg-white px-3 text-xs font-medium text-[#8B8D97] hover:bg-[#F8FAFC]"
              >
                <SlidersHorizontal className="size-4" aria-hidden />
                Filters
              </Button>
              <Button
                type="button"
                variant="outline"
                className="h-9 gap-1 rounded-md border-[#E1E2E9] bg-white px-3 text-xs font-medium text-[#8B8D97] hover:bg-[#F8FAFC]"
              >
                <SlidersHorizontal className="size-4" aria-hidden />
                filters
              </Button>
            </div>
          </div>

          <div className="overflow-hidden rounded-md border border-[#EBEEF2]">
            <div className="overflow-x-auto">
              {activeTab === "payslip" ? (
                <table className="w-full min-w-[960px] border-collapse">
                  <thead className="bg-white">
                    <tr className="border-b border-[#EBEEF2]">
                      <th className="w-10 px-3 py-3 text-left">
                        <input
                          type="checkbox"
                          className="size-4 rounded-sm border border-[#B8C2CE] accent-[#074473]"
                          aria-label="Select all rows"
                        />
                      </th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Image</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Employee Name</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Employee ID</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Paid Amount</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Month</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Year</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredPayslipRows.map((row) => (
                      <tr key={row.id} className="border-b border-[#EBEEF2] last:border-b-0">
                        <td className="px-3 py-2">
                          <input
                            type="checkbox"
                            className="size-4 rounded-sm border border-[#B8C2CE] accent-[#074473]"
                            aria-label={`Select ${row.name}`}
                          />
                        </td>
                        <td className="px-3 py-2">
                          <Image
                            src={avatarImage}
                            alt={row.name}
                            width={32}
                            height={32}
                            className="size-8 rounded-full object-cover"
                          />
                        </td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.name}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.employeeId}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.paidAmount}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.month}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.year}</td>
                        <td className="px-3 py-2">
                          <Button
                            type="button"
                            className="h-7 rounded-md bg-[#4C6FFF] px-2.5 text-xs font-medium text-white hover:bg-[#4C6FFF]/90"
                          >
                            <Download className="size-3.5" aria-hidden />
                            Download
                          </Button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              ) : activeTab === "leave" ? (
                <table className="w-full min-w-[960px] border-collapse">
                  <thead className="bg-white">
                    <tr className="border-b border-[#EBEEF2]">
                      <th className="w-10 px-3 py-3 text-left">
                        <input
                          type="checkbox"
                          className="size-4 rounded-sm border border-[#B8C2CE] accent-[#074473]"
                          aria-label="Select all rows"
                        />
                      </th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Image</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Employee Name</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Leave Type</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">No.Of Days</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">
                        Remaining Leave
                      </th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Total Leave</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredLeaveRows.map((row) => (
                      <tr key={row.id} className="border-b border-[#EBEEF2] last:border-b-0">
                        <td className="px-3 py-2">
                          <input
                            type="checkbox"
                            className="size-4 rounded-sm border border-[#B8C2CE] accent-[#074473]"
                            aria-label={`Select ${row.name}`}
                          />
                        </td>
                        <td className="px-3 py-2">
                          <Image
                            src={avatarImage}
                            alt={row.name}
                            width={32}
                            height={32}
                            className="size-8 rounded-full object-cover"
                          />
                        </td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.name}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.leaveType}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.numberOfDays}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.remainingLeave}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.totalLeave}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              ) : (
                <table className="w-full min-w-[960px] border-collapse">
                  <thead className="bg-white">
                    <tr className="border-b border-[#EBEEF2]">
                      <th className="w-10 px-3 py-3 text-left">
                        <input
                          type="checkbox"
                          className="size-4 rounded-sm border border-[#B8C2CE] accent-[#074473]"
                          aria-label="Select all rows"
                        />
                      </th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Image</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Employee Name</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Gender</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Email</th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">
                        Contact Number
                      </th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">
                        Department
                      </th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">
                        Joining Date
                      </th>
                      <th className="px-3 py-3 text-left text-xs font-bold text-[#272833]">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredEmployeeRows.map((row) => (
                      <tr key={row.id} className="border-b border-[#EBEEF2] last:border-b-0">
                        <td className="px-3 py-2">
                          <input
                            type="checkbox"
                            className="size-4 rounded-sm border border-[#B8C2CE] accent-[#074473]"
                            aria-label={`Select ${row.name}`}
                          />
                        </td>
                        <td className="px-3 py-2">
                          <Image
                            src={avatarImage}
                            alt={row.name}
                            width={32}
                            height={32}
                            className="size-8 rounded-full object-cover"
                          />
                        </td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.name}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.gender}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.email}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.contactNumber}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.department}</td>
                        <td className="px-3 py-2 text-xs text-[#1C1D22]">{row.joiningDate}</td>
                        <td className="px-3 py-2">
                          <button
                            type="button"
                            className="inline-flex text-[#16151C] transition-colors hover:text-[#074473]"
                            aria-label={`Open actions for ${row.name}`}
                            onClick={() => setSelectedEmployee(row)}
                          >
                            <MoreVertical className="size-4" />
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          </div>

          <div className="flex items-center justify-between gap-4">
            <Button
              type="button"
              variant="outline"
              className="h-[34px] rounded-md border border-[#E1E2E9] bg-[#FCFCFC] px-5 text-xs font-medium text-[#4F4F4F] hover:bg-[#FCFCFC]"
            >
              Previous
            </Button>
            <p className="text-xs font-medium text-[#ABAFB1]">page 1 of 10</p>
            <Button
              type="button"
              variant="outline"
              className="h-[34px] rounded-md border border-[#E1E2E9] bg-[#FCFCFC] px-5 text-xs font-medium text-[#4F4F4F] hover:bg-[#FCFCFC]"
            >
              Next
            </Button>
          </div>
        </div>
      </div>

      {selectedEmployee ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/35 p-4 backdrop-blur-[1px]">
          <div className="w-full max-w-[980px] rounded-2xl bg-white p-5 shadow-xl sm:p-6 md:p-7">
            <div className="space-y-4">
              <h2 className="text-lg font-bold text-[#1C1D22]">User Details</h2>
              <div className="flex flex-col gap-4 border-b border-[#EEF0F4] pb-4 sm:flex-row sm:items-start sm:justify-between">
                <div className="flex items-center gap-3">
                  <Image
                    src={avatarImage}
                    alt={selectedEmployee.name}
                    width={48}
                    height={48}
                    className="size-12 rounded-xl object-cover"
                  />
                  <div className="space-y-0.5">
                    <p className="text-xl font-semibold leading-tight text-[#2A2F3A]">
                      {selectedEmployee.name}
                    </p>
                    <p className="text-xs text-[#8B8D97]">
                      joining Date:{" "}
                      <span className="font-semibold text-[#2A2F3A]">Feb 03, 2024</span>
                    </p>
                  </div>
                </div>
                <span className="inline-flex h-8 items-center rounded-md border border-[#33B487] bg-[#F0FBF6] px-3 text-sm font-semibold text-[#239A71]">
                  Active
                </span>
              </div>

              <div className="grid gap-6 md:grid-cols-2 md:gap-8">
                <div className="space-y-4">
                  {USER_DETAIL_LEFT.map((field) => (
                    <div key={field.label} className="border-b border-[#EEF0F4] pb-3">
                      <p className="text-xs text-[#8B8D97]">{field.label}</p>
                      <p className="mt-1 text-lg font-semibold text-[#2A2F3A]">{field.value}</p>
                    </div>
                  ))}
                </div>
                <div className="space-y-4">
                  {USER_DETAIL_RIGHT.map((field) => (
                    <div key={field.label} className="border-b border-[#EEF0F4] pb-3">
                      <p className="text-xs text-[#8B8D97]">{field.label}</p>
                      <p className="mt-1 text-lg font-semibold text-[#2A2F3A]">{field.value}</p>
                    </div>
                  ))}
                </div>
              </div>

              <div className="flex items-center justify-center gap-3 pt-2">
                <Button
                  type="button"
                  variant="outline"
                  className="h-10 min-w-[110px] rounded-md border border-[#E1E2E9] bg-white px-5 text-sm font-medium text-[#4F4F4F] hover:bg-[#F9FAFB]"
                  onClick={() => setSelectedEmployee(null)}
                >
                  Cancel
                </Button>
                <Button
                  type="button"
                  className="h-10 min-w-[120px] rounded-md bg-[#074473] px-5 text-sm font-semibold text-white hover:bg-[#074473]/90"
                  onClick={() => window.print()}
                >
                  Print PDF
                </Button>
              </div>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}