'use client';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { remindersData, tasksData } from '@/data/static';
import { useState } from 'react';

const getStatusVariant = (status: string) => {
    switch (status) {
        case 'Completed':
            return 'default';
        case 'Planned':
            return 'secondary';
        case 'Overdue':
            return 'destructive';
        default:
            return 'default';
    }
};

export default function ReminderLists() {
    const [activeTab, setActiveTab] = useState('task');
    const currentData = activeTab === 'task' ? tasksData : remindersData;

    return (
        <Card className="flex h-full w-full flex-col px-0">
            <CardHeader className="mb-4 border-b px-5 pb-4">
                <div className="flex items-start justify-between">
                    <div>
                        <CardTitle className="text-lg font-semibold">{activeTab === 'reminders' ? 'Reminders' : 'Tasks'}</CardTitle>
                        <CardDescription className="text-text-gray">
                            These are some of the {activeTab === 'reminders' ? 'reminders' : 'tasks'} that must be completed
                        </CardDescription>
                    </div>
                    <Tabs value={activeTab} onValueChange={setActiveTab} className="w-auto">
                        <TabsList>
                            <TabsTrigger value="task">Task</TabsTrigger>
                            <TabsTrigger value="reminders">Reminders</TabsTrigger>
                        </TabsList>
                    </Tabs>
                </div>
            </CardHeader>
            <CardContent className="flex-grow px-5">
                <div className="h-full overflow-x-auto">
                    <table className="w-full">
                        <thead>
                            <tr className="border-b text-sm text-muted-foreground">
                                <th className="pb-3 text-left font-medium">Name</th>
                                <th className="pb-3 text-left font-medium">Date</th>
                                <th className="pb-3 text-left font-medium">Status</th>
                                <th className="pb-3 text-left font-medium">People</th>
                            </tr>
                        </thead>
                        <tbody>
                            {currentData.map((reminder, index) => (
                                <tr key={index} className="border-b last:border-0">
                                    <td className="py-4 text-sm font-medium">{reminder.name}</td>
                                    <td className="py-4 text-sm text-muted-foreground">{reminder.date}</td>
                                    <td className="py-4">
                                        <Badge
                                            variant={getStatusVariant(reminder.status)}
                                            className={
                                                reminder.status === 'Completed'
                                                    ? 'bg-green-100 text-green-700 hover:bg-green-100'
                                                    : reminder.status === 'Planned'
                                                      ? 'bg-blue-100 text-blue-700 hover:bg-blue-100'
                                                      : 'bg-red-100 text-red-700 hover:bg-red-100'
                                            }
                                        >
                                            {reminder.status}
                                        </Badge>
                                    </td>
                                    <td className="py-4">
                                        <div className="flex -space-x-2">
                                            {reminder.people.map((person, personIndex) => (
                                                <Avatar key={personIndex} className="h-8 w-8 border-2 border-background">
                                                    <AvatarImage src={person.image || '/placeholder.svg'} alt={person.name} />
                                                    <AvatarFallback className="text-xs">{person.name}</AvatarFallback>
                                                </Avatar>
                                            ))}
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </CardContent>
        </Card>
    );
}