Follow-ups

"use client"

import * as React from "react"

import { Callout } from "@/components/ui/callout"
import { Checkbox } from "@/components/ui/checkbox"
import { PriorityBadge, type Priority } from "@/components/ui/priority-badge"
import { Widget } from "@/components/ui/widget"

import { completeFollowUp } from "../actions"
import { type FollowUp } from "../data"

/** How many rows the card shows before it counts the rest in its footer. */
const SHOWN = 6

const DUE_DAY = new Intl.DateTimeFormat("en-US", {
  weekday: "short",
  month: "short",
  day: "numeric",
  timeZone: "UTC",
})

/** A priority read off the days left: overdue or due by tomorrow is high, inside three days medium. */
function priorityOf(row: FollowUp): Extract<Priority, "high" | "medium" | "low"> {
  if (row.overdue || row.daysUntil <= 1) return "high"
  if (row.daysUntil <= 3) return "medium"
  return "low"
}

function dueText(row: FollowUp): string {
  if (row.overdue) return `Overdue · ${DUE_DAY.format(row.dueAt)}`
  if (row.daysUntil === 0) return "Due today"
  if (row.daysUntil === 1) return "Due tomorrow"
  return `Due ${DUE_DAY.format(row.dueAt)}`
}

export type FollowUpsProps = { rows: FollowUp[] }

/**
 * The week's follow-ups as a checklist. Ticking one writes through the server
 * and takes the row off the list; the name lands in a status line, because a
 * row that quietly vanished would not tell anyone what happened, and a refusal
 * gets its own alert rather than sharing that line.
 */
export function FollowUps({ rows }: FollowUpsProps) {
  const [list, setList] = React.useState(rows)
  const [notice, setNotice] = React.useState("")
  const [refusal, setRefusal] = React.useState("")

  const shown = list.slice(0, SHOWN)
  const rest = list.length - shown.length

  async function tick(row: FollowUp) {
    setRefusal("")
    setNotice("")
    const result = await completeFollowUp(row.id)
    if (!result.ok) return setRefusal(result.error.message)
    setList((current) => current.filter((entry) => entry.id !== row.id))
    setNotice(`Done — ${result.data.name} is off the list.`)
  }

  return (
    <Widget
      data-widget="widget-crm-overview-follow-ups"
      title="Follow-ups"
      description={`${list.length} due this week`}
      footer={rest > 0 ? `${rest} more this week` : undefined}
      className="h-full"
    >
      <div className="flex flex-col gap-2">
        {refusal ? (
          <Callout variant="danger" role="alert">
            {refusal}
          </Callout>
        ) : null}

        <ul data-slot="follow-ups" aria-label="Follow-ups due this week" className="flex flex-col">
          {shown.map((row) => (
            <li
              key={row.id}
              className="flex items-start gap-3 border-b py-2.5 first:pt-0 last:border-b-0 last:pb-0"
            >
              <Checkbox
                aria-label={`Mark ${row.name} done`}
                className="mt-0.5"
                onCheckedChange={(checked) => {
                  if (checked) void tick(row)
                }}
              />
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium">{row.name}</p>
                <p className="truncate text-xs text-muted-foreground">
                  <span>{row.company}</span>
                  <span aria-hidden="true">{" · "}</span>
                  <span>{dueText(row)}</span>
                </p>
              </div>
              <PriorityBadge priority={priorityOf(row)} size="sm" className="mt-0.5" />
            </li>
          ))}
        </ul>
        {list.length === 0 ? (
          <p className="py-6 text-center text-sm text-muted-foreground">Nothing due this week.</p>
        ) : null}

        <p role="status" aria-live="polite" className="min-h-4 text-xs text-muted-foreground">
          {notice}
        </p>
      </div>
    </Widget>
  )
}

/**
 * What /crm reads. The leads are `db.leads`, the pipeline and the quarter's
 * won value are `db.deals`, the customer count is `db.customers`, and the
 * target is a rule over the won deals rather than a number written down.
 * "Now" is `REFERENCE_DATE`, and the quarter is the one it falls in.
 *
 * The client islands import only the types below; `db` never crosses into the
 * browser.
 */
import { formatDate, formatNumber, getInitials } from "@/lib/format"
import { REFERENCE_DATE, db, type Deal, type Lead, type Member } from "@/lib/sample-data"

import { money } from "./money"

const DAY = 86_400_000
const NOW = REFERENCE_DATE.getTime()

/** Midnight UTC on the first day of the quarter `offset` quarters from the current one. */
function quarterStart(offset: number): number {
  const month = Math.floor(REFERENCE_DATE.getUTCMonth() / 3) * 3 + offset * 3
  return Date.UTC(REFERENCE_DATE.getUTCFullYear(), month, 1)
}

/** Midnight UTC on the first of the month `offset` months from the current one. */
function monthStart(offset: number): number {
  return Date.UTC(REFERENCE_DATE.getUTCFullYear(), REFERENCE_DATE.getUTCMonth() + offset, 1)
}

/** "Q3 2026" — the quarter every number on the page is measured over. */
export const QUARTER_LABEL = `Q${Math.floor(REFERENCE_DATE.getUTCMonth() / 3) + 1} ${REFERENCE_DATE.getUTCFullYear()}`

const OPEN_STAGES: Deal["stage"][] = ["lead", "qualified", "proposal", "negotiation"]

/** The change from `before` to `now` as a ratio; flat when there was nothing before. */
const change = (now: number, before: number): number => (before === 0 ? 0 : (now - before) / before)

/** Closed-won value for the deals that closed inside a window; a won deal closes on its expected day. */
function wonBetween(from: number, to: number): number {
  return db.deals
    .all()
    .filter((deal) => deal.stage === "won")
    .filter((deal) => deal.expectedCloseAt.getTime() >= from && deal.expectedCloseAt.getTime() < to)
    .reduce((sum, deal) => sum + deal.amountCents, 0)
}

export type QuarterTarget = {
  wonCents: number
  targetCents: number
  /** Whole percent of the target reached, capped at 100 for the ring. */
  percent: number
}

/**
 * The quarter's target, set from the quarter itself: a third again over what
 * has been won so far, rounded to a round figure — the number a sales lead
 * would put on the wall rather than one the seed wrote.
 */
export function quarterTarget(): QuarterTarget {
  const wonCents = wonBetween(quarterStart(0), NOW)
  const targetCents = Math.round((wonCents * 1.35) / 1000) * 1000
  const percent = targetCents === 0 ? 0 : Math.min(100, Math.round((wonCents / targetCents) * 100))
  return { wonCents, targetCents, percent }
}

export type CrmStat = {
  key: "customers" | "open" | "won"
  label: string
  value: string
  /** Change against the period before, as a ratio. */
  delta?: number
  description: string
}

/** The three counted headline numbers; the target beside them is `quarterTarget`. */
export function crmStats(): CrmStat[] {
  const customers = db.customers.all()
  const atLastMonthEnd = customers.filter((customer) => customer.createdAt.getTime() < monthStart(0)).length
  const open = db.deals.all().filter((deal) => OPEN_STAGES.includes(deal.stage))
  const openValue = open.reduce((sum, deal) => sum + deal.amountCents, 0)
  const won = wonBetween(quarterStart(0), NOW)
  const wonBefore = wonBetween(quarterStart(-1), quarterStart(0))

  return [
    {
      key: "customers",
      label: "Customers",
      value: formatNumber(customers.length),
      delta: change(customers.length, atLastMonthEnd),
      description: "vs last month",
    },
    {
      key: "open",
      label: "Open deals",
      value: formatNumber(open.length),
      description: `${money(openValue)} in play`,
    },
    {
      key: "won",
      label: "Won this quarter",
      value: money(won),
      delta: change(won, wonBefore),
      description: "vs last quarter",
    },
  ]
}

export type SourceCount = { source: Lead["source"]; count: number }

/** How many leads each channel brought in, largest first. */
export function leadsBySource(): SourceCount[] {
  const counts = new Map<Lead["source"], number>()
  for (const lead of db.leads.all()) counts.set(lead.source, (counts.get(lead.source) ?? 0) + 1)
  return [...counts.entries()]
    .map(([source, count]) => ({ source, count }))
    .sort((a, b) => b.count - a.count)
}

export type FollowUp = {
  id: string
  name: string
  company: string
  dueAt: Date
  /** Whole days from today to the due day; negative when it has slipped past. */
  daysUntil: number
  overdue: boolean
}

const utcDay = (at: number) => Math.floor(at / DAY)

/** Every lead whose next action falls inside the week, soonest first. */
export function followUps(): FollowUp[] {
  return db.leads
    .all()
    // Unset and null both mean no follow-up; only a Date is one to list.
    .filter((lead): lead is Lead & { nextActionAt: Date } => lead.nextActionAt instanceof Date)
    .filter((lead) => lead.nextActionAt.getTime() <= NOW + 7 * DAY)
    .sort((a, b) => a.nextActionAt.getTime() - b.nextActionAt.getTime())
    .map((lead) => ({
      id: lead.id,
      name: lead.name,
      company: lead.company,
      dueAt: lead.nextActionAt,
      daysUntil: utcDay(lead.nextActionAt.getTime()) - utcDay(NOW),
      overdue: lead.nextActionAt.getTime() < NOW,
    }))
}

export type PipelineStage = {
  stage: Exclude<Deal["stage"], "lost">
  count: number
  valueCents: number
  /** This stage's share of the pipeline's value, as a whole percent. */
  share: number
}

const PIPELINE: PipelineStage["stage"][] = ["lead", "qualified", "proposal", "negotiation", "won"]

/** The pipeline stage by stage, lost deals aside — they are not on it any more. */
export function pipeline(): PipelineStage[] {
  const deals = db.deals.all().filter((deal) => deal.stage !== "lost")
  const total = deals.reduce((sum, deal) => sum + deal.amountCents, 0)
  return PIPELINE.map((stage) => {
    const rows = deals.filter((deal) => deal.stage === stage)
    const valueCents = rows.reduce((sum, deal) => sum + deal.amountCents, 0)
    return {
      stage,
      count: rows.length,
      valueCents,
      share: total === 0 ? 0 : Math.round((valueCents / total) * 100),
    }
  })
}

/** One row of the leads table. */
export type LeadRow = Pick<
  Lead,
  "id" | "name" | "email" | "avatarUrl" | "company" | "source" | "status" | "valueCents" | "createdAt"
>

/** Every lead on the books; the table sorts and pages them itself. */
export function leadRows(): LeadRow[] {
  return db.leads
    .all()
    .map(({ id, name, email, company, source, status, valueCents, createdAt }) => ({
      id,
      name,
      email,
      company,
      source,
      status,
      valueCents,
      createdAt,
    }))
}

/** The line under the title: the quarter, and when the numbers were read. */
export function lastUpdated(): string {
  return `${QUARTER_LABEL} to date · synced ${formatDate(REFERENCE_DATE, "medium", { timeZone: "UTC" })}`
}

/** 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 }
}

"use server"

import { mockAuthAdapter } from "@/lib/auth-adapter"
import { db, type Result } from "@/lib/sample-data"

/**
 * What this page changes on its own. Server actions, so the page can stay a
 * server component and still hand its client islands something to call, and
 * `Result` so every caller reads one success-or-error shape. Converting a
 * lead is not here: the leads page does it too, so it is the dashboard's —
 * `convertLead` in `@/lib/dashboards/crm/actions`.
 */

export async function signOut(): Promise<Result<{ signedOut: true }>> {
  await mockAuthAdapter.signOut()
  return { ok: true, data: { signedOut: true } }
}

const notFound = (id: string): Result<never> => ({
  ok: false,
  error: { code: "not_found", message: `No lead with id "${id}".` },
})

/**
 * Ticks a follow-up off: the lead keeps its stage, and its next action is
 * written as `null` — the repository's `update` keeps `undefined` out of a
 * patch, so null is how the entity spells "done", and every reader of
 * `nextActionAt` takes it for no follow-up.
 */
export async function completeFollowUp(id: string): Promise<Result<{ id: string; name: string }>> {
  const lead = await db.leads.get(id)
  if (!lead) return notFound(id)
  if (!lead.nextActionAt) {
    return {
      ok: false,
      error: { code: "nothing_due", message: `${lead.name} has no follow-up to tick off.` },
    }
  }

  const updated = await db.leads.update(id, { nextActionAt: null })
  if (!updated.ok) return updated
  return { ok: true, data: { id, name: lead.name } }
}