import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { DutySwitch } from "@/components/duty-switch"
import type { Translate } from "@/lib/i18n"
import { OCCURRENCE_WORD, WEEKDAY_WORD } from "@/lib/i18n/duty-words"
import { isWeekday } from "@/lib/task-form"
import type { OwnDuty } from "@/lib/services/duties"
import { toggleOwnDuty } from "./actions"

/**
 * The recurring to-dos somebody set for themselves, under the form that makes
 * them.
 *
 * Here and not on `/tasks`, which lists the work due rather than the rules that
 * produce it, and not on `/positions/[id]`, which is an admin's page. Somebody
 * who adds a reminder wants to stop it from the place they added it.
 *
 * Nothing to show means no card at all: the page is a form for everybody who
 * has never used it, and a heading over an empty box reads as a fault.
 */

/**
 * What the duty does, as one sentence.
 *
 * The four keys are the ones the form's own preview line uses, so the sentence
 * somebody read before creating a duty is the sentence they read afterwards.
 * The day of the month is a number the sentence places, and the weekday a word
 * the dictionary names, because Thai puts neither where English does.
 */
function schedule(duty: OwnDuty, t: Translate): string {
  switch (duty.occurrence) {
    case "weekly":
      // A weekly duty with no day cannot be stored: the schema refuses the row
      // rather than keep a duty that is never due. The word for the week is
      // what is left to say if one ever is.
      return isWeekday(duty.dayOfWeek)
        ? t("taskForm.schedule.everyWeekday", {
            day: t(WEEKDAY_WORD[duty.dayOfWeek]),
          })
        : t(OCCURRENCE_WORD[duty.occurrence])
    case "monthly":
    case "quarterly":
      return duty.dayOfMonth === null
        ? t(OCCURRENCE_WORD[duty.occurrence])
        : t(
            duty.occurrence === "quarterly"
              ? "taskForm.schedule.quarterlyOn"
              : "taskForm.schedule.monthlyOn",
            { day: duty.dayOfMonth },
          )
    default:
      return t("occurrence.dailyWorking")
  }
}

export function OwnDuties({
  duties,
  t,
}: {
  duties: OwnDuty[]
  /** The reader's language, resolved once by the page. */
  t: Translate
}) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("selfDuties.title")}</CardTitle>
        <CardDescription>{t("selfDuties.hint")}</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        {duties.map((duty) => (
          <div
            key={duty.id}
            className="flex flex-wrap items-start justify-between gap-3 border-b pb-3 last:border-0 last:pb-0"
          >
            <div className="flex flex-col gap-1">
              <span className="flex items-center gap-2 font-medium">
                {duty.description}
                {duty.active ? null : (
                  <Badge variant="secondary">{t("position.dutyOff")}</Badge>
                )}
              </span>
              <span className="text-sm text-foreground/80">
                {schedule(duty, t)}
              </span>
            </div>
            <DutySwitch
              active={duty.active}
              toggle={toggleOwnDuty.bind(null, duty.id)}
            />
          </div>
        ))}
      </CardContent>
    </Card>
  )
}