import Link from "next/link";
import { getCurrentUser } from "@/lib/auth/user";
import {
  listModerationProperties,
  getModerationMetrics,
} from "@/lib/services/moderation.service";
import { PropertyModerationTable } from "@/components/admin/property-moderation-table";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { buttonVariants } from "@/components/ui/button";
import { Clock, CheckCircle2, XCircle, ShieldCheck, Plus } from "lucide-react";
import { MdCorporateFare } from "react-icons/md";

export default async function PropertyModerationPage(props: {
  searchParams?: Promise<{ status?: string; search?: string; page?: string }>;
}) {
  const user = await getCurrentUser();
  if (!user) return null;

  const searchParams = await props.searchParams;
  const metrics = await getModerationMetrics();
  const status = searchParams?.status || (metrics.pendingReview > 0 ? "PENDING_REVIEW" : "ALL");
  const search = searchParams?.search || "";
  const page = searchParams?.page ? parseInt(searchParams.page, 10) : 1;

  const listData = await listModerationProperties(user, { status, search, page, limit: 50 });

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-border">
        <div>
          <h1 className="text-xl font-bold tracking-tight text-foreground sm:text-2xl">
            Property Moderation Desk
          </h1>
          <p className="text-xs text-muted-foreground mt-0.5">
            Super admin platform-wide listing governance and trust verification.
          </p>
        </div>

        <Link
          href="/dashboard/properties/new"
          className={buttonVariants({
            variant: "default",
            size: "sm",
            className: "gap-1.5 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 font-semibold shadow-2xs text-xs h-8 px-3 shrink-0 self-start sm:self-auto",
          })}
        >
          <Plus className="w-3.5 h-3.5" />
          <span>Add Property</span>
        </Link>
      </div>

      {/* Interactive Metrics Row */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
        <Link href="/admin/properties?status=PENDING_REVIEW" className="group">
          <Card className={`border-border bg-card rounded-md shadow-2xs transition-all group-hover:border-foreground/40 ${status === "PENDING_REVIEW" ? "ring-1 ring-primary/40 border-primary/30" : ""}`}>
            <CardHeader className="flex flex-row items-center justify-between pb-1.5 pt-3.5 px-4">
              <CardTitle className="text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors">
                Pending Review
              </CardTitle>
              <Clock className="w-4 h-4 text-muted-foreground" />
            </CardHeader>
            <CardContent className="px-4 pb-3.5">
              <div className="text-2xl font-bold tracking-tight text-foreground">
                {metrics.pendingReview}
              </div>
              <p className="text-[11px] text-muted-foreground mt-1">
                Awaiting verification
              </p>
            </CardContent>
          </Card>
        </Link>

        <Link href="/admin/properties?status=PUBLISHED" className="group">
          <Card className={`border-border bg-card rounded-md shadow-2xs transition-all group-hover:border-foreground/40 ${status === "PUBLISHED" ? "ring-1 ring-primary/40 border-primary/30" : ""}`}>
            <CardHeader className="flex flex-row items-center justify-between pb-1.5 pt-3.5 px-4">
              <CardTitle className="text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors">
                Published Live
              </CardTitle>
              <CheckCircle2 className="w-4 h-4 text-muted-foreground" />
            </CardHeader>
            <CardContent className="px-4 pb-3.5">
              <div className="text-2xl font-bold tracking-tight text-foreground">
                {metrics.published}
              </div>
              <p className="text-[11px] text-muted-foreground mt-1">
                Active on marketplace
              </p>
            </CardContent>
          </Card>
        </Link>

        <Link href="/admin/properties?status=REJECTED" className="group">
          <Card className={`border-border bg-card rounded-md shadow-2xs transition-all group-hover:border-foreground/40 ${status === "REJECTED" ? "ring-1 ring-primary/40 border-primary/30" : ""}`}>
            <CardHeader className="flex flex-row items-center justify-between pb-1.5 pt-3.5 px-4">
              <CardTitle className="text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors">
                Rejected Listings
              </CardTitle>
              <XCircle className="w-4 h-4 text-muted-foreground" />
            </CardHeader>
            <CardContent className="px-4 pb-3.5">
              <div className="text-2xl font-bold tracking-tight text-foreground">
                {metrics.rejected}
              </div>
              <p className="text-[11px] text-muted-foreground mt-1">
                Sent back with notes
              </p>
            </CardContent>
          </Card>
        </Link>

        <Link href="/admin/properties?status=ALL" className="group">
          <Card className={`border-border bg-card rounded-md shadow-2xs transition-all group-hover:border-foreground/40 ${status === "ALL" ? "ring-1 ring-primary/40 border-primary/30" : ""}`}>
            <CardHeader className="flex flex-row items-center justify-between pb-1.5 pt-3.5 px-4">
              <CardTitle className="text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors">
                Total Managed
              </CardTitle>
              <MdCorporateFare className="w-4 h-4 text-muted-foreground" />
            </CardHeader>
            <CardContent className="px-4 pb-3.5">
              <div className="text-2xl font-bold tracking-tight text-foreground">
                {metrics.totalProperties}
              </div>
              <p className="text-[11px] text-muted-foreground mt-1">
                Submissions platform-wide
              </p>
            </CardContent>
          </Card>
        </Link>
      </div>

      {/* Filter Tabs */}
      <div className="flex items-center gap-1.5 border-b border-border pb-3 overflow-x-auto">
        {[
          { id: "PENDING_REVIEW", label: `Pending Review (${metrics.pendingReview})` },
          { id: "PUBLISHED", label: `Published (${metrics.published})` },
          { id: "REJECTED", label: `Rejected (${metrics.rejected})` },
          { id: "ALL", label: `All Listings (${metrics.totalProperties})` },
        ].map((tab) => {
          const isActive = status === tab.id;
          return (
            <Link
              key={tab.id}
              href={`/admin/properties?status=${tab.id}`}
              className={`px-3 py-1.5 rounded-md text-xs font-semibold shrink-0 transition-all ${isActive
                  ? "bg-primary text-primary-foreground shadow-2xs"
                  : "text-muted-foreground hover:bg-muted"
                }`}
            >
              {tab.label}
            </Link>
          );
        })}
      </div>

      {/* Moderation Review Table */}
      <PropertyModerationTable
        properties={listData.properties}
        totalCount={listData.totalCount}
      />
    </div>
  );
}