"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Badge, Panel, SectionHeading, TinyButton } from "@/components/ui";

type PaymentMealTypeValue = "lunch" | "mandazi" | "both";

type PaymentPerson = {
  id: number;
  name: string;
  payments: Array<{
    id: number;
    mealType: PaymentMealTypeValue;
    remainingDays: number;
    coverageDays: number;
  }>;
};

type AwaitingPaymentRow = {
  id: number;
  name: string;
  item: "lunch" | "mandazi";
  quantity: number;
  amount: number;
};

function SummaryCard({
  label,
  value
}: {
  label: string;
  value: number;
}) {
  return (
    <div className="rounded-xl border border-stone-200/80 bg-stone-50 px-3 py-3">
      <p className="text-xs font-medium uppercase tracking-[0.08em] text-[var(--muted)]">{label}</p>
      <p className="mt-1 text-2xl font-semibold text-stone-950">{value}</p>
    </div>
  );
}

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 QuickPayForm({
  personId,
  createPaymentAction
}: {
  personId: number;
  createPaymentAction: (formData: FormData) => Promise<void>;
}) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  return (
    <div
      onClick={(event) => {
        event.stopPropagation();
      }}
      className="flex items-center"
    >
      <input
        type="checkbox"
        aria-label="Mark paid"
        checked={false}
        disabled={isPending}
        className="h-4 w-4 rounded border-stone-300 text-[var(--accent)] disabled:opacity-60"
        onChange={() => {
          startTransition(async () => {
            const formData = new FormData();
            formData.set("personId", String(personId));
            formData.set("mealType", "both");
            formData.set("coverageDays", "2");
            await createPaymentAction(formData);
            router.refresh();
          });
        }}
      />
    </div>
  );
}

function AwaitingPayForm({
  awaitingId,
  convertAwaitingPaymentAction
}: {
  awaitingId: number;
  convertAwaitingPaymentAction: (formData: FormData) => Promise<void>;
}) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  return (
    <div className="flex items-center">
      <input
        type="checkbox"
        aria-label="Mark awaiting payment as paid"
        checked={false}
        disabled={isPending}
        className="h-4 w-4 rounded border-stone-300 text-[var(--accent)] disabled:opacity-60"
        onChange={() => {
          startTransition(async () => {
            const formData = new FormData();
            formData.set("awaitingId", String(awaitingId));
            formData.set("coverageDays", "2");
            await convertAwaitingPaymentAction(formData);
            router.refresh();
          });
        }}
      />
    </div>
  );
}

function UnpaidRow({
  person,
  open,
  onToggle,
  createPaymentAction
}: {
  person: PaymentPerson;
  open: boolean;
  onToggle: () => void;
  createPaymentAction: (formData: FormData) => Promise<void>;
}) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  return (
    <div className="rounded-xl bg-stone-50 px-3 py-2">
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <QuickPayForm personId={person.id} createPaymentAction={createPaymentAction} />
          <button type="button" onClick={onToggle} className="flex min-w-0 items-center gap-3 text-left">
            <p className="truncate text-sm font-medium text-stone-900">{person.name}</p>
          </button>
        </div>
        <button type="button" onClick={onToggle} className="flex items-center">
          <Chevron open={open} />
        </button>
      </div>
      {open ? (
        <div className="mt-2 border-t border-stone-200/70 pt-2">
          <form
            className="grid gap-2"
            onSubmit={(event) => {
              event.preventDefault();
              startTransition(async () => {
                await createPaymentAction(new FormData(event.currentTarget));
                onToggle();
                router.refresh();
              });
            }}
          >
            <input type="hidden" name="personId" value={person.id} />
            <div className="grid grid-cols-[1fr_88px] gap-2">
              <select
                name="mealType"
                defaultValue="both"
                className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm"
              >
                <option value="both">Both</option>
                <option value="lunch">Lunch</option>
                <option value="mandazi">Mandazi</option>
              </select>
              <input
                name="coverageDays"
                type="number"
                min={1}
                defaultValue={2}
                className="rounded-lg border border-stone-200 bg-white px-3 py-2 text-sm"
              />
            </div>
            <div className="flex justify-end">
              <TinyButton type="submit" disabled={isPending} className="h-8 rounded-md px-3 text-[11px] disabled:opacity-60">
                Confirm payment
              </TinyButton>
            </div>
          </form>
        </div>
      ) : null}
    </div>
  );
}

export function PaymentsSections({
  unpaid,
  paid,
  awaitingPayments,
  mandaziTotal,
  lunchTotal,
  createPaymentAction,
  convertAwaitingPaymentAction
}: {
  unpaid: PaymentPerson[];
  paid: PaymentPerson[];
  awaitingPayments: AwaitingPaymentRow[];
  mandaziTotal: number;
  lunchTotal: number;
  createPaymentAction: (formData: FormData) => Promise<void>;
  convertAwaitingPaymentAction: (formData: FormData) => Promise<void>;
}) {
  const [openRow, setOpenRow] = useState<number | null>(null);

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-2">
        <SummaryCard label="Mandazi" value={mandaziTotal} />
        <SummaryCard label="Lunch" value={lunchTotal} />
      </div>

      <Panel>
        <SectionHeading title="Unpaid list" />
        <div className="space-y-2">
          {unpaid.length === 0 ? (
            <p className="text-xs text-[var(--muted)]">Everyone currently has coverage.</p>
          ) : (
            unpaid.map((person) => (
              <UnpaidRow
                key={person.id}
                person={person}
                open={openRow === person.id}
                onToggle={() => setOpenRow((current) => (current === person.id ? null : person.id))}
                createPaymentAction={createPaymentAction}
              />
            ))
          )}
        </div>
      </Panel>

      <Panel>
        <SectionHeading title="Paid list" />
        <div className="space-y-1.5">
          {paid.length === 0 ? (
            <p className="text-xs text-[var(--muted)]">No paid records yet.</p>
          ) : (
            paid.map((person) => {
              const latest = person.payments[0];

              return (
                <div key={person.id} className="flex items-center justify-between gap-3 rounded-xl bg-stone-50 px-3 py-2">
                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium text-stone-900">{person.name}</p>
                    <p className="text-xs text-[var(--muted)]">
                      {latest?.mealType} • {latest?.remainingDays} days left
                    </p>
                  </div>
                  <Badge tone="success">Paid</Badge>
                </div>
              );
            })
          )}
        </div>
      </Panel>

      <Panel>
        <SectionHeading title="Awaiting payments" />
        <div className="space-y-2">
          {awaitingPayments.length === 0 ? (
            <p className="text-xs text-[var(--muted)]">No awaiting payment records.</p>
          ) : (
            awaitingPayments.map((item) => (
              <div key={item.id} className="flex items-center gap-3 rounded-xl bg-stone-50 px-3 py-2">
                <AwaitingPayForm awaitingId={item.id} convertAwaitingPaymentAction={convertAwaitingPaymentAction} />
                <div className="min-w-0">
                  <p className="truncate text-sm font-medium text-stone-900">{item.name}</p>
                  <p className="text-xs text-[var(--muted)]">
                    {item.item} x{item.quantity} • KSh {item.amount}
                  </p>
                </div>
              </div>
            ))
          )}
        </div>
      </Panel>
    </div>
  );
}