import { BaseBoxShapeUtil, TLBaseShape, HTMLContainer } from "tldraw"
import { useCallback, useState } from "react"
import { StandardizedToolWrapper } from "../components/StandardizedToolWrapper"
import { usePinnedToView } from "../hooks/usePinnedToView"
import { useMaximize } from "../hooks/useMaximize"

export type IEmbedShape = TLBaseShape<
  "Embed",
  {
    w: number
    h: number
    url: string | null
    pinnedToView: boolean
    tags: string[]
    interactionState?: {
      scrollPosition?: { x: number; y: number }
      currentTime?: number
    }
  }
>

const transformUrl = (url: string): string => {
  // YouTube
  const youtubeMatch = url.match(
    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/,
  )
  if (youtubeMatch) {
    return `https://www.youtube.com/embed/${youtubeMatch[1]}`
  }

  // Google Maps
  if (url.includes("google.com/maps") || url.includes("goo.gl/maps")) {
    if (url.includes("google.com/maps/embed")) {
      return url
    }

    const directionsMatch = url.match(/dir\/([^\/]+)\/([^\/]+)/)
    if (directionsMatch || url.includes("/dir/")) {
      const origin = url.match(/origin=([^&]+)/)?.[1] || directionsMatch?.[1]
      const destination =
        url.match(/destination=([^&]+)/)?.[1] || directionsMatch?.[2]

      if (origin && destination) {
        return `https://www.google.com/maps/embed/v1/directions?key=${
          import.meta.env["VITE_GOOGLE_MAPS_API_KEY"]
        }&origin=${encodeURIComponent(origin)}&destination=${encodeURIComponent(
          destination,
        )}&mode=driving`
      }
    }

    const placeMatch = url.match(/[?&]place_id=([^&]+)/)
    if (placeMatch) {
      return `https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2!2d0!3d0!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s${placeMatch[1]}!2s!5e0!3m2!1sen!2s!4v1`
    }

    return `https://www.google.com/maps/embed/v1/place?key=${
      import.meta.env.VITE_GOOGLE_MAPS_API_KEY
    }&q=${encodeURIComponent(url)}`
  }

  // Twitter/X
  const xMatch = url.match(
    /(?:twitter\.com|x\.com)\/([^\/\s?]+)(?:\/(?:status|tweets)\/(\d+)|$)/,
  )
  if (xMatch) {
    const [, username, tweetId] = xMatch
    if (tweetId) {
      return `https://platform.x.com/embed/Tweet.html?id=${tweetId}`
    } else {
      return "about:blank"
    }
  }

  // Medium - return about:blank
  if (url.includes("medium.com")) {
    return "about:blank"
  }

  // Gather.town
  if (url.includes("app.gather.town")) {
    return url.replace("app.gather.town", "gather.town/embed")
  }

  return url
}

const getDefaultDimensions = (url: string): { w: number; h: number } => {
  if (url.match(/(?:youtube\.com|youtu\.be)/)) {
    return { w: 800, h: 450 }
  }

  if (url.match(/(?:twitter\.com|x\.com)/)) {
    if (url.match(/\/status\/|\/tweets\//)) {
      return { w: 800, h: 600 }
    }
  }

  if (url.includes("google.com/maps") || url.includes("goo.gl/maps")) {
    return { w: 800, h: 600 }
  }

  if (url.includes("gather.town")) {
    return { w: 800, h: 600 }
  }

  return { w: 800, h: 600 }
}

const getFaviconUrl = (url: string): string => {
  try {
    const urlObj = new URL(url)
    return `https://www.google.com/s2/favicons?domain=${urlObj.hostname}&sz=32`
  } catch {
    return ''
  }
}

const getDisplayTitle = (url: string): string => {
  try {
    const urlObj = new URL(url)
    if (urlObj.hostname.includes('youtube.com')) {
      return 'YouTube'
    }
    if (urlObj.hostname.includes('twitter.com') || urlObj.hostname.includes('x.com')) {
      return 'Twitter/X'
    }
    if (urlObj.hostname.includes('google.com/maps')) {
      return 'Google Maps'
    }
    return urlObj.hostname.replace('www.', '')
  } catch {
    return url
  }
}

export class EmbedShape extends BaseBoxShapeUtil<IEmbedShape> {
  static override type = "Embed"

  // Embed theme color: Yellow (Rainbow)
  static readonly PRIMARY_COLOR = "#eab308"

  getDefaultProps(): IEmbedShape["props"] {
    return {
      url: null,
      w: 800,
      h: 600,
      pinnedToView: false,
      tags: ['embed'],
    }
  }

  indicator(shape: IEmbedShape) {
    return (
      <rect
        x={0}
        y={0}
        width={shape.props.w}
        height={shape.props.h}
        fill="none"
      />
    )
  }

  component(shape: IEmbedShape) {
    const props = shape.props || {}
    const url = props.url || ""
    const [isMinimized, setIsMinimized] = useState(false)
    const isSelected = this.editor.getSelectedShapeIds().includes(shape.id)

    const [inputUrl, setInputUrl] = useState(url)
    const [error, setError] = useState("")

    // Use the pinning hook
    usePinnedToView(this.editor, shape.id, shape.props.pinnedToView)

    // Use the maximize hook for fullscreen functionality
    const { isMaximized, toggleMaximize } = useMaximize({
      editor: this.editor,
      shapeId: shape.id,
      currentW: shape.props.w,
      currentH: shape.props.h,
      shapeType: 'Embed',
    })

    const handleClose = () => {
      this.editor.deleteShape(shape.id)
    }

    const handleMinimize = () => {
      setIsMinimized(!isMinimized)
    }

    const handlePinToggle = () => {
      this.editor.updateShape<IEmbedShape>({
        id: shape.id,
        type: shape.type,
        props: {
          ...shape.props,
          pinnedToView: !shape.props.pinnedToView,
        },
      })
    }

    const handleSubmit = useCallback(
      (e: React.FormEvent) => {
        e.preventDefault()
        let completedUrl =
          inputUrl.startsWith("http://") || inputUrl.startsWith("https://")
            ? inputUrl
            : `https://${inputUrl}`

        const isValidUrl = completedUrl.match(/(^\w+:|^)\/\//)
        if (!isValidUrl) {
          setError("Invalid URL")
          return
        }

        this.editor.updateShape<IEmbedShape>({
          id: shape.id,
          type: "Embed",
          props: { ...shape.props, url: completedUrl },
        })
        setError("")
      },
      [inputUrl],
    )

    const handleIframeInteraction = (
      newState: typeof shape.props.interactionState,
    ) => {
      this.editor.updateShape<IEmbedShape>({
        id: shape.id,
        type: "Embed",
        props: {
          ...shape.props,
          interactionState: newState,
        },
      })
    }

    // Custom header content with URL info
    const headerContent = url ? (
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flex: 1, overflow: 'hidden' }}>
        <img
          src={getFaviconUrl(url)}
          alt=""
          style={{
            width: "16px",
            height: "16px",
            flexShrink: 0,
          }}
          onError={(e) => {
            (e.target as HTMLImageElement).style.display = 'none'
          }}
        />
        <span style={{
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          fontSize: '13px',
          fontWeight: 600
        }}>
          {getDisplayTitle(url)}
        </span>
      </div>
    ) : (
      <span>Embed</span>
    )

    // For empty state - URL input form
    if (!url) {
      return (
        <HTMLContainer style={{ width: shape.props.w, height: shape.props.h }}>
          <StandardizedToolWrapper
            title="Embed"
            primaryColor={EmbedShape.PRIMARY_COLOR}
            isSelected={isSelected}
            width={shape.props.w}
            height={shape.props.h}
            onClose={handleClose}
            onMinimize={handleMinimize}
            isMinimized={isMinimized}
            onMaximize={toggleMaximize}
            isMaximized={isMaximized}
            editor={this.editor}
            shapeId={shape.id}
            isPinnedToView={shape.props.pinnedToView}
            onPinToggle={handlePinToggle}
            tags={shape.props.tags}
            onTagsChange={(newTags) => {
              this.editor.updateShape<IEmbedShape>({
                id: shape.id,
                type: 'Embed',
                props: {
                  ...shape.props,
                  tags: newTags,
                }
              })
            }}
            tagsEditable={true}
          >
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100%',
                padding: '20px',
                cursor: 'text',
              }}
              onClick={(e) => {
                e.preventDefault()
                e.stopPropagation()
                const input = e.currentTarget.querySelector('input')
                input?.focus()
              }}
            >
              <form
                onSubmit={handleSubmit}
                style={{
                  width: "100%",
                  maxWidth: "500px",
                }}
                onClick={(e) => e.stopPropagation()}
              >
                <input
                  type="text"
                  value={inputUrl}
                  onChange={(e) => setInputUrl(e.target.value)}
                  placeholder="Enter URL to embed..."
                  style={{
                    width: "100%",
                    padding: "15px",
                    border: "1px solid #ccc",
                    borderRadius: "4px",
                    fontSize: "16px",
                    touchAction: 'manipulation',
                  }}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      handleSubmit(e)
                    }
                  }}
                  onPointerDown={(e) => {
                    e.stopPropagation()
                    e.currentTarget.focus()
                  }}
                />
                {error && (
                  <div style={{ color: "red", marginTop: "10px", textAlign: 'center' }}>{error}</div>
                )}
              </form>
            </div>
          </StandardizedToolWrapper>
        </HTMLContainer>
      )
    }

    // For medium.com and twitter profile views
    if (url.includes("medium.com") ||
        (url && url.match(/(?:twitter\.com|x\.com)\/[^\/]+$/))) {
      return (
        <HTMLContainer style={{ width: shape.props.w, height: shape.props.h }}>
          <StandardizedToolWrapper
            title="Embed"
            headerContent={headerContent}
            primaryColor={EmbedShape.PRIMARY_COLOR}
            isSelected={isSelected}
            width={shape.props.w}
            height={shape.props.h}
            onClose={handleClose}
            onMinimize={handleMinimize}
            isMinimized={isMinimized}
            onMaximize={toggleMaximize}
            isMaximized={isMaximized}
            editor={this.editor}
            shapeId={shape.id}
            isPinnedToView={shape.props.pinnedToView}
            onPinToggle={handlePinToggle}
            tags={shape.props.tags}
            onTagsChange={(newTags) => {
              this.editor.updateShape<IEmbedShape>({
                id: shape.id,
                type: 'Embed',
                props: {
                  ...shape.props,
                  tags: newTags,
                }
              })
            }}
            tagsEditable={true}
          >
            <div
              style={{
                display: 'flex',
                flexDirection: "column",
                gap: "12px",
                padding: "20px",
                textAlign: "center",
                height: '100%',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <p>
                This content cannot be embedded in an iframe.
              </p>
              <button
                onClick={() => window.open(url, '_blank', 'noopener,noreferrer')}
                style={{
                  padding: '10px 20px',
                  backgroundColor: EmbedShape.PRIMARY_COLOR,
                  color: 'white',
                  border: 'none',
                  borderRadius: '6px',
                  cursor: 'pointer',
                  fontSize: '14px',
                  fontWeight: 500,
                  touchAction: 'manipulation',
                }}
                onPointerDown={(e) => e.stopPropagation()}
              >
                Open in new tab →
              </button>
            </div>
          </StandardizedToolWrapper>
        </HTMLContainer>
      )
    }

    // For normal embed view
    return (
      <HTMLContainer style={{ width: shape.props.w, height: shape.props.h }}>
        <StandardizedToolWrapper
          title="Embed"
          headerContent={headerContent}
          primaryColor={EmbedShape.PRIMARY_COLOR}
          isSelected={isSelected}
          width={shape.props.w}
          height={shape.props.h}
          onClose={handleClose}
          onMinimize={handleMinimize}
          isMinimized={isMinimized}
          onMaximize={toggleMaximize}
          isMaximized={isMaximized}
          editor={this.editor}
          shapeId={shape.id}
          isPinnedToView={shape.props.pinnedToView}
          onPinToggle={handlePinToggle}
          tags={shape.props.tags}
          onTagsChange={(newTags) => {
            this.editor.updateShape<IEmbedShape>({
              id: shape.id,
              type: 'Embed',
              props: {
                ...shape.props,
                tags: newTags,
              }
            })
          }}
          tagsEditable={true}
        >
          <div style={{
            height: '100%',
            overflow: 'hidden',
            backgroundColor: '#fff',
          }}>
            <iframe
              src={transformUrl(url)}
              width="100%"
              height="100%"
              style={{
                border: "none",
                display: 'block',
              }}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer"
              onLoad={(e) => {
                const iframe = e.currentTarget as HTMLIFrameElement
                if (!iframe) return;

                const messageHandler = (event: MessageEvent) => {
                  if (event.source === iframe.contentWindow) {
                    handleIframeInteraction(event.data)
                  }
                }

                window.addEventListener("message", messageHandler)

                return () => window.removeEventListener("message", messageHandler)
              }}
            />
          </div>
        </StandardizedToolWrapper>
      </HTMLContainer>
    )
  }

  override onDoubleClick = (shape: IEmbedShape) => {
    if (!shape.props.url) {
      const input = document.querySelector('input')
      input?.focus()
      return
    }

    if (
      shape.props.url.includes('medium.com') ||
      (shape.props.url && shape.props.url.match(/(?:twitter\.com|x\.com)\/[^\/]+$/))
    ) {
      window.top?.open(shape.props.url, '_blank', 'noopener,noreferrer')
      return
    }

    const iframe = document.querySelector(`[data-shape-id="${shape.id}"] iframe`) as HTMLIFrameElement
    if (iframe) {
      iframe.style.pointerEvents = 'all'
      const cleanup = () => {
        iframe.style.pointerEvents = 'none'
        window.removeEventListener('pointerdown', cleanup)
      }
      window.addEventListener('pointerdown', cleanup)
    }
  }

  onPointerDown = (shape: IEmbedShape) => {
    if (!shape.props.url) {
      const input = document.querySelector('input')
      input?.focus()
    }
  }

  override onBeforeCreate = (shape: IEmbedShape) => {
    if (shape.props.url) {
      const dimensions = getDefaultDimensions(shape.props.url)
      return {
        ...shape,
        props: {
          ...shape.props,
          w: dimensions.w,
          h: dimensions.h,
        },
      }
    }
    return shape
  }

  override onBeforeUpdate = (prev: IEmbedShape, next: IEmbedShape) => {
    if (next.props.url && prev.props.url !== next.props.url) {
      const dimensions = getDefaultDimensions(next.props.url)
      return {
        ...next,
        props: {
          ...next.props,
          w: dimensions.w,
          h: dimensions.h,
        },
      }
    }
    return next
  }
}