import React, { useState } from "react";

const TroubleshootingGuide = ({ generatedDataLink, onDownload }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className="troubleshooting-guide" style={{ marginTop: "1rem" }}>
      <button
        className="btn btn-outline btn-small"
        onClick={() => setIsExpanded(!isExpanded)}
        style={{
          display: "flex",
          alignItems: "center",
          gap: "0.5rem",
          fontSize: "0.875rem",
          padding: "0.5rem 1rem",
        }}
      >
        {isExpanded ? "🔽" : "🔍"} Troubleshooting Guide
      </button>

      {isExpanded && (
        <div
          className="troubleshooting-content"
          style={{
            marginTop: "1rem",
            padding: "1rem",
            background: "var(--bg-tertiary)",
            borderRadius: "8px",
            border: "1px solid var(--border-color)",
            fontSize: "0.875rem",
            lineHeight: "1.6",
          }}
        >
          <h5 style={{ marginBottom: "1rem", color: "var(--text-primary)" }}>
            🛠️ Common Issues and Solutions
          </h5>

          <div
            className="troubleshooting-section"
            style={{ marginBottom: "1rem" }}
          >
            <strong>📱 Preview not working?</strong>
            <ul style={{ marginTop: "0.5rem", paddingLeft: "1.5rem" }}>
              <li>
                This is normal! Browser security prevents previewing some files
              </li>
              <li>Your data has been generated successfully</li>
              <li>Click the download button to get your file</li>
            </ul>
          </div>

          <div
            className="troubleshooting-section"
            style={{ marginBottom: "1rem" }}
          >
            <strong>💾 Download not working?</strong>
            <ul style={{ marginTop: "0.5rem", paddingLeft: "1.5rem" }}>
              <li>Check if your browser blocked popups</li>
              <li>
                Try right-clicking the download button and select "Open in new
                tab"
              </li>
              <li>Copy the link and paste it in a new browser tab</li>
            </ul>
          </div>

          <div
            className="troubleshooting-section"
            style={{ marginBottom: "1rem" }}
          >
            <strong>🔗 Direct download link:</strong>
            <div
              style={{
                marginTop: "0.5rem",
                padding: "0.5rem",
                background: "var(--bg-secondary)",
                borderRadius: "4px",
                fontFamily: "monospace",
                fontSize: "0.75rem",
                wordBreak: "break-all",
                border: "1px solid var(--border-color)",
              }}
            >
              {generatedDataLink}
            </div>
            <div style={{ marginTop: "0.5rem", textAlign: "center" }}>
              <button
                className="btn btn-small"
                onClick={() => navigator.clipboard.writeText(generatedDataLink)}
                style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
              >
                📋 Copy Link
              </button>
            </div>
          </div>

          <div className="troubleshooting-section">
            <strong>❓ Still having issues?</strong>
            <ul style={{ marginTop: "0.5rem", paddingLeft: "1.5rem" }}>
              <li>Try using a different browser (Chrome, Firefox, Safari)</li>
              <li>Disable browser extensions temporarily</li>
              <li>Check if your antivirus is blocking downloads</li>
              <li>Contact support if problems persist</li>
            </ul>
          </div>
        </div>
      )}
    </div>
  );
};

export default TroubleshootingGuide;