"use client"

import { useMemo, useState } from "react"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog"
import { EmployeeForm } from "@/modules/employees/employee-form"
import { EMPLOYEE_ROUTES } from "@garage/api"
import type { EmployeesClient } from "@garage/api"
import { Avatar, AvatarFallback } from "@/shared/components/ui/avatar"
import { Badge } from "@/shared/components/ui/badge"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/shared/components/ui/select"
import { useRouter } from "next/navigation"
import { formatEnum } from "@/shared/utils/formatters"

const TYPE_OPTIONS = [
    { value: "all", label: "All types" },
    { value: "employee", label: "Employee" },
    { value: "sales_person", label: "Sales Person" },
]

function initialsOf(first?: string | null, last?: string | null) {
    const f = (first ?? "").trim()[0] ?? ""
    const l = (last ?? "").trim()[0] ?? ""
    return (f + l).toUpperCase() || "?"
}

export default function EmployeesPage() {
    const router = useRouter()
    const [typeFilter, setTypeFilter] = useState<string>("all")

    const extraParams = useMemo(() => {
        if (typeFilter === "all") return undefined
        return { type: typeFilter }
    }, [typeFilter])

    return (
        <ResourcePage<EmployeesClient>
            pageTitle="Employees"
            routeKey={EMPLOYEE_ROUTES.INDEX}
            searchable
            searchPlaceholder="Search employees..."
            statusFilter={{ statuses: ["active", "inactive"] }}
            extraParams={extraParams}
            getClient={(api) => api.employees}
            onRowClick={(row) => router.push(`/productivity/employees/${(row as any).id}`)}
            tableHeader={() => (
                <div className="flex items-center gap-2">
                    <Select value={typeFilter} onValueChange={setTypeFilter}>
                        <SelectTrigger className="w-44">
                            <SelectValue placeholder="All types" />
                        </SelectTrigger>
                        <SelectContent>
                            {TYPE_OPTIONS.map((o) => (
                                <SelectItem key={o.value} value={o.value}>
                                    {o.label}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
            )}
            headerProps={({ selectedItem, invalidateQuery }) => ({
                actions: (
                    <FormDialog title="Employee">
                        {(resourceId) => (
                            <EmployeeForm
                                resourceId={resourceId}
                                initialData={selectedItem}
                                onSuccess={invalidateQuery}
                            />
                        )}
                    </FormDialog>
                ),
            })}
            columns={({ actionsColumn }) => [
                {
                    accessorKey: "first_name",
                    header: ({ column }) => <ColumnHeader column={column} title="Name" />,
                    cell: ({ row }) => {
                        const r = row.original as any
                        const fullName = `${r.first_name ?? ""} ${r.last_name ?? ""}`.trim() || "—"
                        return (
                            <div className="flex items-center gap-2">
                                <Avatar size="sm">
                                    <AvatarFallback>{initialsOf(r.first_name, r.last_name)}</AvatarFallback>
                                </Avatar>
                                <span className="font-medium">{fullName}</span>
                            </div>
                        )
                    },
                },
                {
                    accessorKey: "email",
                    header: ({ column }) => <ColumnHeader column={column} title="Email" />,
                },
                {
                    accessorKey: "phone",
                    header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
                    cell: ({ row }) => (row.original as any).phone ?? "—",
                },
                {
                    accessorKey: "type",
                    header: ({ column }) => <ColumnHeader column={column} title="Type" />,
                    cell: ({ row }) => {
                        const t = (row.original as any).type
                        if (!t) return "—"
                        return <Badge variant="outline">{t === "sales_person" ? "Sales Person" : "Employee"}</Badge>
                    },
                },
                {
                    accessorKey: "department",
                    header: ({ column }) => <ColumnHeader column={column} title="Department" />,
                    cell: ({ row }) => {
                        const d = (row.original as any).department?.name
                        return d ? <Badge variant="secondary">{d}</Badge> : "—"
                    },
                },
                {
                    accessorKey: "role",
                    header: ({ column }) => <ColumnHeader column={column} title="Role" />,
                    cell: ({ row }) => {
                        const r = (row.original as any).role?.name
                        return r ? <Badge variant="secondary">{r}</Badge> : "—"
                    },
                },
                {
                    accessorKey: "status",
                    header: ({ column }) => <ColumnHeader column={column} title="Status" />,
                    cell: ({ row }) => {
                        const status = row.original.status
                        return (
                            <span className={status === "active" ? "text-green-600" : "text-red-600"}>
                                {formatEnum(status)}
                            </span>
                        )
                    },
                },
                actionsColumn(),
            ]}
        />
    )
}