"use client";

import { useActionState } from "react";
import { useTranslations } from "next-intl";
import { clientSignContractAction } from "@/lib/actions/orders";

type ContractSummary = {
  id: string;
  type: "standard" | "tfp";
  status: "draft" | "sent" | "signed" | "declined";
  isMinor: boolean;
  guardianCount: number;
};

export function ContractClient({
  contract,
  locale,
  clientName,
}: {
  contract: ContractSummary;
  locale: string;
  clientName: string;
}) {
  const t = useTranslations("orders");
  const [state, formAction, pending] = useActionState(clientSignContractAction, {});

  return (
    <div className="border border-white/10 rounded-xl p-5">
      <div className="flex items-center justify-between flex-wrap gap-2">
        <div className="flex items-center gap-2.5">
          <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">{t("contractTitle")}</p>
          {contract.status === "sent" && (
            <span className="rounded-full border border-amber-400/40 text-amber-400 px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.1em]">
              {t("contractAwaitingSignature")}
            </span>
          )}
        </div>
        <a
          href={`/api/contracts/${contract.id}/pdf`}
          target="_blank"
          rel="noopener noreferrer"
          className="text-xs border border-white/15 rounded-full px-3 py-1 hover:border-white/50"
        >
          {t("contractViewPdf")}
        </a>
      </div>

      {contract.status === "signed" && (
        <p className="mt-3 text-sm text-emerald-400">{t("contractSigned")}</p>
      )}

      {contract.status === "sent" && !state.success && (
        <form action={formAction} className="mt-4 flex flex-col gap-3">
          <input type="hidden" name="contractId" value={contract.id} />
          <input type="hidden" name="locale" value={locale} />

          <label className="flex flex-col gap-1 text-sm">
            <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">{t("signName")}</span>
            <input
              name="modelName"
              type="text"
              defaultValue={clientName}
              required
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
            />
          </label>

          {contract.isMinor && (
            <>
              <label className="flex flex-col gap-1 text-sm">
                <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">{t("signGuardian1")}</span>
                <input
                  name="guardian1Name"
                  type="text"
                  required
                  className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
                />
              </label>
              {contract.guardianCount > 1 && (
                <label className="flex flex-col gap-1 text-sm">
                  <span className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)]">{t("signGuardian2")}</span>
                  <input
                    name="guardian2Name"
                    type="text"
                    required
                    className="bg-transparent border border-white/15 rounded-lg px-3 py-2 focus:outline-none focus:border-white/50"
                  />
                </label>
              )}
            </>
          )}

          <label className="flex items-start gap-2 text-xs text-[var(--rk-ink-muted)] mt-1">
            <input type="checkbox" name="consent" required className="mt-0.5" />
            {t("signConsent")}
          </label>

          {state.error && <p className="text-sm text-red-400">{state.error}</p>}

          <button
            type="submit"
            disabled={pending}
            className="self-start mt-1 border border-white/30 rounded-lg px-5 py-2 text-xs uppercase tracking-[0.2em] hover:border-white disabled:opacity-50"
          >
            {t("signSubmit")}
          </button>
        </form>
      )}

      {state.success && <p className="mt-3 text-sm text-emerald-400">{t("contractSigned")}</p>}
    </div>
  );
}