"use client"

import { use } from "react"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { Badge } from "@/shared/components/ui/badge"
import { TIME_SHEET_ROUTES } from "@garage/api"
import type { TimeSheetsClient } from "@garage/api"
import { ClockIcon } from "lucide-react"

const ACTIVITY_VARIANT: Record<string, "default" | "secondary" | "outline"> = {
    general: "secondary",
    order: "default",
    task: "outline",
}

function formatTime(value: unknown) {
    if (!value || typeof value !== "string") return "—"
    return value.length >= 5 ? value.slice(0, 5) : value
}

function formatDate(value: unknown) {
    if (!value || typeof value !== "string") return "—"
    const d = new Date(value)
    return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
}

function formatCost(value: unknown) {
    if (value === null || value === undefined) return "—"
    const n = Number(value)
    if (!Number.isFinite(n)) return "—"
    return n.toFixed(2)
}

export default function EmployeeAttendancePage({ params }: { params: Promise<{ id: string }> }) {
    const { id: employeeId } = use(params)

    return (
        <ResourcePage<TimeSheetsClient>
            pageTitle="Attendance"
            routeKey={TIME_SHEET_ROUTES.INDEX}
            getClient={(api) => api.timeSheets}
            extraParams={{ employee_id: employeeId }}
            header={null}
            statusFilter={{
                statuses: ["general", "order", "task"],
                paramKey: "activity_type",
                allLabel: "All",
            }}
            columns={() => [
                {
                    accessorKey: "date",
                    header: ({ column }) => <ColumnHeader column={column} title="Date" />,
                    cell: ({ row }) => (
                        <div className="flex items-center gap-2">
                            <ClockIcon className="size-4 text-muted-foreground" />
                            <span>{formatDate((row.original as any).date)}</span>
                        </div>
                    ),
                },
                {
                    accessorKey: "clock_in",
                    header: ({ column }) => <ColumnHeader column={column} title="Clock In" />,
                    cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).clock_in)}</span>,
                },
                {
                    accessorKey: "clock_out",
                    header: ({ column }) => <ColumnHeader column={column} title="Clock Out" />,
                    cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).clock_out)}</span>,
                },
                {
                    accessorKey: "duration",
                    header: ({ column }) => <ColumnHeader column={column} title="Duration" />,
                    cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).duration)}</span>,
                },
                {
                    accessorKey: "activity_type",
                    header: ({ column }) => <ColumnHeader column={column} title="Activity" />,
                    cell: ({ row }) => {
                        const type = (row.original as any).activity_type ?? "general"
                        return <Badge variant={ACTIVITY_VARIANT[type] ?? "secondary"}>{type}</Badge>
                    },
                },
                {
                    accessorKey: "calculated_total_cost",
                    header: ({ column }) => <ColumnHeader column={column} title="Cost" />,
                    cell: ({ row }) => formatCost((row.original as any).calculated_total_cost),
                },
                {
                    accessorKey: "note",
                    header: ({ column }) => <ColumnHeader column={column} title="Note" />,
                    cell: ({ row }) => {
                        const v = (row.original as any).note
                        return v ? <span className="text-sm">{v}</span> : "—"
                    },
                },
            ]}
        />
    )
}
