"use client";

import avatarImage from "@/assets/images/avatar.jpeg";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import { ArrowLeft, CalendarDays, ChevronDown, Filter, MoreVertical, Search } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useMemo, useState } from "react";

type AttendanceStatus = "On Time" | "Late";
type Row = { id: string; name: string; designation: string; type: "Office" | "Remote"; status: AttendanceStatus };

const SEED: Row[] = [
  { id: "1", name: "Jacob Jones", designation: "Team Lead - Design", type: "Office", status: "On Time" },
  { id: "2", name: "Leaise Watson", designation: "Web Designer", type: "Office", status: "Late" },
  { id: "3", name: "Leslie Alexander", designation: "Marketing Coordinator", type: "Office", status: "On Time" },
  { id: "4", name: "Christian Dior", designation: "Python Developer", type: "Remote", status: "On Time" },
  { id: "5", name: "Jenny Wilson", designation: "React JS Developer", type: "Office", status: "Late" },
  { id: "6", name: "Ronald Richard", designation: "Data Analyst", type: "Office", status: "On Time" },
];

export default function Page({ params }: { params: { app: string } }) {
  const { app } = params;
  const [search, setSearch] = useState("");
  const [rows, setRows] = useState<Row[]>(SEED);
  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return rows;
    return rows.filter((r) => [r.name, r.designation, r.type, r.status].some((f) => f.toLowerCase().includes(q)));
  }, [rows, search]);

  return (
    <div className="space-y-4">
      <div className="mb-2 flex items-center gap-2.5">
        <Link href={`/${app}/dashboard`} className="rounded bg-white p-2 text-[#383E49]"><ArrowLeft className="size-4" /></Link>
        <h1 className="text-[30px] font-semibold leading-none text-[#272833]">All Attendance Information</h1>
      </div>
      <Card className="border-[#EBEEF2]">
        <CardContent className="space-y-3 p-4">
          <div className="flex flex-wrap items-center justify-between gap-2">
            <h2 className="text-[27px] font-semibold text-[#272833]">Attendance</h2>
            <div className="flex items-center gap-2">
              <div className="relative">
                <Search className="absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-[#9AA1AB]" />
                <Input className="h-8 w-[170px] bg-white pl-7 text-[11px]" placeholder="Search" value={search} onChange={(e) => setSearch(e.target.value)} />
              </div>
              <Button variant="outline" className="h-8 gap-1 bg-white px-3 text-[11px]"><Filter className="size-3.5" /> Filters</Button>
              <Button variant="outline" className="h-8 gap-1 bg-white px-3 text-[11px]"><CalendarDays className="size-3.5" /> filrs</Button>
            </div>
          </div>
          <div className="overflow-x-auto rounded-lg border border-[#EBEEF2]">
            <table className="min-w-[980px] w-full border-collapse">
              <thead><tr className="bg-[#FAFBFD] text-left">
                <th className="px-4 py-3 text-[12px] font-semibold text-[#272833]"><input type="checkbox" /></th>
                <th className="px-3 py-3 text-[12px] font-semibold text-[#272833]">Image</th>
                <th className="px-3 py-3 text-[12px] font-semibold text-[#272833]">Name</th>
                <th className="px-3 py-3 text-[12px] font-semibold text-[#272833]">Designation</th>
                <th className="px-3 py-3 text-[12px] font-semibold text-[#272833]">Type</th>
                <th className="px-3 py-3 text-[12px] font-semibold text-[#272833]">Status</th>
                <th className="px-3 py-3 text-[12px] font-semibold text-[#272833]">Action</th>
              </tr></thead>
              <tbody>
                {filtered.map((row) => (
                  <tr key={row.id} className="border-t border-[#EEF1F4]">
                    <td className="px-4 py-2.5"><input type="checkbox" /></td>
                    <td className="px-3 py-2.5"><Image src={avatarImage} alt={row.name} width={34} height={34} className="size-[34px] rounded object-cover" /></td>
                    <td className="px-3 py-2.5 text-[12px] font-medium text-[#272833]">{row.name}</td>
                    <td className="px-3 py-2.5 text-[12px] text-[#272833]">{row.designation}</td>
                    <td className="px-3 py-2.5 text-[12px] text-[#272833]">{row.type}</td>
                    <td className="px-3 py-2.5">
                      <label className={cn("inline-flex h-7 min-w-[92px] items-center justify-between rounded border px-2 text-[11px] font-medium", row.status === "On Time" ? "border-[#22C55E] text-[#22C55E]" : "border-[#EF4444] text-[#EF4444]")}>
                        <select value={row.status} onChange={(e) => setRows((prev) => prev.map((r) => r.id === row.id ? { ...r, status: e.target.value as AttendanceStatus } : r))} className="w-full appearance-none bg-transparent pr-3 text-[11px] outline-none">
                          <option value="On Time">On Time</option><option value="Late">Late</option>
                        </select>
                        <ChevronDown className="size-3.5" />
                      </label>
                    </td>
                    <td className="px-3 py-2.5"><Link href={`/${app}/attendance/${row.id}`} className="inline-flex text-[#272833]"><MoreVertical className="size-4" /></Link></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="flex items-center justify-between">
            <Button variant="outline" className="h-8 bg-white px-4 text-[11px]">Previous</Button>
            <p className="text-[11px] text-[#8B8D97]">page 1 of 10</p>
            <Button variant="outline" className="h-8 bg-white px-4 text-[11px]">Next</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}