import {
  render,
  Container,
  Text,
  Muted,
  VerticalSpace,
  IconButton,
  IconExpand24,
  IconCollapse24,
  IconDockToSide24
} from '@create-figma-plugin/ui'
import { emit, on } from '@create-figma-plugin/utilities'
import { h, Fragment } from 'preact'
import { useState, useEffect, useRef } from 'preact/hooks'

const MIN_WINDOW_SIZE = { width: 320, height: 200 }
// No static max: "maximize" targets the whole viewport (maxViewport from main),
// and the upper bound of drag-resize also comes from there. useWindowResize max is set
// very high — actual clamp is done by main via clampWindowSize (bounds*zoom).

function Plugin () {
  const [currentWindowSize, setCurrentWindowSize] = useState(MIN_WINDOW_SIZE)
  const resizeRef = useRef({ active: false, dir: '', startX: 0, startY: 0, startW: 0, startH: 0, fixedAxis: 'none' as 'none' | 'x' | 'y' })
  // Current dock position (for "window is edge-docked" detection in UI). Center and
  // corners are NOT written here — they are not considered docked (window just lies there).
  const dockedPosRef = useRef<DockPosition | null>(null)
  // Flag: resize pulls the window out of dock (on release, do not re-dock, clear dock state).
  const exitingDockRef = useRef(false)
  // Explicit toggle state for the Maximize/Restore button (size comparison is unreliable
  // because Figma clamps the requested size to its real limit when its UI is visible).
  const maximizedRef = useRef(false)
  const [windowInfo, setWindowInfo] = useState<{
    x: number; y: number; width: number; height: number
    zoom: number
    viewport: { x: number; y: number; width: number; height: number }
    maxViewport: { width: number; height: number }
    gapL: number; gapR: number; gapT: number; gapB: number
    relX: number; relY: number
    center: { x: number; y: number }
  } | null>(null)

  // Custom resize over the WHOLE perimeter (8 handles: 4 edges + 4 corners).
  // Left/top edges move the window (main moves via reposition), right/bottom — resize only.
  // Live update: RESIZE_WINDOW_DRAG during drag, final RESIZE_WINDOW on pointerup.
  function startResize (e: PointerEvent, dir: string, fixedAxis: 'none' | 'x' | 'y' = 'none') {
    e.preventDefault()
    e.stopPropagation()
    resizeRef.current.active = true
    resizeRef.current.dir = dir
    resizeRef.current.fixedAxis = fixedAxis
    resizeRef.current.startX = e.clientX
    resizeRef.current.startY = e.clientY
    resizeRef.current.startW = window.innerWidth
    resizeRef.current.startH = window.innerHeight
    // Tell main to fix the anchor (start position + start size) BEFORE the first move.
    // Size comes from window (UI thread) since main thread has no window.
    emit('RESIZE_START', { dir: dir, startW: window.innerWidth, startH: window.innerHeight, fixedAxis: fixedAxis })
  }

  function onPointerMove (e: PointerEvent) {
    if (!resizeRef.current.active) return
    const dir = resizeRef.current.dir
    const dx = e.clientX - resizeRef.current.startX
    const dy = e.clientY - resizeRef.current.startY
    emit('RESIZE_WINDOW_DRAG', { dx: dx, dy: dy, dir: dir, fixedAxis: resizeRef.current.fixedAxis })
  }

  function onPointerUpResize () {
    if (!resizeRef.current.active) return
    resizeRef.current.active = false
    const w = window.innerWidth
    const h = window.innerHeight
    setCurrentWindowSize({ width: w, height: h })
    emit('RESIZE_WINDOW', { width: w, height: h })
    // If resize pulled the window out of dock — stop holding dock state (so polling
    // does not re-pin and RESIZE_WINDOW does not re-dock). A normal (non-dock) resize
    // holds the dock state itself via applyDock in main.
    if (exitingDockRef.current) {
      exitingDockRef.current = false
      dockedPosRef.current = null
      emit('UNDOCK', {})
    }
    refreshInfo()
  }

  // Click-or-drag on a perimeter handle:
  // - cursor move > CLICK_THRESHOLD px → resize (startResize + live drag via global onPointerMove)
  // - otherwise (clean click) → depends on position:
  //     * corner (top-left/right, bottom-left/right):
  //         - window NOT edge-docked (dockedPosRef == null) → teleport to corner (dockWindow)
  //         - window IS edge-docked → start single-axis live resize of the compressed axis
  //           (window "slides out" to corner, exits dock), dir = corner, fixedAxis = compressed axis
  //     * edge (top/bottom-center, center-left/right) → teleport to edge (dockWindow)
  // Center is NOT in perimeter — button only.
  const CLICK_THRESHOLD = 4
  const isCornerPos = (p: DockPosition) =>
    p === 'top-left' || p === 'top-right' || p === 'bottom-left' || p === 'bottom-right'

  function onHandleDown (e: PointerEvent, dir: string, dockPos: DockPosition) {
    e.preventDefault()
    e.stopPropagation()
    const startX = e.clientX
    const startY = e.clientY
    let started = false
    const isCorner = isCornerPos(dockPos)
    const docked = dockedPosRef.current !== null
    // Corner in dock: drag = single-axis resize of compressed axis (exit dock). Normal/non-dock = plain resize.
    const fixed = (isCorner && docked) ? (window.innerHeight <= 324 ? 'y' : 'x') : 'none'
    function move (ev: PointerEvent) {
      if (started) return
      const dx = ev.clientX - startX
      const dy = ev.clientY - startY
      if (Math.sqrt(dx * dx + dy * dy) < CLICK_THRESHOLD) return
      started = true
      exitingDockRef.current = isCorner && docked
      startResize(ev, dir, fixed)
      // Count resize from the original point (before threshold), not current (>threshold).
      resizeRef.current.startX = startX
      resizeRef.current.startY = startY
      // Drag continues via global onPointerMove (resizeRef.active already true).
    }
    function up () {
      window.removeEventListener('pointermove', move)
      window.removeEventListener('pointerup', up)
      if (started) {
        onPointerUpResize()
      } else {
        // Clean click.
        if (isCorner && docked) {
          // Corner in dock: free axis -> 50% viewport, pin to corner (exit dock).
          // Same resize mechanism as center (DOCK_HALF in main.ts).
          emit('DOCK_HALF', { position: dockPos, width: window.innerWidth, height: window.innerHeight })
          dockedPosRef.current = null
          requestAnimationFrame(function () { requestAnimationFrame(refreshInfo) })
        } else {
          // Non-dock corner / any edge: teleport to position.
          dockWindow(dockPos)
        }
      }
    }
    window.addEventListener('pointermove', move)
    window.addEventListener('pointerup', up)
  }

  useEffect(function () {
    window.addEventListener('pointermove', onPointerMove)
    window.addEventListener('pointerup', onPointerUpResize)
    return function () {
      window.removeEventListener('pointermove', onPointerMove)
      window.removeEventListener('pointerup', onPointerUpResize)
    }
  }, [])

  // Listen for the response from main with actual x/y (canvas-space) and window sizes
  useEffect(function () {
    const off = on('WINDOW_INFO', function (info: {
      x: number; y: number; width: number; height: number
      zoom: number
      viewport: { x: number; y: number; width: number; height: number }
      maxViewport: { width: number; height: number }
      gapL: number; gapR: number; gapT: number; gapB: number
      relX: number; relY: number
      center: { x: number; y: number }
    }) {
      setWindowInfo(info)
    })
    return function () { off() }
  }, [])

  // Request fresh window data from main (after any action / on start).
  // Pass the REAL iframe size (window.innerWidth/innerHeight) — what Figma actually
  // rendered, not the requested lastSize. Otherwise gaps would be tautological.
  function refreshInfo () {
    emit('GET_WINDOW_INFO', {
      width: window.innerWidth,
      height: window.innerHeight
    })
  }

  // Update size numbers and info ONLY after the drag ends (button release).
  // By pointerup Figma has already applied the new window size.
  useEffect(function () {
    const handlePointerUp = function () {
      setCurrentWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      })
      refreshInfo()
    }
    window.addEventListener('pointerup', handlePointerUp)
    return function () {
      window.removeEventListener('pointerup', handlePointerUp)
    }
  }, [])

  // Initial info fill on plugin start.
  useEffect(function () {
    refreshInfo()
  }, [])

  function toggleWindowSize () {
    if (!maximizedRef.current) {
      // Maximize: stretch to the full available viewport, then pin to center-top.
      maximizedRef.current = true
      setIsMaxToggled(true)
      const max = windowInfo != null ? windowInfo.maxViewport : { width: 1920, height: 1080 }
      setCurrentWindowSize({ ...max })
      emit('RESIZE_WINDOW', { ...max })
      // After Figma applies the resize (and clamps to its real limit), reposition to
      // center-top from the REAL rendered size (read from the iframe).
      requestAnimationFrame(function () {
        requestAnimationFrame(function () {
          emit('DOCK_REFINE', {
            position: 'top-center',
            width: window.innerWidth,
            height: window.innerHeight
          })
          refreshInfo()
        })
      })
    } else {
      // Restore: behave exactly like the Center button (50% viewport, centered).
      maximizedRef.current = false
      setIsMaxToggled(false)
      dockWindow('center')
    }
  }

  // 9 dock positions: 4 corners + 4 edges + center.
  type DockPosition =
    | 'top-left' | 'top-center' | 'top-right'
    | 'center-left' | 'center' | 'center-right'
    | 'bottom-left' | 'bottom-center' | 'bottom-right'

  function dockWindow (position: DockPosition) {
    // Remember dock position only for EDGES (stretched at edge). Corners and center are
    // not dock (window just lies there), so leave dockedPosRef as-is / untouched.
    const isEdge = position === 'top-center' || position === 'bottom-center' ||
                   position === 'center-left' || position === 'center-right'
    if (isEdge) dockedPosRef.current = position
    else if (position !== 'center') dockedPosRef.current = null
    // Stage 1: ask main to stretch (attempt to canon) and remember the mode.
    // main does NOT position immediately — position is computed at stage 2 from the REAL
    // size Figma renders after clamp (visible UI cuts the request).
    emit('DOCK_WINDOW', {
      position,
      width: window.innerWidth,
      height: window.innerHeight
    })
    // Stage 2: after 2 frames Figma already applied resize and clamp — read the real
    // size from iframe and send for precise pin (reposition from real size).
    requestAnimationFrame(function () {
      requestAnimationFrame(function () {
        emit('DOCK_REFINE', {
          position,
          width: window.innerWidth,
          height: window.innerHeight
        })
        refreshInfo()
      })
    })
  }

  const [isMaxToggled, setIsMaxToggled] = useState(false)
  // "Maximized" flag drives the icon (expand/collapse). Real size after maximize is
  // clamped by Figma, so we track it explicitly rather than comparing sizes.
  const isMaximized = isMaxToggled

  return (
    <Fragment>
      <Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
          <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
            <IconButton
              title="Center window (50% viewport)"
              onClick={function () { dockWindow('center') }}
            >
              <IconDockToSide24 />
            </IconButton>
            <IconButton
              title={isMaximized ? 'Restore window' : 'Maximize window'}
              onClick={toggleWindowSize}
            >
              {isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
            </IconButton>
          </div>
        </div>
        <div
          style={{
            flex: 1,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column'
          }}
        >
          <Text style={{ fontSize: '13px', fontWeight: 600 }}>Hello, Figma ✦</Text>
          <VerticalSpace space="small" />
          <Muted>AI assistant (MVP) — bootstrap</Muted>
        </div>
      </Container>
      {/* Decorative drag-handle icon in the bottom-right corner (as in the old plugin).
          pointerEvents:none — the actual drag is caught by the invisible corner div. */}
      <div
        style={{
          position: 'fixed',
          bottom: 3,
          right: 3,
          zIndex: 2,
          color: 'var(--figma-color-icon-secondary)',
          opacity: 0.4,
          pointerEvents: 'none'
        }}
        aria-hidden="true"
      >
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M2 9C2.55228 9 3 9.44772 3 10C3 10.5523 2.55228 11 2 11C1.44772 11 1 10.5523 1 10C1 9.44772 1.44772 9 2 9Z" fill="currentColor" />
          <path d="M6 9C6.55228 9 7 9.44772 7 10C7 10.5523 6.55228 11 6 11C5.44772 11 5 10.5523 5 10C5 9.44772 5.44772 9 6 9Z" fill="currentColor" />
          <path d="M6 5C6.55228 5 7 5.44772 7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6C5 5.44772 5.44772 5 6 5Z" fill="currentColor" />
          <path d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="currentColor" />
          <path d="M10 1C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3C9.44772 3 9 2.55228 9 2C9 1.44772 9.44772 1 10 1Z" fill="currentColor" />
        </svg>
      </div>
      {/* Perimeter hitboxes (4 edges + 4 corners). Visible for debugging.
          Corners = violet. Edges colored per side: top=red, bottom=green, left=blue, right=orange.
          Edge handles span the FULL side length (left:0;right:0 / top:0;bottom:0).
          Center is button-only (not in perimeter). */}
      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top-left', 'top-left') }} style={{ position: 'fixed', top: -3, left: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nwse-resize' }} aria-hidden="true" />
      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top', 'top-center') }} style={{ position: 'fixed', top: -3, left: 16, right: 16, height: 8, zIndex: 3, background: 'rgba(255,99,99,0.5)', cursor: 'ns-resize' }} aria-hidden="true" />
      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'top-right', 'top-right') }} style={{ position: 'fixed', top: -3, right: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nesw-resize' }} aria-hidden="true" />
      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'left', 'center-left') }} style={{ position: 'fixed', top: 16, bottom: 16, left: -3, width: 8, zIndex: 3, background: 'rgba(99,149,255,0.5)', cursor: 'ew-resize' }} aria-hidden="true" />
      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'right', 'center-right') }} style={{ position: 'fixed', top: 16, bottom: 16, right: -3, width: 8, zIndex: 3, background: 'rgba(255,165,0,0.5)', cursor: 'ew-resize' }} aria-hidden="true" />
      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom-left', 'bottom-left') }} style={{ position: 'fixed', bottom: -3, left: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nesw-resize' }} aria-hidden="true" />
      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom', 'bottom-center') }} style={{ position: 'fixed', bottom: -3, left: 16, right: 16, height: 8, zIndex: 3, background: 'rgba(99,199,99,0.5)', cursor: 'ns-resize' }} aria-hidden="true" />
      <div onPointerDown={function (e: PointerEvent) { onHandleDown(e, 'bottom-right', 'bottom-right') }} style={{ position: 'fixed', bottom: -3, right: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nwse-resize' }} aria-hidden="true" />
    </Fragment>
  )
}

export default render(Plugin)