import { useState } from 'react';
import { Button } from './ui';

/** Copyable overlay (read-only, for OBS) and control (co-edit, no login) links. */
export function ShareLinks({ overlayToken, controlToken }: { overlayToken: string; controlToken: string }) {
  const origin = location.origin;
  return (
    <div className="flex flex-col gap-2 rounded-lg border border-edge bg-panel p-4">
      <div className="text-xs font-bold uppercase tracking-widest text-slate-500">Share</div>
      <LinkRow label="OBS overlay (read-only)" url={`${origin}/overlay/${overlayToken}`} />
      <LinkRow label="Co-scorekeeper (can edit, no login)" url={`${origin}/control/${controlToken}`} />
      <p className="text-xs text-slate-500">
        Add the overlay URL as a Browser Source in OBS. The control link lets someone else update
        the score live without an account.
      </p>
    </div>
  );
}

function LinkRow({ label, url }: { label: string; url: string }) {
  const [copied, setCopied] = useState(false);
  const copy = async () => {
    await navigator.clipboard.writeText(url);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };
  return (
    <div>
      <div className="mb-1 text-xs font-medium text-slate-400">{label}</div>
      <div className="flex gap-2">
        <input readOnly value={url} className="flex-1 truncate rounded border border-edge bg-ink px-2 py-1 text-xs" />
        <Button onClick={copy}>{copied ? 'Copied' : 'Copy'}</Button>
      </div>
    </div>
  );
}