'use client';

import { useEffect, useState } from 'react';
import {
    NewspaperIcon,
    UserGroupIcon,
    MapIcon,
    CheckCircleIcon,
} from '@heroicons/react/24/outline';
import { dashboardApi } from '@/lib/api/admin';
import { DashboardData } from '@/types';
import Link from 'next/link';

export default function DashboardPage() {
    const [data, setData] = useState<DashboardData | null>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetchDashboardData();
    }, []);

    const fetchDashboardData = async () => {
        try {
            const result = await dashboardApi.getData();
            setData(result.data);
        } catch (error) {
            console.error('Failed to fetch dashboard data:', error);
        } finally {
            setLoading(false);
        }
    };

    const stats = [
        {
            name: 'Total News',
            value: data?.total_news || 0,
            icon: NewspaperIcon,
            color: 'bg-blue-500',
            bgColor: 'bg-blue-50',
            textColor: 'text-blue-600',
        },
        {
            name: 'Published News',
            value: data?.published_news || 0,
            icon: CheckCircleIcon,
            color: 'bg-green-500',
            bgColor: 'bg-green-50',
            textColor: 'text-green-600',
        },
        {
            name: 'Total Members',
            value: data?.total_members || 0,
            icon: UserGroupIcon,
            color: 'bg-brand',
            bgColor: 'bg-orange-50',
            textColor: 'text-brand',
        },
        {
            name: 'Total Regions',
            value: data?.total_regions || 0,
            icon: MapIcon,
            color: 'bg-purple-500',
            bgColor: 'bg-purple-50',
            textColor: 'text-purple-600',
        },
    ];

    if (loading) {
        return (
            <div className="flex items-center justify-center h-64">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand"></div>
            </div>
        );
    }

    return (
        <div className="space-y-6">
            <div className="bg-white rounded-xl shadow-sm p-6 border-l-4 border-brand">
                <h1 className="text-3xl font-bold text-main">Dashboard</h1>
                <p className="text-sec mt-1">Welcome back! Here's an overview of your system.</p>
            </div>

            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                {stats.map((stat) => (
                    <div
                        key={stat.name}
                        className="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow"
                    >
                        <div className="p-6">
                            <div className="flex items-center">
                                <div className={`flex-shrink-0 ${stat.bgColor} rounded-lg p-3`}>
                                    <stat.icon className={`h-8 w-8 ${stat.textColor}`} />
                                </div>
                                <div className="ml-5 w-0 flex-1">
                                    <dl>
                                        <dt className="text-sm font-medium text-sec truncate">{stat.name}</dt>
                                        <dd className="flex items-baseline">
                                            <div className="text-3xl font-bold text-main">{stat.value}</div>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        <div className={`${stat.color} h-2`}></div>
                    </div>
                ))}
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="bg-white rounded-xl shadow-sm p-6">
                    <h2 className="text-xl font-bold text-main mb-4">Quick Actions</h2>
                    <div className="space-y-3">
                        <Link href="/admin/news"
                            className="flex items-center justify-between p-4 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors"
                        >
                            <div className="flex items-center space-x-3">
                                <NewspaperIcon className="h-6 w-6 text-brand" />
                                <span className="font-medium text-main">Manage News</span>
                            </div>
                            <span className="text-brand">→</span>
                        </Link>
                        <Link
                            href="/admin/member"
                            className="flex items-center justify-between p-4 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors"
                        >
                            <div className="flex items-center space-x-3">
                                <UserGroupIcon className="h-6 w-6 text-brand" />
                                <span className="font-medium text-main">Manage Members</span>
                            </div>
                            <span className="text-brand">→</span>
                        </Link>
                        <Link
                            href="/admin/region"
                            className="flex items-center justify-between p-4 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors"
                        >
                            <div className="flex items-center space-x-3">
                                <MapIcon className="h-6 w-6 text-brand" />
                                <span className="font-medium text-main">Manage Regions</span>
                            </div>
                            <span className="text-brand">→</span>
                        </Link>
                    </div>
                </div>

                <div className="bg-white rounded-xl shadow-sm p-6">
                    <h2 className="text-xl font-bold text-main mb-4">System Information</h2>
                    <div className="space-y-4">
                        <div className="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
                            <span className="text-sec font-medium">News Published</span>
                            <span className="text-main font-bold">
                                {data?.published_news} / {data?.total_news}
                            </span>
                        </div>
                        <div className="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
                            <span className="text-sec font-medium">Active Members</span>
                            <span className="text-main font-bold">{data?.total_members}</span>
                        </div>
                        <div className="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
                            <span className="text-sec font-medium">Total Regions</span>
                            <span className="text-main font-bold">{data?.total_regions}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div className="bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl shadow-lg p-8 text-white">
                <h2 className="text-2xl font-bold mb-2">Welcome to Admin Panel</h2>
                <p className="text-orange-100">
                    Manage your content, members, and settings from this dashboard. Use the sidebar to
                    navigate through different sections.
                </p>
            </div>
        </div>
    );
}