import { CheckCircle2, Plus } from 'lucide-react';

import { TaskPriorityBadge } from '@/components/TaskPriorityBadge';
import { TaskStatusBadge } from '@/components/TaskStatusBadge';
import { Button } from '@/components/ui/button';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { cn, formatDate } from '@/lib/utils';
import type { MyTask } from '@/types/my-task';

interface MyTasksTableProps {
    tasks: MyTask[];
    onViewTask: (taskId: number) => void;
    hasActiveFilters: boolean;
    onClearFilters: () => void;
    onCreateTask: () => void;
    /** Nomor baris pertama di halaman ini — dari `pagination.from`, supaya
     *  penomorannya menyambung antar halaman. */
    startNumber: number;
}

function getDueDateClassName(task: MyTask) {
    if (!task.due_date) {
        return 'text-muted-foreground';
    }

    if (task.is_overdue) {
        return 'font-semibold text-red-600 dark:text-red-400';
    }

    return 'text-muted-foreground';
}

function MyTaskRow({
    task,
    number,
    onViewTask,
}: {
    task: MyTask;
    number: number;
    onViewTask: (taskId: number) => void;
}) {
    return (
        <TableRow
            className={cn(
                'group cursor-pointer',
                task.is_overdue &&
                    'border-l-4 border-l-red-500 bg-red-50/40 dark:bg-red-500/5',
            )}
            onClick={() => onViewTask(task.id)}
        >
            <TableCell className="text-xs text-muted-foreground tabular-nums">
                {number}
            </TableCell>
            <TableCell className="font-medium">
                <div
                    className={cn(
                        task.status === 'done' &&
                            'text-muted-foreground line-through',
                    )}
                >
                    {task.title}
                </div>
            </TableCell>
            <TableCell>
                <TaskStatusBadge status={task.status} />
            </TableCell>
            <TableCell>
                <TaskPriorityBadge level={task.priority_level} />
            </TableCell>
            <TableCell>
                <span className={cn('text-xs', getDueDateClassName(task))}>
                    {task.due_date ? formatDate(task.due_date) : 'No due date'}
                </span>
            </TableCell>
        </TableRow>
    );
}

export function MyTasksTable({
    tasks,
    onViewTask,
    hasActiveFilters,
    onClearFilters,
    onCreateTask,
    startNumber,
}: MyTasksTableProps) {
    if (tasks.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
                <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted text-muted-foreground">
                    <CheckCircle2 className="h-8 w-8" />
                </div>
                {hasActiveFilters ? (
                    <>
                        <h3 className="text-base font-semibold text-foreground">
                            No matching tasks
                        </h3>
                        <p className="mt-1 max-w-sm text-sm text-muted-foreground">
                            No tasks match your current search or filters. Try
                            adjusting them to see more results.
                        </p>
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={onClearFilters}
                            className="mt-5"
                        >
                            Clear filters
                        </Button>
                    </>
                ) : (
                    <>
                        <h3 className="text-base font-semibold text-foreground">
                            No personal tasks yet
                        </h3>
                        <p className="mt-1 max-w-sm text-sm text-muted-foreground">
                            Personal tasks are private notes and to-dos only you
                            can see. Create one to get started.
                        </p>
                        <Button
                            size="sm"
                            onClick={onCreateTask}
                            className="mt-5"
                        >
                            <Plus className="mr-2 h-4 w-4" />
                            Create your first task
                        </Button>
                    </>
                )}
            </div>
        );
    }

    return (
        <Table>
            <TableHeader>
                <TableRow className="hover:bg-transparent">
                    <TableHead className="w-12">No.</TableHead>
                    <TableHead>Task Title</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Priority</TableHead>
                    <TableHead>Due Date</TableHead>
                </TableRow>
            </TableHeader>
            {/* Hanya task utama. Subtask adalah checklist di dalam sebuah task,
                tempatnya di panel detail — bukan baris tersendiri di daftar. */}
            <TableBody>
                {tasks.map((task, index) => (
                    <MyTaskRow
                        key={task.id}
                        task={task}
                        number={startNumber + index}
                        onViewTask={onViewTask}
                    />
                ))}
            </TableBody>
        </Table>
    );
}