import AppLayout from '@/layouts/app-layout';
import { Head, router, Link } from '@inertiajs/react';
import Table from '@/components/Table';
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
    CardDescription
} from "@/components/ui/card"
import { EyeIcon } from 'lucide-react';
import { Button, buttonVariants } from '@/components/ui/button';

interface Survey {
    id: number;
    title: string;
    is_active: number;
    type: string;
    created_at: string;
}

interface PaginatedSurveys {
    data: Survey[];
    current_page: number;
    per_page: number;
    total: number;
}

interface Props {
    surveys: PaginatedSurveys;
}

const columns = [
    { label: 'Title', key: 'title', sortable: true },
    { label: 'Status', key: 'is_active', sortable: true },
    { label: 'Type', key: 'type', sortable: true },
    { label: 'Actions', key: 'actions' },
];

export default function Index({ surveys }: Props) {
    const queryParams = new URLSearchParams(window.location.search);
    const search = queryParams.get('search') || '';

    return (
        <AppLayout breadcrumbs={[{ title: 'Survey Answers Lists', href: route('survey_answer.index') }]}>
            <Head title="Survey Answers Selection" />

            <div className="m-5 flex flex-col gap-5">
                <Card>
                    <CardHeader>
                        <div className="flex items-center justify-between">
                            <h2 className="text-xl font-semibold text-gray-800 dark:text-white">
                                Select a Survey to View Analytics
                            </h2>
                        </div>
                    </CardHeader>
                    <CardContent>
                        <Table<Survey>
                            data={surveys.data}
                            total={surveys.total}
                            currentPage={surveys.current_page}
                            rowsPerPage={surveys.per_page}
                            columns={columns}
                            searchableKeys={['title']}
                            renderCell={(key, value, row) => {
                                if (key === 'is_active') {
                                    return value ? (
                                        <span className="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                            Active
                                        </span>
                                    ) : (
                                        <span className="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                                            Inactive
                                        </span>
                                    );
                                }

                                if (key === 'actions') {
                                    return (
                                        <Link
                                            href={route('survey_answer.show', { survey_answer: row.id })}
                                            className={buttonVariants({ variant: 'default', size: 'sm' })}
                                        >
                                            <EyeIcon size={16} className="mr-2" /> View Analytics
                                        </Link>
                                    );
                                }

                                return value;
                            }}
                            onPageChange={(page) => {
                                const params = Object.fromEntries(new URLSearchParams(window.location.search).entries());
                                router.get(route('survey_answer.index'), {
                                    ...params,
                                    page,
                                }, { preserveState: true, replace: true });
                            }}
                            onPerPageChange={(perPage) => {
                                const params = Object.fromEntries(new URLSearchParams(window.location.search).entries());
                                router.get(route('survey_answer.index'), {
                                    ...params,
                                    page: 1,
                                    per_page: perPage,
                                }, { preserveState: true, replace: true });
                            }}
                            onSearchChange={(searchVal) => {
                                const params = Object.fromEntries(new URLSearchParams(window.location.search).entries());
                                if (searchVal) {
                                    params.search = searchVal;
                                } else {
                                    delete params.search;
                                }
                                router.get(route('survey_answer.index'), {
                                    ...params,
                                    page: 1,
                                }, { preserveState: true, replace: true });
                            }}
                            searchValue={search}
                        />
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}