import { ColumnDef } from "@tanstack/react-table";
import { Button } from '@/components/ui/button';
import { ClassIcon } from '@/components/game/class-icon';
import { CultivationBadge } from '@/components/game/cultivation-badge';
import { ArrowUpDown, Eye, Ban, Mail } from "lucide-react";
import { router } from '@inertiajs/react';
import type { Character } from '@/types/character';

export const characterColumns: ColumnDef<Character>[] = [
    {
        accessorKey: "id",
        header: ({ column }) => (
            <div className="text-center">
                <Button
                    variant="ghost"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Role ID
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            </div>
        ),
        cell: ({ row }) => (
            <div className="text-center font-mono font-semibold">{row.getValue("id")}</div>
        ),
    },
    {
        accessorKey: "name",
        header: ({ column }) => (
            <div className="text-center">
                <Button
                    variant="ghost"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Character Name
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            </div>
        ),
        cell: ({ row }) => {
            const character = row.original;
            return (
                <div className="text-center font-medium">
                    <button
                        onClick={() => router.visit(route('admin.manage-characters.show', character.id))}
                        className="text-primary hover:underline cursor-pointer"
                    >
                        {row.getValue("name")}
                    </button>
                </div>
            );
        },
    },
    {
        accessorKey: "level",
        header: ({ column }) => (
            <div className="text-center">
                <Button
                    variant="ghost"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Level
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            </div>
        ),
        cell: ({ row }) => {
            const level = row.getValue("level") as number;
            return <div className="text-center font-mono">{level}</div>;
        },
    },
    {
        accessorKey: "level2",
        header: ({ column }) => (
            <div className="text-center">
                <Button
                    variant="ghost"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Cultivation
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            </div>
        ),
        cell: ({ row }) => {
            const level2 = row.getValue("level2") as number;
            return <div className="text-center"><CultivationBadge level2={level2} /></div>;
        },
    },
    {
        accessorKey: "class",
        header: () => <div className="text-center">Class</div>,
        cell: ({ row }) => {
            const classId = row.getValue("class") as number;
            return <div className="flex justify-center"><ClassIcon classId={classId} showName size="sm" /></div>;
        },
    },
    {
        accessorKey: "faction_name",
        header: () => <div className="text-center">Faction</div>,
        cell: ({ row }) => {
            const factionName = row.getValue("faction_name") as string | null;
            const character = row.original;
            return (
                <div className="text-center">
                    {factionName && character.faction_id ? (
                        <button
                            onClick={() => router.visit(route('admin.manage-factions.show', character.faction_id))}
                            className="text-primary hover:underline cursor-pointer text-sm"
                        >
                            {factionName}
                        </button>
                    ) : (
                        <span className="text-muted-foreground text-sm">-</span>
                    )}
                </div>
            );
        },
    },
    {
        id: "actions",
        header: () => <div className="text-center">Action</div>,
        cell: ({ row }) => {
            const character = row.original;
            return (
                <div className="flex items-center justify-center gap-1">
                    <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8"
                        onClick={() => router.visit(route('admin.manage-characters.show', character.id))}
                        title="View Details"
                    >
                        <Eye className="h-4 w-4" />
                    </Button>
                    <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8 text-destructive hover:text-destructive"
                        title="Ban Character"
                    >
                        <Ban className="h-4 w-4" />
                    </Button>
                    <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8"
                        title="Send Mail"
                    >
                        <Mail className="h-4 w-4" />
                    </Button>
                </div>
            );
        },
    },
];