import { TaskDistributionChart } from '@admin/components/charts/task-distribution-chart';
import { UserSummaryChart } from '@admin/components/charts/user-summary-chart';
import AnnouncementLists from '@admin/components/dashboard/announcement-lists';
import { DateRangePicker } from '@admin/components/dashboard/date-range-picker';
import EventCalendar from '@admin/components/dashboard/eventCalendar';
import RecentUserLists from '@admin/components/dashboard/recent-user-lists';
import ReminderLists from '@admin/components/dashboard/task-and-reminders';
import StatisticsCard from '@admin/components/statistics-card';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@admin/components/ui/card';
import { Tabs, TabsContent } from '@admin/components/ui/tabs';
import { myReminders, myTasks, recentContacts, stats } from '@admin/data/static';
import AppLayout from '@admin/layouts/app-layout';
import { bgColor } from '@admin/lib/Icon-bg-Color';
import { dashboard } from '@admin/routes';
import { type BreadcrumbItem } from '@admin/types';
import { PageProps } from '@admin/types/global';
import { Link, usePage } from '@inertiajs/react';
import { Calendar, CheckCircle, Clock, MessageSquare, Settings } from 'lucide-react';
import { useState, type ReactNode } from 'react';
import { Bar, BarChart, CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Dashboard',
        href: dashboard().url,
    },
];

const productivityData = [
    { day: 'Mon', hours: 6 },
    { day: 'Tue', hours: 7.5 },
    { day: 'Wed', hours: 5 },
    { day: 'Thu', hours: 8 },
    { day: 'Fri', hours: 6.8 },
    { day: 'Sat', hours: 7 },
    { day: 'Sun', hours: 4.5 },
];

const communicationData = [
    { day: 'Mon', sent: 120, received: 90 },
    { day: 'Tue', sent: 150, received: 110 },
    { day: 'Wed', sent: 80, received: 130 },
    { day: 'Thu', sent: 200, received: 160 },
    { day: 'Fri', sent: 170, received: 140 },
    { day: 'Sat', sent: 90, received: 70 },
    { day: 'Sun', sent: 60, received: 50 },
];

function Dashboard() {
    const { moduleStatus } = usePage<PageProps>().props;
    const { dashboard_settings_data } = usePage().props;

    // Initialize with current year (2025)
    const currentYear = new Date().getFullYear();
    const [date, setDate] = useState<{
        from: Date | undefined;
        to: Date | undefined;
    }>({
        from: new Date(currentYear, 0, 1), // January 1st of current year
        to: new Date(), // Today's date
    });

    const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);

    const isWidgetEnabled = (slug: string) => {
        return dashboard_settings_data.some((item: any) => item.slug == slug && item.status);
    };

    return (
        <div className="flex h-full flex-col p-2">
            <div className="mb-4 flex items-center justify-between">
                <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
                <div className="flex gap-2">
                    <DateRangePicker date={date} setDate={setDate} isOpen={isDatePickerOpen} onOpenChange={setIsDatePickerOpen} />
                    <Link href={route('settings.company.edit')}>
                        <Button variant="outline" size="icon" className="border-gray-300 bg-card" aria-label="Dashboard settings">
                            <Settings className="h-4 w-4" color="black" />
                            <span className="sr-only">Dashboard settings</span>
                        </Button>
                    </Link>
                </div>
            </div>

            <Tabs orientation="vertical" defaultValue="platform" className="flex flex-grow flex-col space-y-4">
                {/* <div className="w-full overflow-x-auto pb-2">
                    <TabsList className="grid w-full grid-cols-3 lg:inline-grid lg:w-auto">
                        <TabsTrigger value="platform" className="flex items-center gap-2">
                            <BarChart3 className="h-4 w-4" />
                            Platform
                        </TabsTrigger>
                        {moduleStatus?.Productivity && (
                            <TabsTrigger value="productivity" className="flex items-center gap-2">
                                <Target className="h-4 w-4" />
                                Productivity
                            </TabsTrigger>
                        )}
                        {moduleStatus?.Communication && (
                            <TabsTrigger value="communication" className="flex items-center gap-2">
                                <MessageSquare className="h-4 w-4" />
                                Communication
                            </TabsTrigger>
                        )}
                    </TabsList>
                </div> */}

                {/* Platform Tab */}
                <TabsContent value="platform" className="flex flex-grow flex-col space-y-4">
                    {/* User Statistics Widget */}
                    {isWidgetEnabled('platform-user-statistics') && (
                        <div className="grid gap-4 rounded-lg border bg-card sm:grid-cols-2 lg:grid-cols-4">
                            {stats.map((s, idx) => {
                                const Icon = s.icon;
                                return (
                                    <div key={idx}>
                                        <StatisticsCard
                                            title={s?.title || ''}
                                            value={s.value}
                                            iconbg={bgColor(s?.id).bg}
                                            icon={Icon}
                                            iconColor={bgColor(s?.id).icons}
                                        />
                                    </div>
                                );
                            })}
                        </div>
                    )}

                    <div className="grid grid-cols-1 gap-4 lg:grid-cols-7">
                        {/* Overview Chart */}
                        {isWidgetEnabled('platform-user-statistics') && (
                            <div className="col-span-1 lg:col-span-4">
                                <UserSummaryChart />
                            </div>
                        )}

                        {/* Recent Users Widget */}
                        {isWidgetEnabled('platform-recent-users') && (
                            <div className="col-span-1 lg:col-span-3">
                                <TaskDistributionChart />
                            </div>
                        )}
                    </div>
                    <div className="grid grid-cols-1 gap-4 lg:grid-cols-7">
                        {/* Overview Chart */}
                        {isWidgetEnabled('platform-user-statistics') && (
                            <div className="col-span-1 lg:col-span-4">
                                <ReminderLists />
                            </div>
                        )}

                        {/* Recent Users Widget */}
                        {isWidgetEnabled('platform-recent-users') && (
                            <div className="col-span-1 lg:col-span-3">
                                <EventCalendar />
                            </div>
                        )}
                    </div>
                    <div className="grid grid-cols-1 gap-4 lg:grid-cols-7">
                        {/* Overview Chart */}
                        {/* Recent Users Widget */}
                        {isWidgetEnabled('platform-recent-users') && (
                            <div className="col-span-1 mb-4 lg:col-span-4">
                                <RecentUserLists />
                            </div>
                        )}
                        {isWidgetEnabled('platform-user-statistics') && (
                            <div className="col-span-1 mb-4 lg:col-span-3">
                                <AnnouncementLists />
                            </div>
                        )}
                    </div>
                </TabsContent>

                {/* Productivity Tab */}
                {moduleStatus?.Productivity && (
                    <TabsContent value="productivity" className="flex flex-grow flex-col space-y-6">
                        {/* My Tasks Widget */}
                        {isWidgetEnabled('productivity-my-tasks') && (
                            <Card className="flex flex-col">
                                <CardHeader>
                                    <CardTitle className="flex items-center gap-2">
                                        <CheckCircle className="h-5 w-5" />
                                        My Tasks
                                    </CardTitle>
                                    <CardDescription>Tasks assigned to you and their progress</CardDescription>
                                </CardHeader>
                                <CardContent className="flex-grow">
                                    <div className="space-y-4">
                                        {myTasks.map((task) => (
                                            <div key={task.id} className="flex items-center justify-between rounded-lg border p-3">
                                                <div className="flex items-center space-x-3">
                                                    <input
                                                        type="checkbox"
                                                        checked={task.completed}
                                                        onChange={() => {}}
                                                        className="h-4 w-4 rounded border-gray-300"
                                                    />
                                                    <div>
                                                        <p
                                                            className={`text-sm font-medium ${
                                                                task.completed ? 'text-muted-foreground line-through' : ''
                                                            }`}
                                                        >
                                                            {task.title}
                                                        </p>
                                                        <p className="text-xs text-muted-foreground">Due: {task.dueDate}</p>
                                                    </div>
                                                </div>
                                                <span
                                                    className={`rounded-full px-2 py-1 text-xs ${
                                                        task.priority === 'High'
                                                            ? 'bg-red-100 text-red-800'
                                                            : task.priority === 'Medium'
                                                                ? 'bg-yellow-100 text-yellow-800'
                                                                : 'bg-blue-100 text-blue-800'
                                                    }`}
                                                >
                                                    {task.priority}
                                                </span>
                                            </div>
                                        ))}
                                    </div>
                                </CardContent>
                            </Card>
                        )}

                        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
                            {/* My Reminder Widget */}
                            {isWidgetEnabled('productivity-my-reminder') && (
                                <Card className="col-span-1 flex flex-col">
                                    <CardHeader>
                                        <CardTitle className="flex items-center gap-2">
                                            <Clock className="h-5 w-5" />
                                            My Reminders
                                        </CardTitle>
                                        <CardDescription>Upcoming reminders and alerts</CardDescription>
                                    </CardHeader>
                                    <CardContent className="flex-grow">
                                        <div className="space-y-4">
                                            {myReminders.map((reminder) => (
                                                <div key={reminder.id} className="rounded-lg border p-3">
                                                    <p className="text-sm font-medium">{reminder.title}</p>
                                                    <p className="text-xs text-muted-foreground">
                                                        {reminder.date} at {reminder.time}
                                                    </p>
                                                </div>
                                            ))}
                                        </div>
                                    </CardContent>
                                </Card>
                            )}

                            {/* Mini Calendar Widget */}
                            {isWidgetEnabled('productivity-mini-calender') && (
                                <Card className="col-span-1 flex flex-col lg:col-span-2">
                                    <CardHeader>
                                        <CardTitle className="flex items-center gap-2">
                                            <Calendar className="h-5 w-5" />
                                            Mini Calendar
                                        </CardTitle>
                                        <CardDescription>October 2024</CardDescription>
                                    </CardHeader>
                                    <CardContent className="flex-grow">
                                        <div className="grid grid-cols-7 gap-2 text-center">
                                            {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
                                                <div key={day} className="py-1 text-xs font-medium text-muted-foreground">
                                                    {day}
                                                </div>
                                            ))}
                                            {Array.from({ length: 31 }, (_, i) => i + 1).map((day) => (
                                                <div
                                                    key={day}
                                                    className={`rounded p-2 text-sm ${
                                                        day === 29 ? 'bg-primary font-medium text-primary-foreground' : 'hover:bg-muted'
                                                    }`}
                                                >
                                                    {day}
                                                </div>
                                            ))}
                                        </div>
                                    </CardContent>
                                </Card>
                            )}
                        </div>

                        {/* Productivity Chart */}
                        {isWidgetEnabled('productivity-my-tasks') && (
                            <Card className="flex flex-col">
                                <CardHeader>
                                    <CardTitle>Weekly Productivity</CardTitle>
                                    <CardDescription>Your productivity trends over the last week</CardDescription>
                                </CardHeader>
                                <CardContent className="flex-grow">
                                    <div className="h-80">
                                        <ResponsiveContainer width="100%" height="100%">
                                            <LineChart data={productivityData}>
                                                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                                                <XAxis dataKey="day" stroke="currentColor" className="fill-muted-foreground text-xs" />
                                                <YAxis stroke="currentColor" className="fill-muted-foreground text-xs" />
                                                <Tooltip />
                                                <Line
                                                    type="monotone"
                                                    dataKey="hours"
                                                    stroke="#6366F1"
                                                    strokeWidth={2}
                                                    dot={{ r: 4 }}
                                                    activeDot={{ r: 6 }}
                                                />
                                            </LineChart>
                                        </ResponsiveContainer>
                                    </div>
                                </CardContent>
                            </Card>
                        )}
                    </TabsContent>
                )}

                {/* Communication Tab */}
                {moduleStatus?.Communication && (
                    <TabsContent value="communication" className="flex flex-grow flex-col space-y-6">
                        {/* Announcement Widget */}
                        {isWidgetEnabled('communication-announcement') && (
                            <Card className="flex flex-col border-blue-200 bg-blue-50">
                                <CardHeader>
                                    <CardTitle className="flex items-center gap-2 text-blue-900">
                                        <MessageSquare className="h-5 w-5" />
                                        Important Announcement
                                    </CardTitle>
                                    <CardDescription className="text-blue-700">
                                        System maintenance scheduled for October 5th, 2024 from 2:00 AM to 6:00 AM UTC
                                    </CardDescription>
                                </CardHeader>
                                <CardContent className="flex-grow">
                                    <p className="text-sm text-blue-800">
                                        Please save your work and log out before the maintenance window. We apologize for any inconvenience this may
                                        cause.
                                    </p>
                                </CardContent>
                            </Card>
                        )}

                        <div className="grid grid-cols-1 gap-4 lg:grid-cols-7">
                            {/* Communication Chart */}
                            {isWidgetEnabled('communication-announcement') && (
                                <Card className="col-span-1 flex flex-col lg:col-span-4">
                                    <CardHeader>
                                        <CardTitle>Communication Overview</CardTitle>
                                        <CardDescription>Your communication patterns over time</CardDescription>
                                    </CardHeader>
                                    <CardContent className="flex-grow">
                                        <div className="h-full">
                                            <ResponsiveContainer width="100%" height="100%">
                                                <BarChart data={communicationData}>
                                                    <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                                                    <XAxis dataKey="day" stroke="currentColor" className="fill-muted-foreground text-xs" />
                                                    <YAxis stroke="currentColor" className="fill-muted-foreground text-xs" />
                                                    <Tooltip />
                                                    <Legend />
                                                    <Bar dataKey="sent" fill="#6366F1" radius={[4, 4, 0, 0]} />
                                                    <Bar dataKey="received" fill="#22C55E" radius={[4, 4, 0, 0]} />
                                                </BarChart>
                                            </ResponsiveContainer>
                                        </div>
                                    </CardContent>
                                </Card>
                            )}

                            {/* Recent Contacts Widget */}
                            {isWidgetEnabled('communication-recent-contacts') && (
                                <Card className="col-span-1 flex flex-col lg:col-span-3">
                                    <CardHeader>
                                        <CardTitle>Recent Contacts</CardTitle>
                                        <CardDescription>Recently added or updated contacts</CardDescription>
                                    </CardHeader>
                                    <CardContent className="flex-grow">
                                        <div className="space-y-4">
                                            {recentContacts.map((contact) => (
                                                <div key={contact.id} className="flex items-center justify-between">
                                                    <div className="flex items-center space-x-3">
                                                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
                                                            <span className="text-xs font-medium">{contact.avatar}</span>
                                                        </div>
                                                        <div>
                                                            <p className="text-sm font-medium">{contact.name}</p>
                                                            <p className="text-xs text-muted-foreground">{contact.company}</p>
                                                        </div>
                                                    </div>
                                                    <div className="text-xs text-muted-foreground">{contact.lastContact}</div>
                                                </div>
                                            ))}
                                        </div>
                                    </CardContent>
                                </Card>
                            )}
                        </div>
                    </TabsContent>
                )}
            </Tabs>
        </div>
    );
}

Dashboard.layout = (page: ReactNode) => <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;

export default Dashboard;