"use client";

import { useCreditsBalance } from "@/components/billing/hooks";
import { useMe } from "@/components/me-context";
import { Time } from "@/components/time";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { useLocaleFunction } from "@/hooks/use-localed";
import { renderRemarkInline } from "@/lib/remark-inline";

export function CreditsBalances() {
  const t = useLocaleFunction();
  const { data: me } = useMe();
  const { data: balance } = useCreditsBalance(me);

  return (
    <section className="grid grid-cols-2 gap-4">
      <Card className="shadow-none">
        <CardHeader>
          <CardTitle>{t("credits.balance.paid.title")}</CardTitle>
          <CardDescription>
            {renderRemarkInline(t("credits.balance.paid.description"))}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Value count={balance?.paid_credits} />
        </CardContent>
      </Card>
      <Card className="shadow-none">
        <CardHeader>
          <CardTitle>{t("credits.balance.free.title")}</CardTitle>
          <CardDescription>
            {renderRemarkInline(t("credits.balance.free.description"))}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Value count={balance?.free_credits} />
        </CardContent>
        <CardFooter>
          <Dialog>
            <DialogTrigger asChild>
              <Button className="ml-auto" variant="outline">
                {t("credits.balance.free.details")}
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{t("credits.balance.free.title")}</DialogTitle>
                <DialogDescription>
                  {renderRemarkInline(t("credits.balance.free.description"))}
                </DialogDescription>
              </DialogHeader>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>
                      {t("credits.balance.free.details.amounts")}
                    </TableHead>
                    <TableHead>
                      {t("credits.balance.free.details.created-at")}
                    </TableHead>
                    <TableHead>
                      {t("credits.balance.free.details.expired-at")}
                    </TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {balance?.free_credits_details.map((detail) => (
                    <TableRow key={detail.id}>
                      <TableCell>
                        <span className="font-semibold">
                          {nf.format(detail.amount)}
                        </span>
                        <span className="text-muted-foreground">
                          {" / "}
                          {nf.format(detail.initial_amount)}
                        </span>
                      </TableCell>
                      <TableCell>
                        <Time value={detail.created_at} />
                      </TableCell>
                      <TableCell>
                        <Time value={detail.expires_at} />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
              <DialogFooter>
                <DialogClose>{t("common.close")}</DialogClose>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </CardFooter>
      </Card>
    </section>
  );
}

const nf = new Intl.NumberFormat(["en"]);

function Value({ count }: { count: number | undefined }) {
  return (
    <span className="text-2xl font-bold font-mono">
      {count != null ? nf.format(count) : "-"}
    </span>
  );
}