"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 { ArrowLeft, CalendarDays, Filter, Search } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

const rows = [
  ["1", "Dec 25, 2024", "09.50 AM", "06.10 PM", "08 hrs 50 min", "1 hrs", "0"],
  ["2", "Dec 24, 2024", "09.50 AM", "06.50 PM", "09 hrs", "1 hrs", "0"],
  ["3", "Dec 23, 2024", "09.50 AM", "06.35 PM", "08 hrs 15 min", "1 hrs", "0"],
  ["4", "Dec 22, 2024", "09.50 AM", "06.12 PM", "08 hrs 38 min", "1 hrs", "0"],
  ["5", "Dec 21, 2024", "09.50 AM", "06.18 PM", "08 hrs 32 min", "1 hrs", "0"],
  ["6", "Dec 20, 2024", "09.50 AM", "06.39 PM", "08 hrs 11 min", "1 hrs", "0"],
];

export default function Page({ params }: { params: { app: string; id: string } }) {
  const { app } = params;
  return (
    <div className="space-y-4">
      <div className="mb-2 flex items-center gap-2.5">
        <Link href={`/${app}/attendance`} className="rounded bg-white p-2 text-[#383E49]"><ArrowLeft className="size-4" /></Link>
        <h1 className="text-[30px] font-semibold leading-none text-[#272833]">Janet Adebayo Attendance</h1>
      </div>

      <Card className="border-[#EBEEF2]"><CardContent className="flex items-center justify-between p-3">
        <div className="flex items-center gap-2"><Image src={avatarImage} alt="" className="size-10 rounded object-cover" /><div><p className="text-[12px] font-medium text-[#272833]">Janet Adebayo</p><p className="text-[11px] text-[#8B8D97]">Web Designer</p></div></div>
        <span className="inline-flex h-7 min-w-[74px] items-center justify-center rounded border border-[#EF4444] px-3 text-[11px] font-medium text-[#EF4444]">Late</span>
      </CardContent></Card>

      <div className="grid gap-4 lg:grid-cols-3">
        <Card className="border-[#EBEEF2]"><CardContent className="space-y-3 p-4">
          <div className="flex items-center gap-1"><h3 className="text-[24px] font-semibold text-[#272833]">Timesheet</h3><p className="text-[12px] text-[#8B8D97]">11 Mar 2019</p></div>
          <div className="rounded border border-[#EEF1F4] bg-[#F8FAFD] p-3"><p className="text-[12px] font-medium text-[#272833]">Punch In at</p><p className="text-[11px] text-[#8B8D97]">Wed, 11th Mar 2019 10.00 AM</p></div>
          <div className="mx-auto flex aspect-square w-[180px] items-center justify-center rounded-full border-4 border-[#E7ECF2] text-[23px] font-semibold text-[#272833]">3.45 hrs</div>
          <div className="grid grid-cols-2 gap-2">
            <div className="rounded border border-[#EEF1F4] bg-[#F8FAFD] p-2 text-center"><p className="text-[11px] text-[#8B8D97]">Break</p><p className="text-[12px] font-semibold text-[#272833]">1.21 hrs</p></div>
            <div className="rounded border border-[#EEF1F4] bg-[#F8FAFD] p-2 text-center"><p className="text-[11px] text-[#8B8D97]">Overtime</p><p className="text-[12px] font-semibold text-[#272833]">3 hrs</p></div>
          </div>
        </CardContent></Card>

        <Card className="border-[#EBEEF2]"><CardContent className="space-y-2 p-4">
          <h3 className="text-[24px] font-semibold text-[#272833]">Statics</h3>
          {[
            ["Today", "3.45", "8 hrs", "#F59E0B", 43],
            ["This Week", "28", "40 hrs", "#F59E0B", 70],
            ["This Month", "90", "160 hrs", "#22C55E", 56],
            ["Remaining", "90", "160 hrs", "#F43F5E", 56],
            ["Overtime", "4", "", "#0EA5E9", 20],
          ].map(([label, current, total, color, width]) => (
            <div key={String(label)} className="rounded border border-[#EEF1F4] p-2">
              <div className="mb-1 flex items-center justify-between text-[12px]"><p>{label}</p><p><span className="font-semibold">{current}</span>{total ? ` / ${total}` : ""}</p></div>
              <div className="h-1.5 rounded bg-[#ECEFF3]"><div className="h-full rounded" style={{ width: `${width}%`, backgroundColor: String(color) }} /></div>
            </div>
          ))}
        </CardContent></Card>

        <Card className="border-[#EBEEF2]"><CardContent className="space-y-2 p-4">
          <div className="flex items-center justify-between"><h3 className="text-[24px] font-semibold text-[#272833]">Activity</h3><button className="rounded border border-[#E7ECF2] bg-white px-3 py-1 text-[11px] text-[#545D69]">Today ▾</button></div>
          {[
            ["Punch In at", "09:50 AM."],
            ["Punch Out at", "11:10 AM."],
            ["Punch In at", "11:15 AM."],
            ["Punch Out at", "1:13 PM."],
            ["Punch In at", "2:00 PM."],
            ["Punch Out at", "6:10 PM."],
          ].map(([title, time], i) => (
            <div key={`${title}-${i}`} className="flex gap-3">
              <div className="flex flex-col items-center"><span className="mt-1 size-2 rounded-full bg-[#F59E0B]" /><span className="h-8 w-px bg-[#E5E7EB]" /></div>
              <div><p className="text-[12px] font-medium text-[#272833]">{title}</p><p className="text-[11px] text-[#8B8D97]">{time}</p></div>
            </div>
          ))}
        </CardContent></Card>
      </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" /></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-[960px] w-full border-collapse">
            <thead><tr className="bg-[#FAFBFD] text-left">{["#", "Date", "Punch In", "Punch Out", "Production", "Break", "Overtime"].map((h) => <th key={h} className="px-3 py-3 text-[12px] font-semibold text-[#272833]">{h}</th>)}</tr></thead>
            <tbody>{rows.map((r) => <tr key={r[0]} className="border-t border-[#EEF1F4]">{r.map((c, i) => <td key={`${r[0]}-${i}`} className="px-3 py-2.5 text-[12px] text-[#272833]">{c}</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>
  );
}