"use client";

import { trpc } from "@/trpc/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  FileText,
  Trophy,
  Scale,
  FolderKanban,
  Users,
  Package,
  TrendingUp,
  Clock,
  AlertCircle,
  Wifi,
  WifiOff,
  LayoutDashboard,
} from "lucide-react";
import { PageHeader } from "@/components/layouts/page-header";
import { StateWrapper } from "@/components/shared/state-wrapper";
import Link from "next/link";
import { useEffect, useState } from "react";

export default function DashboardPage() {
  const [isLive, setIsLive] = useState(false);

  const {
    data: stats,
    isLoading,
    error,
    refetch,
  } = trpc.report.getDashboardStats.useQuery(undefined, {
    staleTime: 30000,
  });

  trpc.report.dashboardStatsUpdated.useSubscription(undefined, {
    onData() {
      refetch();
    },
    onStarted() {
      setIsLive(true);
    },
    onError() {
      setIsLive(false);
    },
  });

  useEffect(() => {
    return () => {
      setIsLive(false);
    };
  }, []);

  const statCards = [
    {
      title: "Active Tenders",
      value: stats?.activeTenders ?? 0,
      icon: FileText,
      color: "text-blue-500",
      bgColor: "bg-blue-500/10",
      href: "/tenders?status=PUBLISHED",
    },
    {
      title: "Pending Awards",
      value: stats?.pendingAwards ?? 0,
      icon: Clock,
      color: "text-yellow-500",
      bgColor: "bg-yellow-500/10",
      href: "/tenders?status=SUBMISSIONS_RECEIVED",
    },
    {
      title: "Board Reviews",
      value: stats?.boardReviews ?? 0,
      icon: Scale,
      color: "text-purple-500",
      bgColor: "bg-purple-500/10",
      href: "/board",
    },
    {
      title: "Total Projects",
      value: stats?.totalProjects ?? 0,
      icon: FolderKanban,
      color: "text-green-500",
      bgColor: "bg-green-500/10",
      href: "/projects",
    },
    {
      title: "Total Awards",
      value: stats?.totalAwards ?? 0,
      icon: Trophy,
      color: "text-amber-500",
      bgColor: "bg-amber-500/10",
      href: "/awards",
    },
    {
      title: "Registered Vendors",
      value: stats?.totalVendors ?? 0,
      icon: Users,
      color: "text-cyan-500",
      bgColor: "bg-cyan-500/10",
      href: "/vendors",
    },
    {
      title: "Items Catalog",
      value: stats?.totalItems ?? 0,
      icon: Package,
      color: "text-orange-500",
      bgColor: "bg-orange-500/10",
      href: "/items",
    },
    {
      title: "Draft Tenders",
      value: stats?.draftTenders ?? 0,
      icon: AlertCircle,
      color: "text-gray-500",
      bgColor: "bg-gray-500/10",
      href: "/tenders?status=DRAFT",
    },
  ];

  return (
    <div className="space-y-6">
      <PageHeader title="Dashboard" description="Overview of your Tender Management System">
        <div className="flex items-center gap-2">
          {isLive ? (
            <div className="flex items-center gap-2 text-sm text-green-600">
              <Wifi className="h-4 w-4" />
              Live
            </div>
          ) : (
            <div className="text-muted-foreground flex items-center gap-2 text-sm">
              <WifiOff className="h-4 w-4" />
              Offline
            </div>
          )}
          <Button variant="outline" size="sm" onClick={() => refetch()}>
            Refresh
          </Button>
        </div>
      </PageHeader>

      <StateWrapper
        data={stats}
        isLoading={isLoading}
        error={error as Error | null}
        onRetry={refetch}
        loadingMessage="Loading dashboard..."
        empty={{ icon: LayoutDashboard, title: "No data available", description: "Dashboard data is not available at this time." }}
      >
        {(_stats) => (<>
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {statCards.map((card) => (
          <Link key={card.title} href={card.href}>
            <Card className="cursor-pointer transition-shadow hover:shadow-md">
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-muted-foreground text-sm font-medium">
                    {card.title}
                  </CardTitle>
                  <div className={`rounded-lg p-2 ${card.bgColor}`}>
                    <card.icon className={`h-4 w-4 ${card.color}`} />
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-bold">{card.value}</div>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="flex items-center gap-2">
              <Trophy className="h-5 w-5 text-amber-500" />
              Recent Awards
            </CardTitle>
            <Link href="/awards">
              <Button variant="ghost" size="sm">
                View All
              </Button>
            </Link>
          </CardHeader>
          <CardContent>
            {stats?.recentAwards && stats.recentAwards.length > 0 ? (
              <div className="space-y-4">
                {stats.recentAwards.map((award) => (
                  <div
                    key={award.id}
                    className="bg-muted/50 flex items-center justify-between rounded-lg p-3"
                  >
                    <div className="min-w-0 flex-1">
                      <p className="truncate font-medium">
                        {award.tender.title}
                      </p>
                      <p className="text-muted-foreground text-sm">
                        {award.vendor.name}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="font-semibold">
                        NPR {Number(award.totalAmount).toLocaleString()}
                      </p>
                      <p className="text-muted-foreground text-xs">
                        {award.referenceNo}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-muted-foreground py-8 text-center">
                No awards yet
              </div>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5 text-blue-500" />
              Recent Tenders
            </CardTitle>
            <Link href="/tenders">
              <Button variant="ghost" size="sm">
                View All
              </Button>
            </Link>
          </CardHeader>
          <CardContent>
            {stats?.recentTenders && stats.recentTenders.length > 0 ? (
              <div className="space-y-4">
                {stats.recentTenders.map((tender) => (
                  <div
                    key={tender.id}
                    className="bg-muted/50 flex items-center justify-between rounded-lg p-3"
                  >
                    <div className="min-w-0 flex-1">
                      <p className="truncate font-medium">{tender.title}</p>
                      <p className="text-muted-foreground text-sm">
                        {tender.bundle?.project?.name} • {tender.referenceNo}
                      </p>
                    </div>
                    <Badge
                      variant={
                        tender.status === "PUBLISHED"
                          ? "default"
                          : tender.status === "AWARDED"
                            ? "secondary"
                            : "outline"
                      }
                    >
                      {tender.status}
                    </Badge>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-muted-foreground py-8 text-center">
                No tenders yet
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <TrendingUp className="h-5 w-5" />
            Quick Actions
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-4">
            <Link href="/items/new" className="block">
              <Button
                variant="outline"
                className="h-auto w-full flex-col gap-2 py-4"
              >
                <Package className="h-5 w-5" />
                <span>Add New Item</span>
              </Button>
            </Link>
            <Link href="/projects" className="block">
              <Button
                variant="outline"
                className="h-auto w-full flex-col gap-2 py-4"
              >
                <FolderKanban className="h-5 w-5" />
                <span>Create Project</span>
              </Button>
            </Link>
            <Link href="/tenders" className="block">
              <Button
                variant="outline"
                className="h-auto w-full flex-col gap-2 py-4"
              >
                <FileText className="h-5 w-5" />
                <span>Publish Tender</span>
              </Button>
            </Link>
            <Link href="/vendors" className="block">
              <Button
                variant="outline"
                className="h-auto w-full flex-col gap-2 py-4"
              >
                <Users className="h-5 w-5" />
                <span>Manage Vendors</span>
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>
        </>)}
      </StateWrapper>
    </div>
  );
}