"use client";

import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { useMe } from "@/hooks/useMe";
import { useHospitalityCapabilities } from "@/modules/hospitality/hooks/useHospitalityCapabilities";
import { HOSPITALITY_PORTAL } from "@/modules/hospitality/constants/portals";
import { hospitalityApi } from "@/modules/hospitality/services/hospitality-api";
import { useTenantId } from "@/hooks/useTenantId";
import { Card, CardContent, Button, LoadingState, ErrorState, Badge, StatCard } from "@/components/ds";

export const HospitalityHub = function HospitalityHubPage() {
  const { me, loading, error, reload } = useMe();
  const { tenantId } = useTenantId();
  const caps = useHospitalityCapabilities();

  const healthQ = useQuery({
    queryKey: ["hospitality", "health"],
    queryFn: () => hospitalityApi.health(),
  });

  if (loading || caps.isLoading) return <LoadingState label="در حال بارگذاری تربت فود…" />;
  if (error) return <ErrorState message={error} onRetry={reload} />;
  if (!me?.current_tenant_id) {
    return <ErrorState message="برای استفاده از تربت فود workspace فعال لازم است." />;
  }

  const activeBundles = Object.entries(caps.data?.features ?? {}).filter(([, v]) => v).length;

  return (
    <div className="mx-auto max-w-2xl space-y-6 p-6">
      <div>
        <h1 className="mb-2 text-2xl font-bold text-secondary">تربت فود</h1>
        <p className="text-sm text-[var(--muted)]">پلتفرم مهمان‌نوازی سازمانی — Torbat Food</p>
      </div>
      <div className="grid gap-3 sm:grid-cols-3">
        <StatCard label="وضعیت API" value={healthQ.data?.status === "ok" ? "سالم" : "—"} />
        <StatCard label="نسخه" value={caps.data?.version ?? "—"} />
        <StatCard label="بسته فعال" value={String(activeBundles)} />
      </div>
      <Card>
        <CardContent className="space-y-4 p-6">
          <div className="flex items-center justify-between">
            <p className="font-medium">{HOSPITALITY_PORTAL.label}</p>
            <Badge tone="primary">Tenant {tenantId?.slice(0, 8)}…</Badge>
          </div>
          <p className="text-sm text-[var(--muted)]">{HOSPITALITY_PORTAL.description}</p>
          <Link href={HOSPITALITY_PORTAL.basePath}>
            <Button className="w-full">ورود به پنل مدیریت</Button>
          </Link>
        </CardContent>
      </Card>
      <div className="grid gap-2 sm:grid-cols-2">
        <Link href="/hospitality/capabilities"><Button variant="outline" className="w-full">قابلیت‌ها</Button></Link>
        <Link href="/hospitality/health"><Button variant="outline" className="w-full">سلامت سرویس</Button></Link>
      </div>
    </div>
  );
};

export default HospitalityHub;