"use client";

import { useState } from "react";
import { Panel, SectionHeading, TinyButton } from "@/components/ui";

type LunchPerson = {
  personId: number;
  name: string;
};

type MandaziPerson = {
  personId: number;
  name: string;
  quantity?: number;
};

function Chevron({ open }: { open: boolean }) {
  return (
    <svg
      viewBox="0 0 20 20"
      fill="none"
      aria-hidden="true"
      className={`h-4 w-4 text-stone-400 transition-transform duration-150 ${open ? "rotate-90" : "rotate-0"}`}
    >
      <path d="M7 4.5 12.5 10 7 15.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function TodaySection({
  title,
  count,
  children
}: {
  title: string;
  count?: number;
  children: React.ReactNode;
}) {
  return (
    <Panel>
      <SectionHeading title={title} count={count} />
      <div className="space-y-0.5">{children}</div>
    </Panel>
  );
}

function LunchRow({
  person,
  open,
  onToggle,
  markAbsentAction
}: {
  person: LunchPerson;
  open: boolean;
  onToggle: () => void;
  markAbsentAction: (formData: FormData) => Promise<void>;
}) {
  return (
    <div className="rounded-lg bg-stone-50 px-3 py-1.5">
      <button type="button" onClick={onToggle} className="flex w-full items-center justify-between gap-2 text-left">
        <p className="truncate text-sm font-medium text-stone-900">{person.name}</p>
        <Chevron open={open} />
      </button>
      {open ? (
        <div className="mt-1 flex items-center justify-end border-t border-stone-200/70 pt-1.5 transition-all duration-150">
          <form action={markAbsentAction}>
            <input type="hidden" name="personId" value={person.personId} />
            <input type="hidden" name="isAbsent" value="true" />
            <TinyButton type="submit" tone="danger" className="h-7 rounded-md px-2 text-[11px]">
              Absent
            </TinyButton>
          </form>
        </div>
      ) : null}
    </div>
  );
}

function QuantityControls({
  personId,
  quantity,
  updateMandaziOverrideAction
}: {
  personId: number;
  quantity: number;
  updateMandaziOverrideAction: (formData: FormData) => Promise<void>;
}) {
  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 w-5 rounded-md px-0 text-[10px]">
          -
        </TinyButton>
      </form>
      <div className="flex h-5 min-w-5 items-center justify-center rounded-md border border-stone-200 bg-white px-1 text-[10px] font-medium text-stone-700">
        {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 w-5 rounded-md px-0 text-[10px]">
          +
        </TinyButton>
      </form>
    </div>
  );
}

function MandaziRow({
  person,
  open,
  onToggle,
  markAbsentAction,
  updateMandaziOverrideAction
}: {
  person: MandaziPerson;
  open: boolean;
  onToggle: () => void;
  markAbsentAction: (formData: FormData) => Promise<void>;
  updateMandaziOverrideAction: (formData: FormData) => Promise<void>;
}) {
  const quantity = person.quantity ?? 1;

  return (
    <div className="rounded-lg bg-stone-50 px-3 py-1.5">
      <button type="button" onClick={onToggle} className="flex w-full items-center justify-between gap-2 text-left">
        <div className="flex min-w-0 items-center gap-2">
          <p className="truncate text-sm font-medium text-stone-900">{person.name}</p>
          <span className="inline-flex h-5 min-w-5 items-center justify-center rounded-md bg-stone-200/70 px-1.5 text-[10px] font-medium text-stone-600">
            {quantity}
          </span>
        </div>
        <Chevron open={open} />
      </button>
      {open ? (
        <div className="mt-1 flex items-center justify-between gap-2 border-t border-stone-200/70 pt-1.5 transition-all duration-150">
          <form action={markAbsentAction}>
            <input type="hidden" name="personId" value={person.personId} />
            <input type="hidden" name="isAbsent" value="true" />
            <TinyButton type="submit" tone="danger" className="h-7 rounded-md px-2 text-[11px]">
              Absent
            </TinyButton>
          </form>
          <QuantityControls
            personId={person.personId}
            quantity={quantity}
            updateMandaziOverrideAction={updateMandaziOverrideAction}
          />
        </div>
      ) : null}
    </div>
  );
}

export function TodayRowSections({
  lunchList,
  mandaziList,
  markAbsentAction,
  updateMandaziOverrideAction
}: {
  lunchList: LunchPerson[];
  mandaziList: MandaziPerson[];
  markAbsentAction: (formData: FormData) => Promise<void>;
  updateMandaziOverrideAction: (formData: FormData) => Promise<void>;
}) {
  const [openRow, setOpenRow] = useState<string | null>(null);

  function toggleRow(rowId: string) {
    setOpenRow((current) => (current === rowId ? null : rowId));
  }

  return (
    <>
      <TodaySection title="Mandazi">
        {mandaziList.map((person) => {
          const rowId = `mandazi-${person.personId}`;

          return (
            <MandaziRow
              key={rowId}
              person={person}
              open={openRow === rowId}
              onToggle={() => toggleRow(rowId)}
              markAbsentAction={markAbsentAction}
              updateMandaziOverrideAction={updateMandaziOverrideAction}
            />
          );
        })}
      </TodaySection>

      <TodaySection title="Lunch">
        {lunchList.map((person) => {
          const rowId = `lunch-${person.personId}`;

          return (
            <LunchRow
              key={rowId}
              person={person}
              open={openRow === rowId}
              onToggle={() => toggleRow(rowId)}
              markAbsentAction={markAbsentAction}
            />
          );
        })}
      </TodaySection>
    </>
  );
}