"use client";

import Link from "next/link";
import useSWR from "swr";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import DoctorsService from "@/services/doctors.service";
import NewsService from "@/services/news.service";
import AdminInquiriesService from "@/services/admin.inquiries.service";
import AdminNewsService from "@/services/admin.news.service";
import AdminCmsService from "@/services/admin.cms.service";
import { Users, Newspaper, MessageSquare, Plus, ArrowRight, MessageCircle, Megaphone, Star, Briefcase } from "lucide-react";

const DashboardPage = () => {
  const { data: doctors, isLoading: isLoadingDoctors } = useSWR(
    "/admin/doctors/count",
    () => DoctorsService.getAll().then((d) => d.length)
  );

  const { data: newsCount, isLoading: isLoadingNews } = useSWR(
    "/admin/news/count",
    () => NewsService.getAll().then((n) => n?.pagination?.total || 0)
  );

  const { data: inquiriesData, isLoading: isLoadingInquiries } = useSWR(
    "/admin/inquiries/count",
    () => AdminInquiriesService.getAll({ limit: 1 })
  );

  const { data: commentsData, isLoading: isLoadingComments } = useSWR(
    "/admin/news/comments/count",
    () => AdminNewsService.getAllComments({ limit: 1 })
  );

  const { data: promos = [], isLoading: isLoadingPromos } = useSWR(
    "/admin/cms/promos/count",
    () => AdminCmsService.getPromos()
  );

  const { data: testimonials = [], isLoading: isLoadingTestimonials } = useSWR(
    "/admin/cms/testimonials/count",
    () => AdminCmsService.getTestimonials()
  );

  const { data: services = [], isLoading: isLoadingServices } = useSWR(
    "/admin/cms/services/count",
    () => AdminCmsService.getServices()
  );

  const pendingInquiries = inquiriesData?.inquiries?.filter((i) => i.status === "PENDING").length || 0;
  const pendingComments = commentsData?.comments?.filter((c) => !c.isApproved).length || 0;
  const activePromos = promos.filter((p) => p.isActive).length;
  const activeTestimonials = testimonials.filter((t) => t.isActive).length;
  const activeServices = services.filter((s) => s.isActive).length;

  const stats = [
    {
      title: "Total Dokter",
      value: isLoadingDoctors ? <Skeleton className="h-8 w-16" /> : doctors || 0,
      icon: Users,
      href: "/admin/doctors",
      color: "bg-blue-500",
    },
    {
      title: "Total Berita",
      value: isLoadingNews ? <Skeleton className="h-8 w-16" /> : newsCount || 0,
      icon: Newspaper,
      href: "/admin/news",
      color: "bg-green-500",
    },
    {
      title: "Pesan Pending",
      value: isLoadingInquiries ? <Skeleton className="h-8 w-16" /> : pendingInquiries,
      icon: MessageSquare,
      href: "/admin/inquiries",
      color: "bg-yellow-500",
      badge: pendingInquiries > 0 ? pendingInquiries : null,
    },
    {
      title: "Komentar Pending",
      value: isLoadingComments ? <Skeleton className="h-8 w-16" /> : pendingComments,
      icon: MessageCircle,
      href: "/admin/news/comments",
      color: "bg-orange-500",
      badge: pendingComments > 0 ? pendingComments : null,
    },
    {
      title: "Promo Aktif",
      value: isLoadingPromos ? <Skeleton className="h-8 w-16" /> : activePromos,
      icon: Megaphone,
      href: "/admin/cms/promos",
      color: "bg-purple-500",
    },
    {
      title: "Testimoni Aktif",
      value: isLoadingTestimonials ? <Skeleton className="h-8 w-16" /> : activeTestimonials,
      icon: Star,
      href: "/admin/cms/testimonials",
      color: "bg-pink-500",
    },
    {
      title: "Layanan Aktif",
      value: isLoadingServices ? <Skeleton className="h-8 w-16" /> : activeServices,
      icon: Briefcase,
      href: "/admin/cms/services",
      color: "bg-indigo-500",
    },
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Dashboard</h1>
          <p className="text-slate-500">Selamat datang di panel admin Adera</p>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => (
          <Card key={stat.title} className="hover:shadow-md transition-shadow">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-slate-500">
                {stat.title}
              </CardTitle>
              <div className="relative">
                <stat.icon className="h-4 w-4 text-slate-500" />
                {stat.badge && (
                  <Badge className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0 text-xs bg-red-500 text-white">
                    {stat.badge}
                  </Badge>
                )}
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stat.value}</div>
              <Link
                href={stat.href}
                className="text-xs text-primary hover:underline flex items-center mt-2"
              >
                Lihat detail <ArrowRight className="h-3 w-3 ml-1" />
              </Link>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Quick Actions */}
      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Kelola Dokter</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-slate-500">
              Tambah, edit, atau hapus data dokter dan jadwal praktik.
            </p>
            <div className="flex gap-2">
              <Link href="/admin/doctors/new">
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Tambah Dokter
                </Button>
              </Link>
              <Link href="/admin/doctors">
                <Button variant="outline">Lihat Semua</Button>
              </Link>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Kelola Berita</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-slate-500">
              Buat dan kelola artikel kesehatan untuk website.
            </p>
            <div className="flex gap-2">
              <Link href="/admin/news/new">
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Tambah Berita
                </Button>
              </Link>
              <Link href="/admin/news">
                <Button variant="outline">Lihat Semua</Button>
              </Link>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Pesan Masuk</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-slate-500">
              Lihat dan respon pesan dari pengunjung website.
            </p>
            <div className="flex gap-2">
              <Link href="/admin/inquiries">
                <Button>
                  <MessageSquare className="h-4 w-4 mr-2" />
                  Lihat Pesan
                  {pendingInquiries > 0 && (
                    <Badge variant="secondary" className="ml-2">
                      {pendingInquiries}
                    </Badge>
                  )}
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Moderasi Komentar</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-slate-500">
              Setujui atau tolak komentar dari pembaca berita.
            </p>
            <div className="flex gap-2">
              <Link href="/admin/news/comments">
                <Button>
                  <MessageCircle className="h-4 w-4 mr-2" />
                  Moderasi
                  {pendingComments > 0 && (
                    <Badge variant="secondary" className="ml-2">
                      {pendingComments}
                    </Badge>
                  )}
                </Button>
              </Link>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>CMS - Promo</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-slate-500">
              Kelola promo dan penawaran spesial di homepage.
            </p>
            <div className="flex gap-2">
              <Link href="/admin/cms/promos/new">
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Tambah Promo
                </Button>
              </Link>
              <Link href="/admin/cms/promos">
                <Button variant="outline">Lihat Semua</Button>
              </Link>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>CMS - Testimoni</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-slate-500">
              Kelola testimoni dari pasien di homepage.
            </p>
            <div className="flex gap-2">
              <Link href="/admin/cms/testimonials/new">
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Tambah Testimoni
                </Button>
              </Link>
              <Link href="/admin/cms/testimonials">
                <Button variant="outline">Lihat Semua</Button>
              </Link>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>CMS - Layanan</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-slate-500">
              Kelola layanan yang ditampilkan di homepage.
            </p>
            <div className="flex gap-2">
              <Link href="/admin/cms/services/new">
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Tambah Layanan
                </Button>
              </Link>
              <Link href="/admin/cms/services">
                <Button variant="outline">Lihat Semua</Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default DashboardPage;