import { PaymentMealType, PersonStatus, ReplacementItem } from "@prisma/client";
import {
  addPersonAction,
  addReplacementAction,
  convertAwaitingPaymentAction,
  createPaymentAction,
  logoutAction,
  markAbsentAction,
  updateMandaziOverrideAction,
  updatePersonAction
} from "@/app/actions";
import { formatDateInput } from "@/lib/utils";
import { Field, Input, PrimaryButton, SecondaryButton, Select, TextButton, TinyButton } from "@/components/ui";

export function LogoutForm({ compact = false }: { compact?: boolean }) {
  return (
    <form action={logoutAction}>
      {compact ? <TextButton type="submit">Log out</TextButton> : <SecondaryButton type="submit" className="w-full">Log out</SecondaryButton>}
    </form>
  );
}

export function AddPersonForm() {
  return (
    <form action={addPersonAction} className="grid gap-3">
      <Field label="Name">
        <Input name="name" placeholder="Jane Doe" required />
      </Field>
      <div className="grid grid-cols-2 gap-3">
        <label className="flex items-center gap-2 rounded-2xl border border-[var(--border)] px-4 py-3 text-sm">
          <input type="checkbox" name="takesLunch" defaultChecked />
          <span>Lunch</span>
        </label>
        <label className="flex items-center gap-2 rounded-2xl border border-[var(--border)] px-4 py-3 text-sm">
          <input type="checkbox" name="takesMandazi" defaultChecked />
          <span>Mandazi</span>
        </label>
      </div>
      <Field label="Default mandazi quantity">
        <Input name="defaultMandaziQty" type="number" min={1} defaultValue={1} required />
      </Field>
      <PrimaryButton type="submit">Save person</PrimaryButton>
    </form>
  );
}

export function AddReplacementForm() {
  return (
    <form action={addReplacementAction} className="grid gap-3">
      <Field label="Name">
        <Input name="name" placeholder="Replacement buyer" required />
      </Field>
      <div className="grid grid-cols-2 gap-3">
        <Field label="Item">
          <Select name="item" defaultValue={ReplacementItem.mandazi}>
            <option value={ReplacementItem.mandazi}>Mandazi</option>
            <option value={ReplacementItem.lunch}>Lunch</option>
          </Select>
        </Field>
        <Field label="Quantity">
          <Input name="quantity" type="number" min={1} defaultValue={1} required />
        </Field>
      </div>
      <PrimaryButton type="submit">Add replacement</PrimaryButton>
    </form>
  );
}

export function AbsenceToggleForm({
  personId,
  isAbsent,
  compact = false
}: {
  personId: number;
  isAbsent: boolean;
  compact?: boolean;
}) {
  return (
    <form action={markAbsentAction}>
      <input type="hidden" name="personId" value={personId} />
      <input type="hidden" name="isAbsent" value={String(!isAbsent)} />
      {compact ? (
        <TinyButton type="submit" tone={isAbsent ? "default" : "danger"}>
          {isAbsent ? "Present" : "Absent"}
        </TinyButton>
      ) : (
        <SecondaryButton type="submit" className="w-full">
          {isAbsent ? "Mark present" : "Mark absent"}
        </SecondaryButton>
      )}
    </form>
  );
}

export function MandaziOverrideForm({
  personId,
  quantity
}: {
  personId: number;
  quantity: number;
}) {
  return (
    <div className="flex items-center gap-1">
      <form action={updateMandaziOverrideAction}>
        <input type="hidden" name="personId" value={personId} />
        <input type="hidden" name="quantity" value={quantity} />
        <input type="hidden" name="delta" value={-1} />
        <TinyButton type="submit" className="h-5.5 w-5.5 rounded-md px-0 text-[11px]">
          -
        </TinyButton>
      </form>
      <div className="flex h-5.5 min-w-6 items-center justify-center rounded-md border border-stone-200 bg-white px-1 text-[10px] font-medium text-stone-700 transition">
        {quantity}
      </div>
      <form action={updateMandaziOverrideAction}>
        <input type="hidden" name="personId" value={personId} />
        <input type="hidden" name="quantity" value={quantity} />
        <input type="hidden" name="delta" value={1} />
        <TinyButton type="submit" className="h-5.5 w-5.5 rounded-md px-0 text-[11px]">
          +
        </TinyButton>
      </form>
    </div>
  );
}

export function CreatePaymentForm({ personId }: { personId: number }) {
  return (
    <form action={createPaymentAction} className="grid gap-3">
      <input type="hidden" name="personId" value={personId} />
      <Field label="Meal type">
        <Select name="mealType" defaultValue={PaymentMealType.both}>
          <option value={PaymentMealType.both}>Both</option>
          <option value={PaymentMealType.lunch}>Lunch</option>
          <option value={PaymentMealType.mandazi}>Mandazi</option>
        </Select>
      </Field>
      <Field label="Coverage days">
        <Input name="coverageDays" type="number" min={1} defaultValue={4} />
      </Field>
      <PrimaryButton type="submit">Mark as paid</PrimaryButton>
    </form>
  );
}

export function AwaitingToPaymentForm({
  awaitingId,
  personId
}: {
  awaitingId: number;
  personId: number;
}) {
  return (
    <form action={convertAwaitingPaymentAction} className="grid gap-3">
      <input type="hidden" name="awaitingId" value={awaitingId} />
      <input type="hidden" name="personId" value={personId} />
      <Field label="Coverage days">
        <Input name="coverageDays" type="number" min={1} defaultValue={1} />
      </Field>
      <PrimaryButton type="submit">Convert to paid</PrimaryButton>
    </form>
  );
}

export function UpdatePersonForm({
  person
}: {
  person: {
    id: number;
    status: PersonStatus;
    defaultMandaziQty: number;
    leaveStart: Date | null;
    leaveEnd: Date | null;
  };
}) {
  return (
    <form action={updatePersonAction} className="grid gap-3">
      <input type="hidden" name="personId" value={person.id} />
      <Field label="Status">
        <Select name="status" defaultValue={person.status}>
          <option value={PersonStatus.active}>Active</option>
          <option value={PersonStatus.paused}>Paused</option>
        </Select>
      </Field>
      <Field label="Default mandazi quantity">
        <Input name="defaultMandaziQty" type="number" min={1} defaultValue={person.defaultMandaziQty} />
      </Field>
      <Field label="Leave start">
        <Input name="leaveStart" type="date" defaultValue={person.leaveStart ? formatDateInput(person.leaveStart) : ""} />
      </Field>
      <Field label="Leave end">
        <Input name="leaveEnd" type="date" defaultValue={person.leaveEnd ? formatDateInput(person.leaveEnd) : ""} />
      </Field>
      <PrimaryButton type="submit">Save changes</PrimaryButton>
    </form>
  );
}