import React, { useState } from "react";

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

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(generatedDataLink);
      setCopySuccess(true);
      setTimeout(() => setCopySuccess(false), 2000);
    } catch (err) {
      console.error("Failed to copy: ", err);
    }
  };

  // Add keyframes for animations
  const keyframes = `
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }
  `;

  return (
    <>
      <style>{keyframes}</style>
      <div className="troubleshooting-guide" style={{ marginTop: "2rem" }}>
        <button
          className="btn btn-outline btn-small"
          onClick={() => setIsExpanded(!isExpanded)}
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: "0.75rem",
            fontSize: "0.9rem",
            padding: "0.75rem 1.5rem",
            borderRadius: "12px",
            background: isExpanded
              ? "linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1))"
              : "var(--bg-secondary)",
            border: isExpanded
              ? "2px solid rgba(59, 130, 246, 0.3)"
              : "2px solid var(--border-color)",
            transition: "all 0.3s ease",
            boxShadow: isExpanded
              ? "0 4px 12px rgba(59, 130, 246, 0.15)"
              : "0 2px 4px rgba(0, 0, 0, 0.1)",
            fontWeight: "600",
            color: "var(--text-primary)",
          }}
        >
          <span
            style={{
              fontSize: "1.1rem",
              transition: "transform 0.3s ease",
              transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
            }}
          >
            {isExpanded ? "🔼" : "🔼"}
          </span>
          Troubleshooting Guide
          <span
            style={{
              fontSize: "0.75rem",
              opacity: 0.7,
              fontWeight: "normal",
            }}
          >
            {isExpanded ? "Click to hide" : "Need help?"}
          </span>
        </button>

        {isExpanded && (
          <div
            className="troubleshooting-content"
            style={{
              marginTop: "1.5rem",
              padding: "2rem",
              background:
                "linear-gradient(135deg, var(--bg-tertiary), rgba(255, 255, 255, 0.02))",
              borderRadius: "16px",
              border: "1px solid rgba(255, 255, 255, 0.1)",
              fontSize: "0.9rem",
              lineHeight: "1.7",
              boxShadow: "0 8px 32px rgba(0, 0, 0, 0.1)",
              backdropFilter: "blur(10px)",
              animation: "fadeInUp 0.4s ease-out",
            }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: "0.75rem",
                marginBottom: "1.5rem",
                paddingBottom: "1rem",
                borderBottom: "2px solid rgba(255, 255, 255, 0.1)",
              }}
            >
              <span style={{ fontSize: "1.5rem" }}>🛠️</span>
              <h5
                style={{
                  margin: 0,
                  color: "var(--text-primary)",
                  fontSize: "1.1rem",
                  fontWeight: "700",
                  background: "linear-gradient(135deg, #3b82f6, #9333ea)",
                  backgroundClip: "text",
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                }}
              >
                Common Issues and Solutions
              </h5>
            </div>

            <div
              className="troubleshooting-sections"
              style={{
                display: "flex",
                flexDirection: "column",
                gap: "1.5rem",
              }}
            >
              <div
                className="troubleshooting-section"
                style={{
                  padding: "1.25rem",
                  background: "rgba(59, 130, 246, 0.05)",
                  borderRadius: "12px",
                  border: "1px solid rgba(59, 130, 246, 0.2)",
                  borderLeft: "4px solid #3b82f6",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "0.5rem",
                    marginBottom: "0.75rem",
                  }}
                >
                  <span style={{ fontSize: "1.2rem" }}>📱</span>
                  <strong
                    style={{ color: "var(--text-primary)", fontSize: "1rem" }}
                  >
                    Preview not working?
                  </strong>
                </div>
                <ul
                  style={{
                    margin: 0,
                    paddingLeft: "1.5rem",
                    color: "var(--text-secondary)",
                  }}
                >
                  <li style={{ marginBottom: "0.5rem" }}>
                    <span style={{ color: "#10b981", fontWeight: "600" }}>
                      ✓
                    </span>{" "}
                    This is normal! Browser security prevents previewing some
                    files
                  </li>
                  <li style={{ marginBottom: "0.5rem" }}>
                    <span style={{ color: "#10b981", fontWeight: "600" }}>
                      ✓
                    </span>{" "}
                    Your data has been generated successfully
                  </li>
                  <li>
                    <span style={{ color: "#3b82f6", fontWeight: "600" }}>
                      →
                    </span>{" "}
                    Click the download button to get your file
                  </li>
                </ul>
              </div>

              <div
                className="troubleshooting-section"
                style={{
                  padding: "1.25rem",
                  background: "rgba(245, 158, 11, 0.05)",
                  borderRadius: "12px",
                  border: "1px solid rgba(245, 158, 11, 0.2)",
                  borderLeft: "4px solid #f59e0b",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "0.5rem",
                    marginBottom: "0.75rem",
                  }}
                >
                  <span style={{ fontSize: "1.2rem" }}>💾</span>
                  <strong
                    style={{ color: "var(--text-primary)", fontSize: "1rem" }}
                  >
                    Download not working?
                  </strong>
                </div>
                <ul
                  style={{
                    margin: 0,
                    paddingLeft: "1.5rem",
                    color: "var(--text-secondary)",
                  }}
                >
                  <li style={{ marginBottom: "0.5rem" }}>
                    Check if your browser blocked popups
                  </li>
                  <li style={{ marginBottom: "0.5rem" }}>
                    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={{
                  padding: "1.25rem",
                  background: "rgba(147, 51, 234, 0.05)",
                  borderRadius: "12px",
                  border: "1px solid rgba(147, 51, 234, 0.2)",
                  borderLeft: "4px solid #9333ea",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "0.5rem",
                    marginBottom: "0.75rem",
                  }}
                >
                  <span style={{ fontSize: "1.2rem" }}>🔗</span>
                  <strong
                    style={{ color: "var(--text-primary)", fontSize: "1rem" }}
                  >
                    Direct download link:
                  </strong>
                </div>
                <div
                  style={{
                    marginTop: "0.75rem",
                    padding: "1rem",
                    background: "rgba(0, 0, 0, 0.3)",
                    borderRadius: "8px",
                    fontFamily:
                      "Monaco, 'Cascadia Code', 'Roboto Mono', monospace",
                    fontSize: "0.8rem",
                    wordBreak: "break-all",
                    border: "1px solid rgba(255, 255, 255, 0.1)",
                    color: "#e5e7eb",
                    position: "relative",
                    overflow: "hidden",
                  }}
                >
                  <div
                    style={{
                      position: "absolute",
                      top: 0,
                      left: 0,
                      right: 0,
                      height: "2px",
                      background:
                        "linear-gradient(90deg, #3b82f6, #9333ea, #10b981)",
                    }}
                  />
                  {generatedDataLink}
                </div>
                <div style={{ marginTop: "1rem", textAlign: "center" }}>
                  <button
                    className="btn btn-small"
                    onClick={handleCopyLink}
                    style={{
                      fontSize: "0.85rem",
                      padding: "0.5rem 1rem",
                      borderRadius: "8px",
                      background: copySuccess
                        ? "linear-gradient(135deg, #10b981, #059669)"
                        : "linear-gradient(135deg, #3b82f6, #2563eb)",
                      border: "none",
                      color: "white",
                      fontWeight: "600",
                      transition: "all 0.3s ease",
                      transform: copySuccess ? "scale(1.05)" : "scale(1)",
                      boxShadow: "0 4px 12px rgba(59, 130, 246, 0.3)",
                    }}
                  >
                    {copySuccess ? "✅ Copied!" : "📋 Copy Link"}
                  </button>
                </div>
              </div>

              <div
                className="troubleshooting-section"
                style={{
                  padding: "1.25rem",
                  background: "rgba(239, 68, 68, 0.05)",
                  borderRadius: "12px",
                  border: "1px solid rgba(239, 68, 68, 0.2)",
                  borderLeft: "4px solid #ef4444",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "0.5rem",
                    marginBottom: "0.75rem",
                  }}
                >
                  <span style={{ fontSize: "1.2rem" }}>❓</span>
                  <strong
                    style={{ color: "var(--text-primary)", fontSize: "1rem" }}
                  >
                    Still having issues?
                  </strong>
                </div>
                <ul
                  style={{
                    margin: 0,
                    paddingLeft: "1.5rem",
                    color: "var(--text-secondary)",
                  }}
                >
                  <li style={{ marginBottom: "0.5rem" }}>
                    Try using a different browser (Chrome, Firefox, Safari)
                  </li>
                  <li style={{ marginBottom: "0.5rem" }}>
                    Disable browser extensions temporarily
                  </li>
                  <li style={{ marginBottom: "0.5rem" }}>
                    Check if your antivirus is blocking downloads
                  </li>
                  <li>Contact support if problems persist</li>
                </ul>
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

export default TroubleshootingGuide;