"use client";

import { useActionState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { createLinkAction, loginAction, registerAction, uploadFileAction } from "@/app/actions";
import { CopyButton } from "./copy-button";

function Field({
  name,
  label,
  type = "text",
  required,
}: {
  name: string;
  label: string;
  type?: string;
  required?: boolean;
}) {
  return (
    <label className="block space-y-1 text-sm">
      <span>{label}</span>
      <input
        name={name}
        type={type}
        required={required}
        className="field"
      />
    </label>
  );
}

export function LoginForm() {
  const t = useTranslations("auth");
  const locale = useLocale();
  const [state, action, pending] = useActionState(loginAction, null);
  return (
    <form action={action} className="card mx-auto w-full max-w-md space-y-4 p-6 sm:p-8">
      <h1 className="text-2xl font-bold">{t("loginTitle")}</h1>
      <input type="hidden" name="locale" value={locale} />
      <Field name="email" label={t("email")} type="email" required />
      <Field name="password" label={t("password")} type="password" required />
      {state?.error ? <p className="text-sm text-red-700">{t(state.error)}</p> : null}
      <button disabled={pending} className="btn-primary w-full">
        {t("submitLogin")}
      </button>
    </form>
  );
}

export function RegisterForm({ refCode = "" }: { refCode?: string }) {
  const t = useTranslations("auth");
  const locale = useLocale();
  const [state, action, pending] = useActionState(registerAction, null);
  return (
    <form action={action} className="card mx-auto w-full max-w-md space-y-4 p-6 sm:p-8">
      <h1 className="text-2xl font-bold">{t("registerTitle")}</h1>
      <input type="hidden" name="locale" value={locale} />
      <input type="hidden" name="ref" value={refCode} />
      <Field name="name" label={t("name")} required />
      <Field name="email" label={t("email")} type="email" required />
      <Field name="password" label={t("password")} type="password" required />
      {state?.error ? <p className="text-sm text-red-700">{t(state.error)}</p> : null}
      <button disabled={pending} className="btn-primary w-full">
        {t("submitRegister")}
      </button>
    </form>
  );
}

export function CreateLinkForm({
  appUrl,
  monetization,
  bulk = false,
  defaultUrl = "",
}: {
  appUrl: string;
  monetization: "PAID" | "FREE";
  bulk?: boolean;
  defaultUrl?: string;
}) {
  const t = useTranslations("dashboard");
  const [state, action, pending] = useActionState(
    async (_s: unknown, formData: FormData) => createLinkAction(formData),
    null as Awaited<ReturnType<typeof createLinkAction>> | null,
  );
  const codes = state && "codes" in state && state.codes ? state.codes : [];
  return (
    <form action={action} className="card space-y-3 p-5">
      <h2 className="text-lg font-semibold">
        {bulk ? t("bulkTitle") : monetization === "FREE" ? t("createFree") : t("createPaid")}
      </h2>
      <p className="text-sm text-muted">
        {monetization === "FREE" ? t("freeHint") : t("paidHint")}
      </p>
      <input type="hidden" name="monetization" value={monetization} />
      {bulk ? (
        <label className="block space-y-1 text-sm">
          <span>{t("urls")}</span>
          <textarea
            name="url"
            required
            rows={8}
            placeholder="https://example.com&#10;https://example.org"
            className="field font-mono text-sm"
            dir="ltr"
          />
        </label>
      ) : (
        <label className="block space-y-1 text-sm">
          <span>{t("url")}</span>
          <input
            name="url"
            type="text"
            required
            defaultValue={defaultUrl}
            className="field"
            dir="ltr"
          />
        </label>
      )}
      <Field name="title" label={t("titleOptional")} />
      {state && "error" in state && state.error ? (
        <p className="text-sm text-red-700">{t(state.error)}</p>
      ) : null}
      {codes.length > 0 ? (
        <ul className="space-y-2 rounded-xl bg-background p-3 text-sm">
          {codes.map((code) => {
            const url = `${appUrl}/s/${code}`;
            return (
              <li key={code} className="flex items-center justify-between gap-2">
                <span className="truncate" dir="ltr">
                  {url}
                </span>
                <CopyButton value={url} />
              </li>
            );
          })}
        </ul>
      ) : null}
      <button disabled={pending} className="btn-primary">
        {t("create")}
      </button>
    </form>
  );
}

export function UploadFileForm({
  appUrl,
  monetization,
}: {
  appUrl: string;
  monetization: "PAID" | "FREE";
}) {
  const t = useTranslations("dashboard");
  const [state, action, pending] = useActionState(
    async (_s: unknown, formData: FormData) => uploadFileAction(formData),
    null as Awaited<ReturnType<typeof uploadFileAction>> | null,
  );
  const url = state && "code" in state && state.code ? `${appUrl}/s/${state.code}` : null;
  return (
    <form action={action} className="card space-y-3 p-5">
      <h2 className="text-lg font-semibold">
        {monetization === "FREE" ? t("uploadFree") : t("uploadPaid")}
      </h2>
      <input type="hidden" name="monetization" value={monetization} />
      <label className="block space-y-1 text-sm">
        <span>{t("file")}</span>
        <input name="file" type="file" required className="w-full text-sm" />
      </label>
      {state && "error" in state && state.error ? (
        <p className="text-sm text-red-700">{t(state.error)}</p>
      ) : null}
      {url ? (
        <div className="flex items-center justify-between gap-2 rounded-xl bg-background px-3 py-2 text-sm">
          <span className="truncate">{url}</span>
          <CopyButton value={url} />
        </div>
      ) : null}
      <button disabled={pending} className="btn-primary">
        {t("create")}
      </button>
    </form>
  );
}