"use client";

import type { FormEvent } from "react";
import { useState } from "react";
import { useRouter } from "next/navigation";
import type {
  AdminOrderRecord,
  AdminPaymentRecord,
  AdminProductRecord,
  AdminVariantRecord,
} from "@/server/admin/repository";
import { FormField, Notification } from "./ui";

function key(kind: string) {
  return `admin:${kind}:${crypto.randomUUID()}`;
}

function useMutation() {
  const router = useRouter();
  const [message, setMessage] = useState<string>();
  const [error, setError] = useState<string>();
  const [pending, setPending] = useState(false);
  async function run(url: string, method: "DELETE" | "PATCH" | "POST", body: unknown) {
    setPending(true);
    setError(undefined);
    setMessage(undefined);
    try {
      const response = await fetch(url, {
        body: JSON.stringify(body),
        headers: { "content-type": "application/json" },
        method,
      });
      const result = (await response.json()) as { error?: { message?: string }; ok?: boolean };
      if (!response.ok || result.ok !== true)
        throw new Error(result.error?.message ?? "Operation failed.");
      setMessage("Saved.");
      router.refresh();
      return true;
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "Operation failed.");
      return false;
    } finally {
      setPending(false);
    }
  }
  return { error, message, pending, run };
}

function Result({
  error,
  message,
}: Readonly<{ error: string | undefined; message: string | undefined }>) {
  if (error !== undefined)
    return (
      <Notification tone="error">
        <p>{error}</p>
      </Notification>
    );
  if (message !== undefined)
    return (
      <Notification tone="success">
        <p>{message}</p>
      </Notification>
    );
  return null;
}

export function AdminLoginForm() {
  const mutation = useMutation();
  const router = useRouter();
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    const data = new FormData(form);
    if (
      await mutation.run("/api/admin/session", "POST", {
        email: data.get("email"),
        password: data.get("password"),
      })
    )
      router.replace("/admin");
  }
  return (
    <form className="surface form-stack" onSubmit={submit}>
      <FormField label="Email">
        <input autoComplete="username" name="email" required type="email" />
      </FormField>
      <FormField label="Password">
        <input autoComplete="current-password" name="password" required type="password" />
      </FormField>
      <button className="button" disabled={mutation.pending} type="submit">
        {mutation.pending ? "Signing in…" : "Sign in"}
      </button>
      <Result {...mutation} />
    </form>
  );
}

export function AdminSignOutButton() {
  const mutation = useMutation();
  const router = useRouter();
  return (
    <button
      className="button button--secondary"
      disabled={mutation.pending}
      onClick={async () => {
        if (await mutation.run("/api/admin/session", "DELETE", {})) router.replace("/admin/login");
      }}
      type="button"
    >
      Sign out
    </button>
  );
}

export function AdminProductControls({ product }: Readonly<{ product: AdminProductRecord }>) {
  const mutation = useMutation();
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    await mutation.run(`/api/admin/products/${product.id}`, "PATCH", {
      description: String(data.get("description") ?? "").trim() || null,
      idempotencyKey: key("product"),
      name: data.get("name"),
      status: data.get("status"),
    });
  }
  return (
    <form className="form-stack" onSubmit={submit}>
      <FormField label="Name">
        <input defaultValue={product.name} name="name" required />
      </FormField>
      <FormField label="Description">
        <textarea defaultValue={product.description ?? ""} name="description" rows={3} />
      </FormField>
      <FormField label="Publication status">
        <select defaultValue={product.status} name="status">
          <option value="draft">Draft</option>
          <option value="published">Published</option>
          <option value="archived">Archived</option>
        </select>
      </FormField>
      <button className="button" disabled={mutation.pending} type="submit">
        Save product
      </button>
      <Result {...mutation} />
    </form>
  );
}

export function AdminVariantControls({ variant }: Readonly<{ variant: AdminVariantRecord }>) {
  const mutation = useMutation();
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    await mutation.run(`/api/admin/variants/${variant.id}`, "PATCH", {
      active: data.get("active") === "on",
      allowBackorder: data.get("allowBackorder") === "on",
      idempotencyKey: key("variant"),
      name: data.get("name"),
      priceMinor: Number(data.get("priceMinor")),
    });
  }
  return (
    <form className="form-stack" onSubmit={submit}>
      <FormField label="Variant name">
        <input defaultValue={variant.name} name="name" required />
      </FormField>
      <FormField label={`Price in ${variant.currency} minor units`}>
        <input
          defaultValue={variant.priceMinor}
          min={0}
          name="priceMinor"
          required
          step={1}
          type="number"
        />
      </FormField>
      <label>
        <input defaultChecked={variant.active} name="active" type="checkbox" /> Active
      </label>
      <label>
        <input defaultChecked={variant.allowBackorder} name="allowBackorder" type="checkbox" />{" "}
        Allow backorder
      </label>
      <button className="button" disabled={mutation.pending} type="submit">
        Save variant
      </button>
      <Result {...mutation} />
    </form>
  );
}

export function AdminInventoryControls({ itemId }: Readonly<{ itemId: string }>) {
  const mutation = useMutation();
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    const data = new FormData(form);
    if (
      await mutation.run(`/api/admin/inventory/${itemId}/adjust`, "POST", {
        delta: Number(data.get("delta")),
        idempotencyKey: key("inventory"),
        reason: data.get("reason"),
      })
    )
      form.reset();
  }
  return (
    <form className="form-stack" onSubmit={submit}>
      <FormField label="Quantity change">
        <input name="delta" required step={1} type="number" />
      </FormField>
      <FormField label="Reason">
        <input maxLength={240} name="reason" required />
      </FormField>
      <button className="button" disabled={mutation.pending} type="submit">
        Adjust
      </button>
      <Result {...mutation} />
    </form>
  );
}

export function AdminOrderControls({ order }: Readonly<{ order: AdminOrderRecord }>) {
  const mutation = useMutation();
  if (order.status !== "paid" && order.status !== "processing")
    return <span>No transition available</span>;
  const outcome = order.status === "paid" ? "processing" : "fulfilled";
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const trackingCarrier = String(data.get("trackingCarrier") ?? "").trim();
    const trackingNumber = String(data.get("trackingNumber") ?? "").trim();
    await mutation.run(`/api/admin/orders/${order.reference}/transition`, "POST", {
      idempotencyKey: key("order"),
      outcome,
      reason: data.get("reason"),
      ...(trackingCarrier && trackingNumber ? { trackingCarrier, trackingNumber } : {}),
    });
  }
  return (
    <form className="form-stack" onSubmit={submit}>
      <FormField label="Reason">
        <input
          defaultValue={
            outcome === "processing" ? "Order preparation started." : "Order fulfilled."
          }
          name="reason"
          required
        />
      </FormField>
      {outcome === "fulfilled" ? (
        <>
          <FormField label="Tracking carrier">
            <input name="trackingCarrier" />
          </FormField>
          <FormField label="Tracking number">
            <input name="trackingNumber" />
          </FormField>
        </>
      ) : null}
      <button className="button" disabled={mutation.pending} type="submit">
        Mark {outcome}
      </button>
      <Result {...mutation} />
    </form>
  );
}

export function AdminRefundControls({ payment }: Readonly<{ payment: AdminPaymentRecord }>) {
  const mutation = useMutation();
  const remaining = payment.amountMinor - payment.refundedAmountMinor;
  if ((payment.status !== "succeeded" && payment.status !== "partially_refunded") || remaining <= 0)
    return <span>No refundable balance</span>;
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    await mutation.run(`/api/admin/payments/${payment.providerPaymentReference}/refund`, "POST", {
      amountMinor: Number(data.get("amountMinor")),
      idempotencyKey: key("refund"),
      reason: data.get("reason"),
    });
  }
  return (
    <form className="form-stack" onSubmit={submit}>
      <FormField hint={`Maximum ${remaining} minor units`} label="Refund amount">
        <input max={remaining} min={1} name="amountMinor" required step={1} type="number" />
      </FormField>
      <FormField label="Reason">
        <input maxLength={240} name="reason" required />
      </FormField>
      <button className="button" disabled={mutation.pending} type="submit">
        Request refund
      </button>
      <Result {...mutation} />
    </form>
  );
}