import type { ExportMeta } from "~/server/account-export";
import { useDataExport } from "~/hooks/use-data-export";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";

export function ExportDataPanel({ pending }: { pending: ExportMeta | null }) {
  const archive = useDataExport();
  return (
    <Panel title="Export your data">
      <div className="space-y-3 p-4 text-sm text-kumo-subtle">
        <ErrorBanner message={archive.error} />
        <p>
          Download a JSON archive of your profile, email addresses, public keys, token metadata, issues, pull requests,
          reviews, discussions, comments and releases you wrote, stars, follows, notification settings and billing
          summary. Clone your repositories with Git for their contents. You can create one archive a day; it stays
          available for 24 hours.
        </p>
        {pending ? (
          <div className="flex flex-wrap items-center gap-3">
            <Button type="button" pending={archive.pending} onClick={() => archive.save(pending.id)}>
              Download archive
            </Button>
            <span className="text-xs text-kumo-subtle">
              Created <RelativeTime timestamp={pending.createdAt} />; available for 24 hours
            </span>
          </div>
        ) : (
          <Button type="button" pending={archive.pending} onClick={archive.create}>
            Export your data
          </Button>
        )}
      </div>
    </Panel>
  );
}