'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

interface WebhookSecretDisplayProps {
  /** Plaintext secret (shown once on creation). If undefined, shows masked. */
  plaintext?: string;
  /** Masked preview (always shown on view). */
  masked: string;
}

export function WebhookSecretDisplay({ plaintext, masked }: WebhookSecretDisplayProps) {
  const [copied, setCopied] = useState(false);

  async function copySecret() {
    if (!plaintext) return;
    await navigator.clipboard.writeText(plaintext);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  if (plaintext) {
    return (
      <div className="space-y-2">
        <div className="rounded-md bg-amber-50 border border-amber-200 p-3 text-sm text-amber-800">
          <strong>Copy this secret now.</strong> It will not be shown again.
        </div>
        <div className="flex items-center gap-2">
          <Input
            readOnly
            value={plaintext}
            className="font-mono text-sm"
          />
          <Button type="button" variant="outline" size="sm" onClick={copySecret}>
            {copied ? 'Copied!' : 'Copy'}
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex items-center gap-2">
      <Input
        readOnly
        value={masked}
        className="font-mono text-sm text-muted-foreground"
      />
      <span className="text-xs text-muted-foreground">Use &quot;Regenerate&quot; to get a new secret</span>
    </div>
  );
}