Subscription

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Progress,
  Separator,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@cooud-ui/ui";
import { CreditCard, Download } from "lucide-react";

interface UsageMeter {
  id: string;
  label: string;
  display: string;
  value: number;
}

const usageMeters: UsageMeter[] = [
  { id: "usage-seats", label: "Seats", display: "18 / 25", value: 72 },
  { id: "usage-storage", label: "Storage", display: "164 GB / 250 GB", value: 66 },
  { id: "usage-api", label: "API calls", display: "842K / 1M", value: 84 },
];

interface Invoice {
  id: string;
  date: string;
  amount: string;
  status: "Paid" | "Pending";
}

const invoices: Invoice[] = [
  { id: "INV-2026-006", date: "Jun 1, 2026", amount: "$290.00", status: "Paid" },
  { id: "INV-2026-005", date: "May 1, 2026", amount: "$290.00", status: "Paid" },
  { id: "INV-2026-004", date: "Apr 1, 2026", amount: "$290.00", status: "Paid" },
  { id: "INV-2026-003", date: "Mar 1, 2026", amount: "$245.00", status: "Pending" },
];

export function SubscriptionBlock() {
  return (
    <section aria-label="Subscription and billing" className="mx-auto flex w-full max-w-3xl flex-col gap-6">
      {/* Current plan */}
      <Card className="shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Current plan</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            Your workspace is on the Team plan, billed monthly.
          </p>
          <div className="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
            <Badge variant="success">Active</Badge>
          </div>
        </CardHeader>
        <CardContent className="flex flex-wrap items-end justify-between gap-4">
          <div className="flex flex-col gap-1">
            <span className="font-display text-2xl font-semibold text-fg">Team</span>
            <span className="text-sm text-fg-secondary">Renews Jul 1, 2026</span>
          </div>
          <div className="flex items-baseline gap-1">
            <span className="font-display text-3xl font-semibold text-fg">$290</span>
            <span className="text-sm text-fg-tertiary">/ month</span>
          </div>
        </CardContent>
        <Separator />
        <CardFooter className="justify-end gap-3">
          <Button variant="outline" size="sm">
            Change plan
          </Button>
          <Button variant="ghost" size="sm">
            Cancel subscription
          </Button>
        </CardFooter>
      </Card>

      {/* Usage meters */}
      <Card className="shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Usage</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            Current billing period · resets Jul 1, 2026.
          </p>
        </CardHeader>
        <CardContent className="flex flex-col gap-5">
          {usageMeters.map(({ id, label, display, value }) => (
            <div key={id} className="flex flex-col gap-2">
              <div className="flex items-center justify-between text-sm">
                <span className="font-medium text-fg">{label}</span>
                <span className="text-fg-secondary">{display}</span>
              </div>
              <Progress value={value} aria-label={`${label} usage: ${display}`} />
            </div>
          ))}
        </CardContent>
      </Card>

      {/* Payment method */}
      <Card className="shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Payment method</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-wrap items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <span className="inline-flex size-10 items-center justify-center rounded-lg bg-surface-overlay text-fg-secondary">
              <CreditCard className="size-5" aria-hidden="true" />
            </span>
            <div className="flex flex-col">
              <span className="text-sm font-medium text-fg">Visa ending in 4242</span>
              <span className="text-sm text-fg-tertiary">Expires 08 / 2028</span>
            </div>
          </div>
          <Button variant="outline" size="sm">
            Update
          </Button>
        </CardContent>
      </Card>

      {/* Invoices */}
      <Card className="gap-0 pb-0 shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">Invoices</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            Download receipts for your past payments.
          </p>
        </CardHeader>
        <CardContent className="px-0 pt-2">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="pl-4 sm:pl-6">Invoice</TableHead>
                <TableHead>Date</TableHead>
                <TableHead>Amount</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="pr-4 text-right sm:pr-6">
                  <span className="sr-only">Download</span>
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {invoices.map((invoice) => (
                <TableRow key={invoice.id}>
                  <TableCell className="pl-4 font-medium text-fg sm:pl-6">{invoice.id}</TableCell>
                  <TableCell className="text-fg-secondary">{invoice.date}</TableCell>
                  <TableCell className="text-fg">{invoice.amount}</TableCell>
                  <TableCell>
                    <Badge variant={invoice.status === "Paid" ? "success" : "warning"}>
                      {invoice.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="pr-4 text-right sm:pr-6">
                    <Button variant="ghost" size="icon-sm" aria-label={`Download ${invoice.id}`}>
                      <Download className="size-4" aria-hidden="true" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </section>
  );
}