import { Button, Input, Space, Typography } from "antd";
import { useState } from "react";

const { Text } = Typography;
const { TextArea } = Input;

interface MapFallbackProps {
  onLocationSelect?: (lat: number, lng: number, address: string) => void;
  height?: string;
  initialAddress?: string;
}

export function MapFallback({ onLocationSelect, height = "100%", initialAddress = "" }: MapFallbackProps) {
  const [address, setAddress] = useState(initialAddress);

  // Prevent events from bubbling up to parent components
  const handleTouchStart = (e: React.TouchEvent) => {
    e.stopPropagation();
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    e.stopPropagation();
  };

  const handleTouchEnd = (e: React.TouchEvent) => {
    e.stopPropagation();
  };

  const handleMouseDown = (e: React.MouseEvent) => {
    e.stopPropagation();
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    e.stopPropagation();
  };

  const handleMouseUp = (e: React.MouseEvent) => {
    e.stopPropagation();
  };

  const handleWheel = (e: React.WheelEvent) => {
    e.stopPropagation();
  };

  const handleSubmit = () => {
    if (address.trim()) {
      // For fallback, we'll use dummy coordinates
      // In a real implementation, you might want to use a geocoding service
      const dummyLat = 24.7136 + (Math.random() - 0.5) * 0.01;
      const dummyLng = 46.6753 + (Math.random() - 0.5) * 0.01;
      onLocationSelect?.(dummyLat, dummyLng, address);
    }
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: height,
        padding: "20px",
        backgroundColor: "#f8f9fa",
        borderRadius: "8px",
        border: "2px dashed #dee2e6",
      }}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onWheel={handleWheel}
    >
      <div
        style={{
          textAlign: "center",
          marginBottom: "20px",
        }}
      >
        <div style={{ fontSize: "48px", marginBottom: "12px" }}>📍</div>
        <Text strong style={{ fontSize: "16px" }}>
          Map Not Available
        </Text>
        <br />
        <Text type="secondary" style={{ fontSize: "12px" }}>
          Please enter your address manually
        </Text>
      </div>

      <Space direction="vertical" size="middle" style={{ flex: 1 }}>
        <div>
          <Text strong>Enter Address:</Text>
          <TextArea
            rows={4}
            placeholder="Enter your full address including street, city, and postal code..."
            value={address}
            onChange={(e) => setAddress(e.target.value)}
            style={{ marginTop: "8px" }}
          />
        </div>

        <Button
          type="primary"
          onClick={handleSubmit}
          disabled={!address.trim()}
          style={{ alignSelf: "flex-end" }}
        >
          Use This Address
        </Button>
      </Space>
    </div>
  );
}