"use client";

import { useState } from "react";

export function TelegramLink() {
  const [data, setData] = useState<{ code: string; deepLink: string; botUsername: string } | null>(null);
  const [loading, setLoading] = useState(false);

  async function generate() {
    setLoading(true);
    const res = await fetch("/api/proxy/auth/telegram/link-code", { method: "POST" });
    if (res.ok) {
      setData(await res.json());
    } else {
      alert("Failed to generate code");
    }
    setLoading(false);
  }

  return (
    <div className="bg-ink-800/50 border border-white/10 rounded-xl p-6">
      <h2 className="font-bold text-lg mb-2">Connect Telegram</h2>
      <p className="text-sm text-white/60 mb-4">
        2 ways, both fast:
      </p>

      {!data ? (
        <button
          onClick={generate}
          disabled={loading}
          className="bg-accent-500 hover:bg-accent-400 disabled:opacity-50 text-ink-950 font-bold px-5 py-2.5 rounded-lg"
        >
          {loading ? "Generating..." : "Generate link code"}
        </button>
      ) : (
        <div className="space-y-4">
          <div className="bg-ink-900 border border-accent-500/30 rounded-lg p-4">
            <div className="text-xs uppercase tracking-wider text-white/50 mb-2">Option 1 — One-click</div>
            <a
              href={data.deepLink}
              target="_blank"
              rel="noreferrer"
              className="inline-block bg-accent-500 hover:bg-accent-400 text-ink-950 font-bold px-5 py-2.5 rounded-lg"
            >
              Open @{data.botUsername}
            </a>
          </div>

          <div className="bg-ink-900 border border-white/10 rounded-lg p-4">
            <div className="text-xs uppercase tracking-wider text-white/50 mb-2">Option 2 — Manual</div>
            <p className="text-sm text-white/60 mb-2">
              In Telegram, open <span className="font-mono text-accent-glow">@{data.botUsername}</span> and send:
            </p>
            <code className="block bg-ink-950 border border-white/10 rounded-md px-3 py-2 font-mono text-accent-glow">
              /link {data.code}
            </code>
            <p className="text-xs text-white/40 mt-2">
              Code expires in 15 minutes. Reload this page after linking.
            </p>
          </div>
        </div>
      )}
    </div>
  );
}