function CodeBlock({ code, language }: { code: string; language: string }) {
  const { isCopied, copyToClipboard } = useClipboard(3000);

  const handleCopy = async () => {
    const success = await copyToClipboard(code);
    if (success) {
      // Optional: analytics tracking
      trackEvent("code_copied", { language });
    }
  };

  return (
    <div className="relative">
      <pre className="code-block">
        <code className={`language-${language}`}>{code}</code>
      </pre>

      <button
        onClick={handleCopy}
        className="absolute top-2 right-2 copy-button"
        aria-label={isCopied ? "Copied!" : "Copy code"}
      >
        {isCopied ? (
          <>
            <CheckIcon /> Copied!
          </>
        ) : (
          <>
            <CopyIcon /> Copy
          </>
        )}
      </button>
    </div>
  );
}

function ShareComponent({ title, url }: { title: string; url: string }) {
  const { isCopied, copyToClipboard } = useClipboard();

  const shareData = {
    title,
    url,
    text: `Check out: ${title}`,
  };

  const handleCopyLink = () => {
    copyToClipboard(url);
  };

  const handleCopyText = () => {
    const shareText = `${title}\n${url}`;
    copyToClipboard(shareText);
  };

  const handleNativeShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share(shareData);
      } catch (err) {
        // Fallback to copy
        handleCopyLink();
      }
    } else {
      handleCopyLink();
    }
  };

  return (
    <div className="share-buttons">
      <button onClick={handleCopyLink}>
        {isCopied ? "Link Copied!" : "Copy Link"}
      </button>

      <button onClick={handleCopyText}>Copy Full Text</button>

      <button onClick={handleNativeShare}>Share</button>
    </div>
  );
}

function FormSummary({ formData }: { formData: any }) {
  const { isCopied, copyToClipboard } = useClipboard();

  const formatFormData = (data: any) => {
    return Object.entries(data)
      .map(([key, value]) => `${key}: ${value}`)
      .join("\n");
  };

  const copyAsText = () => {
    const formatted = formatFormData(formData);
    copyToClipboard(formatted);
  };

  const copyAsJSON = () => {
    const json = JSON.stringify(formData, null, 2);
    copyToClipboard(json);
  };

  const copyAsCsv = () => {
    const headers = Object.keys(formData).join(",");
    const values = Object.values(formData).join(",");
    const csv = `${headers}\n${values}`;
    copyToClipboard(csv);
  };

  return (
    <div className="form-summary">
      <h3>Form Summary</h3>
      <pre>{JSON.stringify(formData, null, 2)}</pre>

      <div className="copy-buttons">
        <button onClick={copyAsText}>
          {isCopied ? "Copied!" : "Copy as Text"}
        </button>
        <button onClick={copyAsJSON}>Copy as JSON</button>
        <button onClick={copyAsCsv}>Copy as CSV</button>
      </div>
    </div>
  );
}

function MultiCopyManager() {
  const clipboard1 = useClipboard(1500);
  const clipboard2 = useClipboard(3000);

  const items = [
    { id: 1, label: "API Key", value: "sk-1234567890abcdef" },
    { id: 2, label: "Secret", value: "secret_abcdef1234567890" },
    { id: 3, label: "URL", value: "https://api.example.com/v1" },
  ];

  const copyItem = (value: string, type: "sensitive" | "normal") => {
    if (type === "sensitive") {
      // Shorter feedback time for sensitive data
      clipboard1.copyToClipboard(value);
    } else {
      clipboard2.copyToClipboard(value);
    }
  };

  return (
    <div className="multi-copy">
      {items.map((item) => (
        <div key={item.id} className="copy-item">
          <label>{item.label}:</label>
          <code className="value">
            {item.label.includes("Secret") ? "••••••••" : item.value}
          </code>
          <button
            onClick={() =>
              copyItem(
                item.value,
                item.label.includes("Secret") ? "sensitive" : "normal"
              )
            }
          >
            {clipboard1.isCopied || clipboard2.isCopied ? "Copied!" : "Copy"}
          </button>
        </div>
      ))}
    </div>
  );
}