Transfers by month

"use client"

import { formatNumber } from "@/lib/format"
import { ChartCard } from "@/components/ui/chart-card"
import { StackedBarChart } from "@/components/ui/stacked-bar-chart"

import { type TransferPoint } from "../data"

/** Transfers by month, desktop stacked on mobile, with the window it covers in the strip. */
export function TransfersChart({ points, range }: { points: TransferPoint[]; range: string }) {
  return (
    <ChartCard
      data-widget="widget-projects-files-transfers-chart"
      title="Transfers by month"
      description="Files moved in or out, by the device that moved them."
      actions={<span className="text-xs tabular-nums text-muted-foreground">{range}</span>}
      height={260}
      className="h-full"
    >
      <StackedBarChart
        data={points}
        index="month"
        series={[
          { key: "desktop", label: "Desktop" },
          { key: "mobile", label: "Mobile" },
        ]}
        valueFormatter={(value) => formatNumber(value)}
        height={260}
        legend="bottom"
      />
    </ChartCard>
  )
}

/**
 * What this page reads. Every file comes from `db.files`; the four groups,
 * the storage band and the recent uploads are rules over those rows, and
 * the quota is what the workspace's plan includes, read off `db.plans`. The
 * two series no row records — transfers by month and uploads by range — are
 * generated once from `seeded("files-overview")`. "Now" is `REFERENCE_DATE`.
 *
 * The client islands import only the types below. The words and icons the
 * page puts on a kind live beside them in `components/files-vocabulary.ts`,
 * so nothing that reaches `db` is ever pulled into the browser.
 */
import { getInitials } from "@/lib/format"
import { REFERENCE_DATE, db, seeded, type File, type Member } from "@/lib/sample-data"

export type FileKind = File["kind"]

/** One file as the recent-uploads table prints it. Exported because the star returns one. */
export type FileRow = {
  id: string
  name: string
  kind: FileKind
  sizeBytes: number
  ownerName: string
  ownerInitials: string
  modifiedAt: Date
  starred: boolean
}

// Read per call, never held at module scope: a member renamed since the server
// started is the owner's name on the next render.
const membersById = () => new Map(db.members.all().map((member) => [member.id, member]))

export function toRow(file: File, members = membersById()): FileRow {
  const owner = members.get(file.ownerId)
  return {
    id: file.id,
    name: file.name,
    kind: file.kind,
    sizeBytes: file.sizeBytes,
    ownerName: owner?.name ?? "Someone",
    ownerInitials: getInitials(owner?.name ?? "Someone"),
    modifiedAt: file.modifiedAt,
    starred: file.starred,
  }
}

/** Every file that is not a folder. */
const stored = () => db.files.all().filter((row) => row.kind !== "folder")

export type StorageGroupId = "documents" | "images" | "videos" | "other"

export type StorageGroup = {
  id: StorageGroupId
  label: string
  count: number
  bytes: number
  /** This group's share of everything used, 0–1. */
  share: number
}

// The four tiles: three kinds on their own, and the rest together.
const GROUPS: readonly { id: StorageGroupId; label: string; kinds: FileKind[] }[] = [
  { id: "documents", label: "Documents", kinds: ["document"] },
  { id: "images", label: "Images", kinds: ["image"] },
  { id: "videos", label: "Videos", kinds: ["video"] },
  { id: "other", label: "Other", kinds: ["audio", "archive", "other"] },
]

/** The drive in four groups, each with its count, its bytes and its share of what is used. */
export function storageGroups(): StorageGroup[] {
  const rows = stored()
  const used = rows.reduce((sum, row) => sum + row.sizeBytes, 0)
  return GROUPS.map((group) => {
    const inGroup = rows.filter((row) => group.kinds.includes(row.kind))
    const bytes = inGroup.reduce((sum, row) => sum + row.sizeBytes, 0)
    return { id: group.id, label: group.label, count: inGroup.length, bytes, share: used === 0 ? 0 : bytes / used }
  })
}

const GB = 1024 ** 3

/**
 * What the workspace's plan includes: the Team tier's "100 GB storage" line,
 * read off the plan rather than written here. A plan that names no figure
 * gets twice what is used, rounded up to a whole hundred gigabytes.
 */
export function storageQuota(): number {
  const plan = db.plans.all().find((entry) => entry.popular) ?? db.plans.all()[0]
  const named = plan?.features.map((feature) => feature.match(/^(\d+) GB storage$/)?.[1]).find(Boolean)
  if (named) return Number(named) * GB
  const used = stored().reduce((sum, row) => sum + row.sizeBytes, 0)
  return Math.max(1, Math.ceil((used * 2) / (100 * GB))) * 100 * GB
}

export type StorageBand = {
  usedBytes: number
  quotaBytes: number
  freeBytes: number
  /** Bytes per kind, largest first. */
  segments: { kind: FileKind; bytes: number }[]
}

/** The band under the tiles: used against the quota, split by kind. */
export function storageBand(): StorageBand {
  const rows = stored()
  const usedBytes = rows.reduce((sum, row) => sum + row.sizeBytes, 0)
  const quotaBytes = storageQuota()
  const byKind = new Map<FileKind, number>()
  for (const row of rows) byKind.set(row.kind, (byKind.get(row.kind) ?? 0) + row.sizeBytes)
  return {
    usedBytes,
    quotaBytes,
    freeBytes: Math.max(0, quotaBytes - usedBytes),
    segments: [...byKind.entries()]
      .map(([kind, bytes]) => ({ kind, bytes }))
      .sort((a, b) => b.bytes - a.bytes),
  }
}

const rand = seeded("files-overview")

// Drawn once, in a fixed order: twelve months of transfers, then the three
// upload series, so each is the same on every render.
const TRANSFERS = Array.from({ length: 12 }, () => ({
  desktop: 140 + Math.floor(rand() * 120),
  mobile: 60 + Math.floor(rand() * 90),
}))
const UPLOADS_12M = Array.from({ length: 12 }, (_, index) => 60 + index * 4 + Math.floor(rand() * 40))
const UPLOADS_30D = Array.from({ length: 30 }, () => 1 + Math.floor(rand() * 7))
const UPLOADS_7D = Array.from({ length: 7 }, () => 2 + Math.floor(rand() * 6))

const MONTH = new Intl.DateTimeFormat("en-US", { month: "short", timeZone: "UTC" })
const MONTH_YEAR = new Intl.DateTimeFormat("en-US", { month: "short", year: "numeric", timeZone: "UTC" })
const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
const DAY_MS = 86_400_000

/** The first of the month `back` months before the reference month. */
function monthStart(back: number): Date {
  return new Date(Date.UTC(REFERENCE_DATE.getUTCFullYear(), REFERENCE_DATE.getUTCMonth() - back, 1))
}

export type TransferPoint = { month: string; desktop: number; mobile: number }

/** Transfers by month over the last twelve complete months, desktop and mobile. */
export function transfersByMonth(): TransferPoint[] {
  return TRANSFERS.map((point, index) => ({ month: MONTH.format(monthStart(12 - index)), ...point }))
}

/** "Sep 2025 – Aug 2026": the window the transfers cover. */
export function transfersRange(): string {
  return `${MONTH_YEAR.format(monthStart(12))} – ${MONTH_YEAR.format(monthStart(1))}`
}

export type UploadRange = "12m" | "30d" | "7d"
export type UploadPoint = { label: string; uploads: number }

/** Uploads per month, per day over thirty days, and per day over seven, keyed by range. */
export function uploadsByRange(): Record<UploadRange, UploadPoint[]> {
  const day = (back: number) => DAY.format(new Date(REFERENCE_DATE.getTime() - back * DAY_MS))
  return {
    "12m": UPLOADS_12M.map((uploads, index) => ({ label: MONTH.format(monthStart(12 - index)), uploads })),
    "30d": UPLOADS_30D.map((uploads, index) => ({ label: day(30 - index), uploads })),
    "7d": UPLOADS_7D.map((uploads, index) => ({ label: day(7 - index), uploads })),
  }
}

/** The eight files touched most recently. */
export function recentUploads(): FileRow[] {
  const members = membersById()
  return stored()
    .sort((a, b) => b.modifiedAt.getTime() - a.modifiedAt.getTime())
    .slice(0, 8)
    .map((file) => toRow(file, members))
}

/** The line under the title: how much the drive holds. */
export function driveSummary(): string {
  const rows = db.files.all()
  const folders = rows.filter((row) => row.kind === "folder").length
  return `${rows.length - folders} files in ${folders} folders`
}

/** The bell's contents: the newest notifications, unread first in the panel. */
export function shellNotifications() {
  return db.notifications
    .all()
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .slice(0, 6)
    .map(({ id, title, description, at, read, href }) => ({ id, title, description, at, read, href }))
}

function ownerRow(): Member {
  return db.members.all().find((member) => member.role === "owner") ?? db.members.all()[0]
}

/** The person looking at the page: whoever owns this workspace. */
export function currentUser() {
  const owner = ownerRow()
  return { name: owner.name, email: owner.email, initials: getInitials(owner.name), avatarUrl: owner.avatarUrl }
}