"use client"

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

export default function JobCardTasksPage({
    params,
}: {
    params: Promise<{ id: string }>
}) {
    const { id: jobCardId } = use(params)

    return (
        <ResourcePage<TasksClient>
            pageTitle="Tasks"
            routeKey={TASK_ROUTES.TASKS}
            getClient={(api) => api.tasks}
            extraParams={{ job_card_id: jobCardId }}
            header={null}
            columns={() => [
                {
                    accessorKey: "title",
                    header: ({ column }) => <ColumnHeader column={column} title="Task" />,
                    cell: ({ row }) => (row.original as any).title || "—",
                },
                {
                    accessorKey: "task_type_name",
                    header: ({ column }) => <ColumnHeader column={column} title="Type" />,
                    cell: ({ row }) => (row.original as any).task_type_name || "—",
                },
                {
                    accessorKey: "section_name",
                    header: ({ column }) => <ColumnHeader column={column} title="Section" />,
                    cell: ({ row }) => (row.original as any).section_name || "—",
                },
                {
                    accessorKey: "due_date",
                    header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
                    cell: ({ row }) => {
                        const val = (row.original as any).due_date
                        return val ? new Date(val).toLocaleDateString() : "—"
                    },
                },
                {
                    accessorKey: "priority",
                    header: ({ column }) => <ColumnHeader column={column} title="Priority" />,
                    cell: ({ row }) => {
                        const value = (row.original as any).priority
                        return value ? <Badge variant="outline">{value}</Badge> : "—"
                    },
                },
                {
                    accessorKey: "status",
                    header: ({ column }) => <ColumnHeader column={column} title="Status" />,
                    cell: ({ row }) => {
                        const value = (row.original as any).status
                        return value ? <Badge>{value}</Badge> : "—"
                    },
                },
            ]}
        />
    )
}