Duffer Derek

"use client";

import React from "react";

interface IOSErrorFallbackProps {
  error?: Error;
  onRetry?: () => void;
  onReload?: () => void;
}

export const IOSErrorFallback: React.FC<IOSErrorFallbackProps> = ({ error, onRetry, onReload }) => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "100vh",
        padding: "20px",
        textAlign: "center",
        backgroundColor: "#f5f5f5",
        fontFamily: "system-ui, -apple-system, sans-serif",
      }}
    >
      <div
        style={{
          backgroundColor: "white",
          padding: "30px",
          borderRadius: "8px",
          boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
          maxWidth: "500px",
          width: "100%",
        }}
      >
        <h1 style={{ color: "#e30613", marginBottom: "20px" }}>iOS App Error</h1>

        <p style={{ marginBottom: "20px", color: "#666" }}>
          We're experiencing issues with the app on your iOS device. This is a known issue we're
          working to fix.
        </p>

        {/* iOS-specific troubleshooting steps */}
        <div
          style={{
            marginBottom: "20px",
            padding: "15px",
            backgroundColor: "#fff3cd",
            border: "1px solid #ffeaa7",
            borderRadius: "4px",
            fontSize: "14px",
            textAlign: "left",
          }}
        >
          <strong>Try these steps:</strong>
          <ol style={{ marginTop: "10px", paddingLeft: "20px" }}>
            <li>Close the app completely and reopen it</li>
            <li>Clear Safari cache: Settings → Safari → Clear History and Website Data</li>
            <li>Restart your device</li>
            <li>Update to the latest iOS version</li>
            <li>Try opening in Safari browser instead of the app</li>
          </ol>
        </div>

        {/* Show error details in development */}
        {process.env.NODE_ENV === "development" && error && (
          <details
            style={{
              marginBottom: "20px",
              textAlign: "left",
              backgroundColor: "#f8f8f8",
              padding: "15px",
              borderRadius: "4px",
              border: "1px solid #ddd",
            }}
          >
            <summary style={{ cursor: "pointer", fontWeight: "bold" }}>
              Technical Details (Development)
            </summary>
            <pre
              style={{
                fontSize: "12px",
                overflow: "auto",
                marginTop: "10px",
                whiteSpace: "pre-wrap",
              }}
            >
              {error.message}
              {error.stack && `\n\nStack:\n${error.stack}`}
            </pre>
          </details>
        )}

        <div style={{ display: "flex", gap: "10px", justifyContent: "center" }}>
          {onRetry && (
            <button
              onClick={onRetry}
              style={{
                backgroundColor: "#e30613",
                color: "white",
                border: "none",
                padding: "10px 20px",
                borderRadius: "4px",
                cursor: "pointer",
                fontSize: "14px",
              }}
            >
              Try Again
            </button>
          )}

          {onReload && (
            <button
              onClick={onReload}
              style={{
                backgroundColor: "#666",
                color: "white",
                border: "none",
                padding: "10px 20px",
                borderRadius: "4px",
                cursor: "pointer",
                fontSize: "14px",
              }}
            >
              Reload Page
            </button>
          )}
        </div>

        {/* Contact support */}
        <div
          style={{
            marginTop: "20px",
            padding: "15px",
            backgroundColor: "#e8f4fd",
            border: "1px solid #bee5eb",
            borderRadius: "4px",
            fontSize: "14px",
          }}
        >
          <strong>Still having issues?</strong>
          <br />
          Contact support with your device details and the steps you've tried.
        </div>
      </div>
    </div>
  );
};