import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Layout, FileText, BookOpen, Menu, Eye,
    ArrowUpRight, ArrowDownRight, Edit3, Globe, Clock, Tag,
} from 'lucide-react';
import {
    ResponsiveContainer, BarChart, Bar, LineChart, Line,
    XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';

// ─── Static demo data ─────────────────────────────────────────────────────────

const publishingActivity = [
    { month: 'Jan', pages: 8, blogs: 22 },
    { month: 'Feb', pages: 5, blogs: 18 },
    { month: 'Mar', pages: 12, blogs: 31 },
    { month: 'Apr', pages: 7, blogs: 27 },
    { month: 'May', pages: 10, blogs: 35 },
    { month: 'Jun', pages: 14, blogs: 42 },
    { month: 'Jul', pages: 9, blogs: 38 },
];

const pageViewsTrend = [
    { week: 'W1', views: 12400 }, { week: 'W2', views: 15800 }, { week: 'W3', views: 13200 },
    { week: 'W4', views: 18900 }, { week: 'W5', views: 21000 }, { week: 'W6', views: 19500 },
    { week: 'W7', views: 24100 }, { week: 'W8', views: 22600 },
];

const recentPages = [
    { title: 'About Us — Revamped', author: 'Rahim', status: 'Published', views: 4820, updated: 'Today' },
    { title: 'Pricing Plans 2024', author: 'Sumaiya', status: 'Draft', views: 0, updated: 'Today' },
    { title: 'Contact & Support', author: 'Karim', status: 'Published', views: 2340, updated: 'Yesterday' },
    { title: 'Terms of Service', author: 'Nasrin', status: 'Published', views: 1190, updated: '3 days ago' },
    { title: 'Privacy Policy', author: 'Jahir', status: 'Published', views: 980, updated: '5 days ago' },
];

const recentBlogs = [
    { title: '10 Tips for Productivity in 2024', category: 'Productivity', status: 'Published', views: 7240 },
    { title: 'How AI Is Changing Business', category: 'Technology', status: 'Published', views: 12800 },
    { title: 'The Future of E-commerce', category: 'Ecommerce', status: 'Draft', views: 0 },
    { title: 'Building a Remote-First Culture', category: 'Business', status: 'Scheduled', views: 0 },
    { title: 'Top Web Design Trends', category: 'Design', status: 'Published', views: 5610 },
];

const statusColors: Record<string, string> = {
    Published: 'bg-green-100 text-green-800',
    Draft:     'bg-gray-100 text-gray-700',
    Scheduled: 'bg-blue-100 text-blue-800',
};

const topCategories = [
    { name: 'Technology', posts: 48, views: 82400 },
    { name: 'Business', posts: 36, views: 61200 },
    { name: 'Design', posts: 29, views: 43800 },
    { name: 'Productivity', posts: 24, views: 38100 },
    { name: 'Ecommerce', posts: 18, views: 27300 },
];

// ─── Stat card ────────────────────────────────────────────────────────────────

function StatCard({
    title, value, change, changeType, icon: Icon, iconBg, iconColor,
}: {
    title: string; value: string; change: string; changeType: 'up' | 'down';
    icon: React.ElementType; iconBg: string; iconColor: string;
}) {
    const Arrow = changeType === 'up' ? ArrowUpRight : ArrowDownRight;
    return (
        <Card className="border-[#d8d8d8] shadow-sm">
            <CardContent className="p-4">
                <div className="flex items-start justify-between">
                    <div>
                        <p className="text-xs tracking-wide text-[#6d7175] uppercase">{title}</p>
                        <p className="mt-1 text-2xl font-bold text-[#202223]">{value}</p>
                        <div className={`mt-1 flex items-center gap-1 text-xs font-medium ${changeType === 'up' ? 'text-green-600' : 'text-red-500'}`}>
                            <Arrow className="h-3 w-3" />
                            {change}
                        </div>
                    </div>
                    <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${iconBg}`}>
                        <Icon className={`h-5 w-5 ${iconColor}`} />
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}

// ─── Component ────────────────────────────────────────────────────────────────

export default function CmsCentralDashboard() {
    return (
        <div className="space-y-6">
            {/* KPI row */}
            <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
                <StatCard title="Total Pages" value="84" change="6 new this month" changeType="up" icon={FileText} iconBg="bg-violet-100" iconColor="text-violet-600" />
                <StatCard title="Blog Posts" value="312" change="38 published this month" changeType="up" icon={BookOpen} iconBg="bg-purple-100" iconColor="text-purple-600" />
                <StatCard title="Page Views" value="1,24,600" change="18% vs last month" changeType="up" icon={Eye} iconBg="bg-blue-100" iconColor="text-blue-600" />
                <StatCard title="Drafts Pending" value="11" change="3 more vs last week" changeType="down" icon={Edit3} iconBg="bg-amber-100" iconColor="text-amber-600" />
            </div>

            {/* Secondary KPIs */}
            <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
                {[
                    { label: 'Active Menus', value: '6', icon: Menu, bg: 'bg-teal-50', color: 'text-teal-600' },
                    { label: 'Published Pages', value: '73', icon: Globe, bg: 'bg-green-50', color: 'text-green-600' },
                    { label: 'Scheduled Posts', value: '8', icon: Clock, bg: 'bg-blue-50', color: 'text-blue-600' },
                    { label: 'Blog Categories', value: '18', icon: Tag, bg: 'bg-pink-50', color: 'text-pink-500' },
                ].map((s) => (
                    <Card key={s.label} className="border-[#d8d8d8] shadow-sm">
                        <CardContent className="flex items-center gap-3 p-4">
                            <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${s.bg}`}>
                                <s.icon className={`h-4 w-4 ${s.color}`} />
                            </div>
                            <div>
                                <p className="text-xs text-[#6d7175]">{s.label}</p>
                                <p className="text-base font-semibold text-[#202223]">{s.value}</p>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>

            {/* Charts row */}
            <div className="grid grid-cols-1 gap-4 lg:grid-cols-7">
                {/* Publishing activity */}
                <Card className="col-span-1 border-[#d8d8d8] shadow-sm lg:col-span-4">
                    <CardHeader className="border-b border-[#e3e3e3] pb-3">
                        <CardTitle className="text-base font-semibold text-[#202223]">Publishing Activity</CardTitle>
                        <CardDescription>Pages and blog posts published per month</CardDescription>
                    </CardHeader>
                    <CardContent className="pt-4">
                        <div className="h-64">
                            <ResponsiveContainer width="100%" height="100%">
                                <BarChart data={publishingActivity}>
                                    <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                                    <XAxis dataKey="month" tick={{ fontSize: 11 }} />
                                    <YAxis tick={{ fontSize: 11 }} />
                                    <Tooltip />
                                    <Legend />
                                    <Bar dataKey="pages" name="Pages" fill="#8b5cf6" radius={[3, 3, 0, 0]} />
                                    <Bar dataKey="blogs" name="Blog Posts" fill="#a78bfa" radius={[3, 3, 0, 0]} />
                                </BarChart>
                            </ResponsiveContainer>
                        </div>
                    </CardContent>
                </Card>

                {/* Page views trend */}
                <Card className="col-span-1 border-[#d8d8d8] shadow-sm lg:col-span-3">
                    <CardHeader className="border-b border-[#e3e3e3] pb-3">
                        <CardTitle className="text-base font-semibold text-[#202223]">Page Views Trend</CardTitle>
                        <CardDescription>Weekly page views over the last 8 weeks</CardDescription>
                    </CardHeader>
                    <CardContent className="pt-4">
                        <div className="h-64">
                            <ResponsiveContainer width="100%" height="100%">
                                <LineChart data={pageViewsTrend}>
                                    <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                                    <XAxis dataKey="week" tick={{ fontSize: 11 }} />
                                    <YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => `${(v / 1000).toFixed(0)}k`} />
                                    <Tooltip formatter={(v: number) => v.toLocaleString()} />
                                    <Line type="monotone" dataKey="views" stroke="#8b5cf6" strokeWidth={2} dot={{ r: 3 }} name="Views" />
                                </LineChart>
                            </ResponsiveContainer>
                        </div>
                    </CardContent>
                </Card>
            </div>

            {/* Pages + Blogs + Categories */}
            <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
                {/* Recent pages */}
                <Card className="border-[#d8d8d8] shadow-sm">
                    <CardHeader className="border-b border-[#e3e3e3] pb-3">
                        <CardTitle className="text-base font-semibold text-[#202223]">Recent Pages</CardTitle>
                    </CardHeader>
                    <CardContent className="p-0">
                        <div className="divide-y divide-[#efefef]">
                            {recentPages.map((p) => (
                                <div key={p.title} className="px-4 py-2.5">
                                    <div className="flex items-start justify-between gap-2">
                                        <p className="text-xs font-medium text-[#202223] line-clamp-1">{p.title}</p>
                                        <span className={`shrink-0 rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[p.status]}`}>
                                            {p.status}
                                        </span>
                                    </div>
                                    <p className="mt-0.5 text-xs text-[#6d7175]">{p.author} · {p.updated}</p>
                                    {p.views > 0 && (
                                        <p className="mt-0.5 flex items-center gap-1 text-xs text-[#8c9196]">
                                            <Eye className="h-3 w-3" /> {p.views.toLocaleString()} views
                                        </p>
                                    )}
                                </div>
                            ))}
                        </div>
                    </CardContent>
                </Card>

                {/* Recent blog posts */}
                <Card className="border-[#d8d8d8] shadow-sm">
                    <CardHeader className="border-b border-[#e3e3e3] pb-3">
                        <CardTitle className="text-base font-semibold text-[#202223]">Recent Blog Posts</CardTitle>
                    </CardHeader>
                    <CardContent className="p-0">
                        <div className="divide-y divide-[#efefef]">
                            {recentBlogs.map((b) => (
                                <div key={b.title} className="px-4 py-2.5">
                                    <div className="flex items-start justify-between gap-2">
                                        <p className="text-xs font-medium text-[#202223] line-clamp-1">{b.title}</p>
                                        <span className={`shrink-0 rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[b.status]}`}>
                                            {b.status}
                                        </span>
                                    </div>
                                    <p className="mt-0.5 text-xs text-[#6d7175]">{b.category}</p>
                                    {b.views > 0 && (
                                        <p className="mt-0.5 flex items-center gap-1 text-xs text-[#8c9196]">
                                            <Eye className="h-3 w-3" /> {b.views.toLocaleString()} views
                                        </p>
                                    )}
                                </div>
                            ))}
                        </div>
                    </CardContent>
                </Card>

                {/* Top categories */}
                <Card className="border-[#d8d8d8] shadow-sm">
                    <CardHeader className="border-b border-[#e3e3e3] pb-3">
                        <CardTitle className="text-base font-semibold text-[#202223]">Top Categories</CardTitle>
                        <CardDescription>By total page views</CardDescription>
                    </CardHeader>
                    <CardContent className="p-4">
                        <div className="space-y-3">
                            {topCategories.map((cat, i) => {
                                const pct = Math.round((cat.views / topCategories[0].views) * 100);
                                return (
                                    <div key={cat.name}>
                                        <div className="mb-1 flex items-center justify-between text-xs">
                                            <span className="font-medium text-[#202223]">{cat.name}</span>
                                            <span className="text-[#6d7175]">{cat.views.toLocaleString()} views</span>
                                        </div>
                                        <div className="h-2 overflow-hidden rounded-full bg-[#f1f5f9]">
                                            <div
                                                className="h-full rounded-full transition-all"
                                                style={{ width: `${pct}%`, backgroundColor: `hsl(${260 - i * 15}, 70%, 60%)` }}
                                            />
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}