"use client";

import { useMemo, useState } from "react";
import { useTranslations } from "next-intl";
import { createEscrowAction } from "@/app/escrow-actions";

export function EscrowCreateForm({
  feePercent,
  error,
}: {
  feePercent: number;
  error?: string;
}) {
  const t = useTranslations("escrow");
  const [amount, setAmount] = useState("10");
  const [role, setRole] = useState<"BUYER" | "SELLER">("BUYER");
  const parsed = Number(amount);
  const fee = useMemo(() => {
    if (!Number.isFinite(parsed) || parsed <= 0) return { fee: 0, seller: 0 };
    const f = Math.round(parsed * (feePercent / 100) * 1_000_000) / 1_000_000;
    return { fee: f, seller: Math.round((parsed - f) * 1_000_000) / 1_000_000 };
  }, [parsed, feePercent]);

  const errorText =
    error === "user_not_found"
      ? t("errUser")
      : error === "self"
        ? t("errSelf")
        : error === "amount"
          ? t("errAmount")
          : error === "policy"
            ? t("errPolicy")
            : error === "details"
              ? t("errDetails")
              : error
                ? t("errGeneric")
                : "";

  return (
    <form action={createEscrowAction} className="card space-y-4 p-5">
      <h2 className="text-xl font-semibold">{t("createTitle")}</h2>
      {errorText ? <p className="text-sm text-red-700">{errorText}</p> : null}
      <div className="flex flex-wrap gap-2">
        <label className={`rounded-full px-4 py-2 text-sm ${role === "BUYER" ? "bg-brand text-white" : "border border-line"}`}>
          <input
            className="sr-only"
            type="radio"
            name="myRole"
            value="BUYER"
            checked={role === "BUYER"}
            onChange={() => setRole("BUYER")}
          />
          {t("iAmBuyer")}
        </label>
        <label className={`rounded-full px-4 py-2 text-sm ${role === "SELLER" ? "bg-brand text-white" : "border border-line"}`}>
          <input
            className="sr-only"
            type="radio"
            name="myRole"
            value="SELLER"
            checked={role === "SELLER"}
            onChange={() => setRole("SELLER")}
          />
          {t("iAmSeller")}
        </label>
      </div>
      <label className="block text-sm">
        {t("otherEmail")}
        <input
          name="otherEmail"
          type="email"
          required
          className="field mt-1"
        />
      </label>
      <label className="block text-sm">
        {t("titleField")}
        <input name="title" required minLength={3} className="field mt-1" />
      </label>
      <label className="block text-sm">
        {t("details")}
        <textarea
          name="details"
          required
          minLength={10}
          rows={4}
          className="field mt-1"
        />
      </label>
      <label className="block text-sm">
        {t("amount")}
        <input
          name="amountUsdt"
          type="number"
          min={1}
          step="0.01"
          required
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          className="field mt-1"
        />
      </label>
      {role === "SELLER" ? (
        <label className="block text-sm">
          {t("sellerWallet")}
          <input name="sellerWallet" className="field mt-1" dir="ltr" />
        </label>
      ) : null}
      <p className="text-sm text-muted">
        {t("feeLine", { fee: fee.fee.toFixed(2), seller: fee.seller.toFixed(2), percent: feePercent })}
      </p>
      <label className="flex items-start gap-2 text-sm">
        <input name="acceptPolicy" type="checkbox" required className="mt-1" />
        <span>{t("acceptPolicy")}</span>
      </label>
      <button className="btn-primary">{t("create")}</button>
    </form>
  );
}