"use client";

import { useState, useTransition } from "react";
import { toggleFolderShareAction, extendFolderShareAction } from "@/lib/actions/orders";

export function ShareFolderPanel({
  folderId,
  initialShareToken,
  initialShareTokenExpiresAt,
  shareBaseUrl,
  labels,
}: {
  folderId: string;
  initialShareToken: string | null;
  initialShareTokenExpiresAt?: string | null;
  shareBaseUrl: string;
  labels: {
    title: string;
    text: string;
    enable: string;
    disable: string;
    copy: string;
    copied: string;
    error: string;
    expiresOn?: string;
    extend?: string;
  };
}) {
  const [shareToken, setShareToken] = useState(initialShareToken);
  const [expiresAt, setExpiresAt] = useState(initialShareTokenExpiresAt ?? null);
  const [pending, startTransition] = useTransition();
  const [copied, setCopied] = useState(false);
  const [error, setError] = useState(false);

  const shareUrl = shareToken ? `${shareBaseUrl}/${shareToken}` : "";

  return (
    <div className="border border-white/10 rounded-2xl p-5">
      <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-1">{labels.title}</p>
      <p className="text-xs text-[var(--rk-ink-muted)] mb-3">{labels.text}</p>

      {shareToken && (
        <div className="mb-3">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="font-mono text-xs border border-white/15 rounded-lg px-3 py-2 break-all">{shareUrl}</span>
            <button
              type="button"
              onClick={() => {
                navigator.clipboard.writeText(shareUrl).then(() => {
                  setCopied(true);
                  setTimeout(() => setCopied(false), 2000);
                });
              }}
              className="text-xs border border-white/30 rounded-lg px-3 py-2 hover:border-white transition-colors shrink-0"
            >
              {copied ? labels.copied : labels.copy}
            </button>
          </div>
          {expiresAt && (
            <p className="mt-2 text-xs text-[var(--rk-ink-muted)]">
              {labels.expiresOn ?? "Gültig bis"} {new Date(expiresAt).toLocaleDateString()}{" "}
              <button
                type="button"
                disabled={pending}
                onClick={() =>
                  startTransition(async () => {
                    const result = await extendFolderShareAction(folderId);
                    if (!result.error) setExpiresAt(result.shareTokenExpiresAt);
                  })
                }
                className="underline hover:text-[var(--rk-ink)] disabled:opacity-50"
              >
                {labels.extend ?? "Verlängern"}
              </button>
            </p>
          )}
        </div>
      )}

      <button
        type="button"
        disabled={pending}
        onClick={() =>
          startTransition(async () => {
            const result = await toggleFolderShareAction(folderId);
            // Ein Fehlschlag (z. B. abgelaufene Session) darf nicht wie ein
            // erfolgreiches Deaktivieren aussehen — sonst denkt der Kunde,
            // der Link sei jetzt ungültig, obwohl er in Wahrheit unverändert
            // weiter funktioniert.
            if (result.error) {
              setError(true);
              return;
            }
            setError(false);
            setShareToken(result.shareToken);
            setExpiresAt(result.shareTokenExpiresAt ?? null);
          })
        }
        className={`text-xs border rounded-lg px-3.5 py-2 transition-colors disabled:opacity-50 ${
          shareToken
            ? "border-red-400/40 text-red-400/90 hover:border-red-400"
            : "border-white/30 hover:border-white"
        }`}
      >
        {shareToken ? labels.disable : labels.enable}
      </button>
      {error && <p className="text-xs text-red-400 mt-2">{labels.error}</p>}
    </div>
  );
}