"use client";

import Link from "next/link";
import { useMe } from "@/hooks/useMe";
import { PAYMENT_PORTAL } from "@/modules/payment/constants/portals";
import { Card, CardContent, Button, LoadingState, ErrorState } from "@/components/ds";

export const PaymentHub = function PaymentHubPage() {
  const { me, loading, error, reload } = useMe();
  if (loading) return <LoadingState label="در حال بارگذاری تربت‌پی…" />;
  if (error) return <ErrorState message={error} onRetry={reload} />;
  if (!me?.current_tenant_id) {
    return <ErrorState message="برای استفاده از تربت‌پی workspace فعال لازم است." />;
  }

  return (
    <div className="mx-auto flex min-h-[70vh] max-w-lg flex-col items-center justify-center gap-6 p-6 text-center">
      <div className="text-5xl">💳</div>
      <div>
        <h1 className="text-2xl font-bold text-secondary">{PAYMENT_PORTAL.label}</h1>
        <p className="mt-2 text-sm text-[var(--muted)]">{PAYMENT_PORTAL.description}</p>
      </div>
      <Card className="w-full">
        <CardContent className="space-y-3 p-6">
          <p className="font-medium">{PAYMENT_PORTAL.label}</p>
          <p className="text-sm text-[var(--muted)]">{PAYMENT_PORTAL.description}</p>
          <Link href="/payment/dashboard">
            <Button className="w-full">ورود به پنل پرداخت</Button>
          </Link>
        </CardContent>
      </Card>
    </div>
  );
};

export default PaymentHub;