---
import ComponentLayout from "../layouts/ComponentLayout.astro";
import Table from "../components/Table.astro";

export const columns = [
    { key: "id", label: "ID", sortable: true, searchable: true },
    { key: "name", label: "Name", searchable: true, sortable: true },
    { key: "email", label: "Email", searchable: true, sortable: true },
    { key: "role", label: "Role", sortable: true },
    { key: "status", label: "Status", sortable: true },
    { key: "created_at", label: "Created At", sortable: true },
    { key: "actions", label: "Actions" },
];

const data = [
    {
        id: 1,
        name: "Ajay Ghanwat",
        email: "ajay.gh@example.com",
        role: "Admin",
        status: "Active",
        created_at: "2025-10-10 09:32",
        avatar: "https://i.pravatar.cc/40?img=1",
    },
    {
        id: 2,
        name: "Rahul Sharma",
        email: "rahul.sharma@example.com",
        role: "Member",
        status: "Pending",
        created_at: "2025-10-15 11:42",
        avatar: "https://i.pravatar.cc/40?img=2",
    },
    {
        id: 3,
        name: "Sophia Patel",
        email: "sophia.patel@example.com",
        role: "Manager",
        status: "Active",
        created_at: "2025-10-11 15:20",
        avatar: "https://i.pravatar.cc/40?img=3",
    },
    {
        id: 4,
        name: "Liam Brown",
        email: "liam.brown@example.com",
        role: "Member",
        status: "Suspended",
        created_at: "2025-10-12 08:45",
        avatar: "https://i.pravatar.cc/40?img=4",
    },
    {
        id: 5,
        name: "Olivia Smith",
        email: "olivia.smith@example.com",
        role: "Admin",
        status: "Active",
        created_at: "2025-10-09 18:12",
        avatar: "https://i.pravatar.cc/40?img=5",
    },
    {
        id: 6,
        name: "Noah Wilson",
        email: "noah.wilson@example.com",
        role: "Member",
        status: "Pending",
        created_at: "2025-10-13 10:18",
        avatar: "https://i.pravatar.cc/40?img=6",
    },
    {
        id: 7,
        name: "Emma Johnson",
        email: "emma.johnson@example.com",
        role: "Member",
        status: "Active",
        created_at: "2025-10-14 13:55",
        avatar: "https://i.pravatar.cc/40?img=7",
    },
    {
        id: 8,
        name: "William Lee",
        email: "william.lee@example.com",
        role: "Manager",
        status: "Inactive",
        created_at: "2025-10-12 17:44",
        avatar: "https://i.pravatar.cc/40?img=8",
    },
    {
        id: 9,
        name: "Isabella Taylor",
        email: "isabella.taylor@example.com",
        role: "Member",
        status: "Active",
        created_at: "2025-10-10 07:31",
        avatar: "https://i.pravatar.cc/40?img=9",
    },
    {
        id: 10,
        name: "Ethan Martinez",
        email: "ethan.martinez@example.com",
        role: "Admin",
        status: "Suspended",
        created_at: "2025-10-08 19:22",
        avatar: "https://i.pravatar.cc/40?img=10",
    },
    {
        id: 11,
        name: "Mia Thompson",
        email: "mia.thompson@example.com",
        role: "Member",
        status: "Active",
        created_at: "2025-10-09 09:45",
        avatar: "https://i.pravatar.cc/40?img=11",
    },
    {
        id: 12,
        name: "Alexander Davis",
        email: "alex.davis@example.com",
        role: "Manager",
        status: "Pending",
        created_at: "2025-10-15 14:10",
        avatar: "https://i.pravatar.cc/40?img=12",
    },
    {
        id: 13,
        name: "Charlotte Moore",
        email: "charlotte.moore@example.com",
        role: "Member",
        status: "Active",
        created_at: "2025-10-14 10:01",
        avatar: "https://i.pravatar.cc/40?img=13",
    },
    {
        id: 14,
        name: "Benjamin Anderson",
        email: "benjamin.anderson@example.com",
        role: "Member",
        status: "Suspended",
        created_at: "2025-10-08 11:32",
        avatar: "https://i.pravatar.cc/40?img=14",
    },
    {
        id: 15,
        name: "Amelia Harris",
        email: "amelia.harris@example.com",
        role: "Manager",
        status: "Active",
        created_at: "2025-10-13 08:50",
        avatar: "https://i.pravatar.cc/40?img=15",
    },
    {
        id: 16,
        name: "Lucas White",
        email: "lucas.white@example.com",
        role: "Member",
        status: "Active",
        created_at: "2025-10-10 17:10",
        avatar: "https://i.pravatar.cc/40?img=16",
    },
    {
        id: 17,
        name: "Harper Lewis",
        email: "harper.lewis@example.com",
        role: "Member",
        status: "Pending",
        created_at: "2025-10-14 09:00",
        avatar: "https://i.pravatar.cc/40?img=17",
    },
    {
        id: 18,
        name: "Evelyn Hall",
        email: "evelyn.hall@example.com",
        role: "Manager",
        status: "Active",
        created_at: "2025-10-11 16:42",
        avatar: "https://i.pravatar.cc/40?img=18",
    },
    {
        id: 19,
        name: "Henry Allen",
        email: "henry.allen@example.com",
        role: "Member",
        status: "Inactive",
        created_at: "2025-10-09 13:25",
        avatar: "https://i.pravatar.cc/40?img=19",
    },
    {
        id: 20,
        name: "Ava Scott",
        email: "ava.scott@example.com",
        role: "Admin",
        status: "Active",
        created_at: "2025-10-15 15:33",
        avatar: "https://i.pravatar.cc/40?img=20",
    },
    {
        id: 21,
        name: "Michael Young",
        email: "michael.young@example.com",
        role: "Member",
        status: "Pending",
        created_at: "2025-10-13 10:20",
        avatar: "https://i.pravatar.cc/40?img=21",
    },
    {
        id: 22,
        name: "Ella King",
        email: "ella.king@example.com",
        role: "Manager",
        status: "Active",
        created_at: "2025-10-14 08:45",
        avatar: "https://i.pravatar.cc/40?img=22",
    },
    {
        id: 23,
        name: "Daniel Clark",
        email: "daniel.clark@example.com",
        role: "Member",
        status: "Active",
        created_at: "2025-10-12 12:05",
        avatar: "https://i.pravatar.cc/40?img=23",
    },
    {
        id: 24,
        name: "Luna Wright",
        email: "luna.wright@example.com",
        role: "Member",
        status: "Pending",
        created_at: "2025-10-15 11:18",
        avatar: "https://i.pravatar.cc/40?img=24",
    },
    {
        id: 25,
        name: "Jack Turner",
        email: "jack.turner@example.com",
        role: "Admin",
        status: "Active",
        created_at: "2025-10-13 09:50",
        avatar: "https://i.pravatar.cc/40?img=25",
    },
];

const studentData = [
    { id: 1, name: "Alice", age: 24, role: "Engineer" },
    { id: 2, name: "Bob", age: 29, role: "Designer" },
    { id: 3, name: "Carol", age: 35, role: "Manager" },
];

const studentColumns = [
    { key: "name", label: "Name", sortable: true },
    { key: "age", label: "Age", sortable: true, align: "right" },
    { key: "role", label: "Role" },
];
---

<ComponentLayout>
    <div class="wr:p-4">
        <Table
            columns={columns}
            data={[]}
            columnsRendererKey="columnsRenderer"
        />

        <br />

        <Table
            columns={columns}
            data={data}
            columnsRendererKey="columnsRenderer"
            hideHeader={true}
        />

        <br />

        <Table
            columns={columns}
            fetchData="fetchData"
            columnsRendererKey="columnsRenderer"
        />

        <br />

        <Table
            data={studentData}
            columns={studentColumns}
            search
            pagignations
            classInfos="classNames"
            tableClassNames="wr:rounded-2xl wr:border-2 wr:border-red-500"
            rowClick="checkDetails"
        />
    </div>
</ComponentLayout>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const buttons = document.querySelectorAll(
            "button[id^='view-'], button[id^='edit-'], button[id^='delete-']",
        );

        buttons.forEach((button) => {
            const id = button.getAttribute("data-id");

            if (button.id.startsWith("view-")) {
                button.addEventListener("click", () => {
                    console.log(`👁️ View user ${id}`);
                });
            }

            if (button.id.startsWith("edit-")) {
                button.addEventListener("click", () => {
                    console.log(`✏️ Edit user ${id}`);
                });
            }

            if (button.id.startsWith("delete-")) {
                button.addEventListener("click", () => {
                    if (
                        confirm(`Are you sure you want to delete user ${id}?`)
                    ) {
                        console.log(`🗑️ Deleted user ${id}`);
                    }
                });
            }
        });
    });

    window.columnsRenderer = {
        name: (v: any, row: any) => `
    <div class="wr:flex wr:items-center wr:gap-2">
      <img src="${row.avatar}" alt="${v}" class="wr:w-8 wr:h-8 wr:rounded-full" />
      <span class="wr:font-medium">${v}</span>
    </div>
  `,

        role: (v: string) => `
    <span class="wr:rounded-full wr:px-2 wr:py-1 wr:text-xs ${
        v === "Admin"
            ? "wr:bg-indigo-100 wr:text-indigo-700"
            : v === "Owner"
              ? "wr:bg-yellow-100 wr:text-yellow-700"
              : "wr:bg-gray-100 wr:text-gray-600"
    }">${v}</span>
  `,

        status: (v: string) => `
    <span class="wr:flex wr:items-center wr:gap-1 wr:font-medium">
      <span class="wr:w-2 wr:h-2 wr:rounded-full ${
          v === "Active"
              ? "wr:bg-green-500"
              : v === "Inactive"
                ? "wr:bg-red-500"
                : "wr:bg-yellow-500"
      }"></span>
      ${v}
    </span>
  `,

        actions: (v: any, row: any) => `
    <div class="wr:flex wr:gap-2 wr:justify-end">
      <button id="view-${row.id}" data-id="${row.id}" class="wr:px-2 wr:py-1 wr:bg-blue-500 wr:text-white wr:rounded wr:hover:bg-blue-600">View</button>
      <button id="edit-${row.id}" data-id="${row.id}" class="wr:px-2 wr:py-1 wr:bg-amber-500 wr:text-white wr:rounded wr:hover:bg-amber-600">Edit</button>
      <button id="delete-${row.id}" data-id="${row.id}" class="wr:px-2 wr:py-1 wr:bg-red-500 wr:text-white wr:rounded wr:hover:bg-red-600">Delete</button>
    </div>
  `,
    };

    window.fetchData = ({
        page,
        pageSize,
        sortKey,
        sortOrder,
        search,
    }: {
        page: number;
        pageSize: number;
        sortKey?: string | null;
        sortOrder?: "asc" | "desc";
        search?: string;
    }) => {
        // 🧪 Generate 100 fake users
        const demoData = Array.from({ length: 100 }).map((_, i) => ({
            id: i + 1,
            name: `User ${i + 1}`,
            avatar: `https://i.pravatar.cc/40?img=${i + 1}`,
            email: `user${i + 1}@example.com`,
            role: ["Admin", "Manager", "Member"][i % 3],
            status: ["Active", "Pending", "Suspended"][i % 3],
            created_at: new Date(
                2025,
                0,
                1 + (i % 28),
                12,
                i % 60,
            ).toLocaleString(),
        }));

        // 🔍 Searching
        let filtered = demoData;
        if (search && search.trim() !== "") {
            const lower = search.toLowerCase();
            filtered = demoData.filter((row) =>
                Object.values(row).some((val) =>
                    String(val).toLowerCase().includes(lower),
                ),
            );
        }

        // 🧭 Sorting
        if (sortKey) {
            filtered.sort((a, b) => {
                const aVal = String(a[sortKey as keyof typeof a]);
                const bVal = String(b[sortKey as keyof typeof b]);
                if (aVal < bVal) return sortOrder === "asc" ? -1 : 1;
                if (aVal > bVal) return sortOrder === "asc" ? 1 : -1;
                return 0;
            });
        }

        // 📄 Pagination
        const total = filtered.length;
        const start = (page - 1) * pageSize;
        const end = start + pageSize;
        const pageData = filtered.slice(start, end);

        // ✅ Return object data, not HTML
        return {
            data: pageData,
            total,
        };
    };

    window.classNames = {
        row: (_row: any, idx: number) => ({
            "wr:!bg-gray-50 wr:!text-black": _row.role === "Engineer",
        }),

        column: (col: any) =>
            col.key === "age"
                ? "wr:text-right wr:font-bold wr:bg-yellow-100 wr:text-black"
                : "",

        cell: ({ value, col }: { value: any; col: any }) =>
            typeof value === "number" && col.key === "age" && value > 30
                ? "wr:text-green-600"
                : "",
    };

    window.checkDetails = (row: any) => {
        alert(
            `Student Details:\n\nName: ${row.name}\nAge: ${row.age}\nRole: ${row.role}`,
        );
    };
</script>