"use client";

import { useQuery } from "@tanstack/react-query";
import { PermissionGuard } from "@/components/layout/PermissionGuard";
import { PERMS } from "@/lib/permissions";
import {
  Ticket,
  AlertCircle,
  BookOpen,
  Banknote,
  ArrowRight,
  ScanLine,
} from "lucide-react";
import { dashboardApi } from "@/lib/api/dashboard";
import { apiClient } from "@/lib/api-client";
import { formatCurrency } from "@/lib/utils";
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
import Link from "next/link";

const COLORS = ["#2563eb", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];

function StatCard({
  icon,
  iconBg,
  label,
  total,
  loading,
  rows,
  href,
}: {
  icon: React.ReactNode;
  iconBg: string;
  label: string;
  total: number;
  loading: boolean;
  rows: {
    label: string;
    value: number;
    icon?: React.ReactNode;
    href: string;
  }[];
  href: string;
}) {
  return (
    <div className="card flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <div className={`rounded-lg ${iconBg} p-1.5`}>{icon}</div>
        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
          {label}
        </span>
      </div>
      <p className="text-3xl font-bold text-foreground tabular-nums">
        {loading ? "—" : total.toLocaleString()}
      </p>
      <div className="flex flex-col gap-2 border-t border-border pt-3">
        {rows.map((r) => (
          <div key={r.label} className="flex items-center justify-between">
            <span className="flex items-center gap-1 text-xs text-muted-foreground">
              {r.icon}
              {r.label}
            </span>
            <Link
              href={r.href}
              className="text-sm font-semibold text-foreground tabular-nums hover:text-primary transition-colors"
            >
              {loading ? "—" : r.value.toLocaleString()}
            </Link>
          </div>
        ))}
      </div>
      <Link
        href={href}
        className="flex items-center gap-1 text-xs text-primary hover:underline mt-auto pt-1"
      >
        View all <ArrowRight className="h-3 w-3" />
      </Link>
    </div>
  );
}

function RevenueSection({
  label,
  bookingCount,
  rows,
  subtotal,
  loading,
  renderRow,
}: {
  label: React.ReactNode;
  bookingCount: number;
  rows: { currency: string; totalMinor: number }[];
  subtotal: number;
  loading: boolean;
  renderRow: (r: { currency: string; totalMinor: number }) => React.ReactNode;
}) {
  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center justify-between mb-1">
        <span className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
          {label}
        </span>
        <span className="text-xs text-muted-foreground tabular-nums">
          {loading ? "—" : bookingCount.toLocaleString()} bookings
        </span>
      </div>
      {rows.length === 0 ? (
        <p className="text-xs text-muted-foreground py-1">No revenue yet</p>
      ) : (
        rows.map(renderRow)
      )}
      {rows.length > 0 && (
        <div className="flex items-center justify-between rounded-md bg-muted/40 px-3 py-2 mt-1">
          <span className="text-xs font-semibold text-muted-foreground">
            Subtotal
          </span>
          <span className="text-sm font-bold text-foreground tabular-nums">
            {formatCurrency(subtotal, "ETB")}
          </span>
        </div>
      )}
    </div>
  );
}

function DashboardPageContent() {
  const { data: exchangeRates = [] } = useQuery<any[]>({
    queryKey: ["currencies"],
    queryFn: () => apiClient.get("/currencies"),
    select: (d: any) => (Array.isArray(d) ? d : (d?.data ?? d?.items ?? [])),
  });

  const toEtbRate = (currency: string): number | null => {
    if (currency === "ETB") return 1;
    const r = exchangeRates.find(
      (x: any) => x.fromCurrency === "ETB" && x.toCurrency === currency,
    );
    return r ? 1 / r.rate : null;
  };

  const {
    data: stats,
    isLoading: statsLoading,
    error: statsError,
  } = useQuery({
    queryKey: ["backoffice-stats"],
    queryFn: dashboardApi.getBackofficeStats,
    retry: 1,
    staleTime: 30000,
    refetchInterval: 60000,
  });

  const { data: paymentMethods } = useQuery({
    queryKey: ["payment-methods"],
    queryFn: dashboardApi.getPaymentMethods,
    retry: 1,
  });

  const calcGrand = (rows: { currency: string; totalMinor: number }[]) =>
    rows.reduce((sum, { currency, totalMinor }) => {
      const rate = toEtbRate(currency);
      return rate !== null ? sum + Math.round(totalMinor * rate) : sum;
    }, 0);

  const normalRows = stats?.revenueByCurrency ?? [];
  const packageRows = stats?.packageRevenueByCurrency ?? [];
  const normalGrand = calcGrand(normalRows);
  const packageGrand = calcGrand(packageRows);
  const overallGrand = normalGrand + packageGrand;

  const renderRevenueRow = ({
    currency,
    totalMinor,
  }: {
    currency: string;
    totalMinor: number;
  }) => {
    const rate = toEtbRate(currency);
    const etbMinor = rate !== null ? Math.round(totalMinor * rate) : null;
    return (
      <div
        key={currency}
        className="flex items-center justify-between rounded-md bg-muted/20 px-3 py-2"
      >
        <div className="flex items-center gap-1.5">
          <Banknote className="h-3.5 w-3.5 text-muted-foreground" />
          <span className="text-sm font-medium text-foreground">
            {currency}
          </span>
        </div>
        <span className="text-sm font-semibold text-foreground tabular-nums">
          {formatCurrency(totalMinor, currency)}
          {currency !== "ETB" && etbMinor !== null && (
            <span className="ml-1.5 text-xs font-normal text-muted-foreground">
              ({formatCurrency(etbMinor, "ETB")})
            </span>
          )}
        </span>
      </div>
    );
  };

  return (
    <div className="space-y-6 p-6">
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
          <p className="text-muted-foreground mt-1">
            Welcome back! Here&apos;s your operational summary.
          </p>
        </div>
        <Link
          href="/boarding"
          className="flex items-center gap-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 text-sm font-medium transition-colors"
        >
          <ScanLine className="h-4 w-4" />
          Boarding
        </Link>
      </div>

      {statsError && (
        <div className="rounded-lg border border-orange-200 bg-orange-50 dark:border-orange-800 dark:bg-orange-950/30 p-4">
          <div className="flex items-center gap-2">
            <AlertCircle className="h-5 w-5 text-orange-600 dark:text-orange-400" />
            <div>
              <h3 className="font-semibold text-orange-800 dark:text-orange-200">
                Some data may be outdated
              </h3>
              <p className="text-sm text-orange-700 dark:text-orange-300">
                Unable to fetch live data. Showing cached or sample information.
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Stat cards */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <StatCard
          icon={
            <BookOpen className="h-4 w-4 text-blue-600 dark:text-blue-400" />
          }
          iconBg="bg-blue-100 dark:bg-blue-900/30"
          label="Bookings"
          total={stats?.totalBookings ?? 0}
          loading={statsLoading}
          href="/bookings"
          rows={[
            {
              label: "Regular",
              value: stats?.totalNormalBookings ?? 0,
              href: "/bookings",
            },
            {
              label: "Package",
              value: stats?.totalPackageBookings ?? 0,
              href: "/package-bookings",
            },
          ]}
        />
        <StatCard
          icon={
            <Ticket className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
          }
          iconBg="bg-emerald-100 dark:bg-emerald-900/30"
          label="Tickets"
          total={stats?.totalTickets ?? 0}
          loading={statsLoading}
          href="/tickets"
          rows={[
            {
              label: "Regular",
              value: stats?.totalNormalTickets ?? 0,
              href: "/tickets",
            },
            {
              label: "Package",
              value: stats?.totalPackageTickets ?? 0,
              href: "/tickets",
            },
          ]}
        />

        {/* Revenue card */}
        <div className="card flex flex-col gap-3">
          <div className="flex items-center gap-2">
            <div className="rounded-lg bg-amber-100 dark:bg-amber-900/30 p-1.5">
              <Banknote className="h-4 w-4 text-amber-600 dark:text-amber-400" />
            </div>
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Revenue
            </span>
          </div>
          {statsLoading ? (
            <p className="text-muted-foreground text-sm">Loading…</p>
          ) : (
            <>
              <p className="text-3xl font-bold text-emerald-600 dark:text-emerald-400 tabular-nums">
                {formatCurrency(overallGrand, "ETB")}
              </p>
              <div className="flex flex-col gap-2 border-t border-border pt-3">
                <div className="flex items-center justify-between">
                  <p className="text-xs text-muted-foreground">Regular</p>
                  <p className="text-sm font-semibold text-foreground tabular-nums">
                    {formatCurrency(normalGrand, "ETB")}
                  </p>
                </div>
                <div className="flex items-center justify-between">
                  <p className="text-xs text-muted-foreground">Package</p>
                  <p className="text-sm font-semibold text-foreground tabular-nums">
                    {formatCurrency(packageGrand, "ETB")}
                  </p>
                </div>
              </div>
              <Link
                href="/payments"
                className="flex items-center gap-1 text-xs text-primary hover:underline mt-auto pt-1"
              >
                View payments <ArrowRight className="h-3 w-3" />
              </Link>
            </>
          )}
        </div>
      </div>

      {/* Revenue breakdown */}
      <div className="card">
        <h2 className="text-sm font-semibold uppercase tracking-widest text-muted-foreground mb-4">
          Revenue Breakdown
        </h2>
        {statsLoading ? (
          <p className="text-muted-foreground text-sm">Loading…</p>
        ) : !normalRows.length && !packageRows.length ? (
          <p className="text-muted-foreground text-sm">No revenue data yet.</p>
        ) : (
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
            <RevenueSection
              label="Regular"
              bookingCount={stats?.totalNormalBookings ?? 0}
              rows={normalRows}
              subtotal={normalGrand}
              loading={statsLoading}
              renderRow={renderRevenueRow}
            />
            <RevenueSection
              label="Package"
              bookingCount={stats?.totalPackageBookings ?? 0}
              rows={packageRows}
              subtotal={packageGrand}
              loading={statsLoading}
              renderRow={renderRevenueRow}
            />
          </div>
        )}
      </div>

      {/* Payment Methods Distribution */}
      {paymentMethods && paymentMethods.length > 0 && (
        <div className="card">
          <h2 className="mb-4 text-lg font-semibold text-foreground">
            Payment Methods Distribution
          </h2>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={paymentMethods}
                dataKey="count"
                nameKey="method"
                cx="50%"
                cy="50%"
                outerRadius={80}
                label
              >
                {paymentMethods.map((_: any, index: number) => (
                  <Cell
                    key={`cell-${index}`}
                    fill={COLORS[index % COLORS.length]}
                  />
                ))}
              </Pie>
              <Tooltip />
            </PieChart>
          </ResponsiveContainer>
        </div>
      )}
    </div>
  );
}

export default function DashboardPage() {
  return (
    <PermissionGuard permission={PERMS.dashboard}>
      <DashboardPageContent />
    </PermissionGuard>
  );
}
