import { useState, useEffect, useRef, useCallback } from 'react'
import { MessageSquare, X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'
import { betaFeedbackApi } from '@/api/betaFeedback'

const REACTIONS = [
  { value: 'positive', emoji: '👍', label: 'Good' },
  { value: 'neutral', emoji: '😐', label: 'Okay' },
  { value: 'negative', emoji: '👎', label: 'Bad' },
] as const

const CATEGORIES = ['Bug', 'Feature Idea', 'Confusing', 'Praise'] as const

type Reaction = (typeof REACTIONS)[number]['value']
type Category = (typeof CATEGORIES)[number]

export function FeedbackWidget() {
  const [open, setOpen] = useState(false)
  const [reaction, setReaction] = useState<Reaction | null>(null)
  const [category, setCategory] = useState<Category | null>(null)
  const [text, setText] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [submitted, setSubmitted] = useState(false)
  const panelRef = useRef<HTMLDivElement>(null)

  const resetForm = useCallback(() => {
    setReaction(null)
    setCategory(null)
    setText('')
    setSubmitted(false)
  }, [])

  const closePanel = useCallback(() => {
    setOpen(false)
    // Reset form after close animation
    setTimeout(resetForm, 200)
  }, [resetForm])

  // Close on Escape
  useEffect(() => {
    if (!open) return
    const handleKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') closePanel()
    }
    document.addEventListener('keydown', handleKey)
    return () => document.removeEventListener('keydown', handleKey)
  }, [open, closePanel])

  // Close on click outside
  useEffect(() => {
    if (!open) return
    const handleClick = (e: MouseEvent) => {
      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
        closePanel()
      }
    }
    // Delay to avoid the opening click triggering immediate close
    const timer = setTimeout(() => {
      document.addEventListener('mousedown', handleClick)
    }, 0)
    return () => {
      clearTimeout(timer)
      document.removeEventListener('mousedown', handleClick)
    }
  }, [open, closePanel])

  const handleSubmit = async () => {
    if (!reaction) return
    setSubmitting(true)

    const pageUrl = window.location.pathname
    // Extract session ID if on a FlowPilot page
    let sessionId: string | undefined
    if (pageUrl.includes('/pilot')) {
      const match = pageUrl.match(/\/pilot\/([^/]+)/)
      if (match) sessionId = match[1]
    }

    try {
      await betaFeedbackApi.submit({
        reaction,
        category: category ?? undefined,
        text: text.trim() || undefined,
        page_url: pageUrl,
        session_id: sessionId,
      })
      setSubmitted(true)
      setTimeout(closePanel, 1200)
    } catch {
      toast.error('Failed to send feedback')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <>
      {/* Floating tab - hidden on mobile (<640px) */}
      <button
        type="button"
        onClick={() => {
          resetForm()
          setOpen(true)
        }}
        className={cn(
          'fixed right-0 top-1/2 z-40 hidden sm:flex items-center gap-1.5 px-2.5 py-1.5',
          'text-xs font-medium tracking-wide uppercase',
          'rounded-l-md transition-colors',
          'origin-right',
          open && 'pointer-events-none opacity-0'
        )}
        style={{
          background: 'var(--color-bg-card)',
          borderTop: '1px solid var(--color-border-default)',
          borderBottom: '1px solid var(--color-border-default)',
          borderLeft: '1px solid var(--color-border-default)',
          color: 'var(--color-text-secondary)',
          writingMode: 'vertical-rl',
          transform: 'translateY(-50%) rotate(180deg)',
        }}
        aria-label="Open feedback panel"
      >
        <MessageSquare size={12} />
        Feedback
      </button>

      {/* Slide-out panel */}
      <div
        ref={panelRef}
        className={cn(
          'fixed right-0 top-0 bottom-0 z-50 w-[280px] flex flex-col',
          'transition-transform duration-200 ease-out',
          open ? 'translate-x-0' : 'translate-x-full'
        )}
        style={{
          background: 'var(--color-bg-card)',
          borderLeft: '1px solid var(--color-border-default)',
        }}
        aria-hidden={!open}
      >
        {/* Header */}
        <div
          className="flex items-center justify-between px-4 py-3"
          style={{ borderBottom: '1px solid var(--color-border-default)' }}
        >
          <h3 className="font-heading text-sm font-semibold" style={{ color: 'var(--color-text-heading)' }}>
            How&apos;s it going?
          </h3>
          <button
            type="button"
            onClick={closePanel}
            className="rounded p-1 transition-colors"
            style={{ color: 'var(--color-text-muted)' }}
            aria-label="Close feedback panel"
          >
            <X size={16} />
          </button>
        </div>

        {submitted ? (
          /* Thank you state */
          <div className="flex flex-1 items-center justify-center">
            <p className="font-heading text-base font-semibold" style={{ color: 'var(--color-text-heading)' }}>
              Thanks!
            </p>
          </div>
        ) : (
          /* Form */
          <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
            {/* Quick reactions */}
            <div>
              <p
                className="mb-2 text-[10px] font-semibold uppercase tracking-[1.2px]"
                style={{ color: 'var(--color-text-muted)' }}
              >
                Quick reaction
              </p>
              <div className="flex gap-2">
                {REACTIONS.map((r) => (
                  <button
                    key={r.value}
                    type="button"
                    onClick={() => setReaction(reaction === r.value ? null : r.value)}
                    className={cn(
                      'flex flex-1 flex-col items-center gap-1 rounded-lg py-2.5 text-lg transition-colors',
                    )}
                    style={{
                      background: reaction === r.value ? 'var(--color-accent-dim)' : 'var(--color-bg-elevated)',
                      border: reaction === r.value
                        ? '1px solid var(--color-accent)'
                        : '1px solid var(--color-border-default)',
                    }}
                    title={r.label}
                  >
                    <span>{r.emoji}</span>
                    <span
                      className="text-[10px] font-medium"
                      style={{ color: reaction === r.value ? 'var(--color-accent-text)' : 'var(--color-text-secondary)' }}
                    >
                      {r.label}
                    </span>
                  </button>
                ))}
              </div>
            </div>

            {/* Category pills */}
            <div>
              <p
                className="mb-2 text-[10px] font-semibold uppercase tracking-[1.2px]"
                style={{ color: 'var(--color-text-muted)' }}
              >
                Category (optional)
              </p>
              <div className="flex flex-wrap gap-1.5">
                {CATEGORIES.map((c) => (
                  <button
                    key={c}
                    type="button"
                    onClick={() => setCategory(category === c ? null : c)}
                    className={cn(
                      'rounded-[20px] px-3 py-1 text-xs font-medium transition-colors',
                    )}
                    style={{
                      background: category === c ? 'var(--color-accent-dim)' : 'var(--color-bg-elevated)',
                      border: category === c
                        ? '1px solid var(--color-accent)'
                        : '1px solid var(--color-border-default)',
                      color: category === c ? 'var(--color-accent-text)' : 'var(--color-text-secondary)',
                    }}
                  >
                    {c}
                  </button>
                ))}
              </div>
            </div>

            {/* Text area */}
            <div>
              <p
                className="mb-2 text-[10px] font-semibold uppercase tracking-[1.2px]"
                style={{ color: 'var(--color-text-muted)' }}
              >
                Details (optional)
              </p>
              <textarea
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="Tell us more..."
                rows={3}
                className="w-full resize-none rounded-[5px] px-3 py-2 text-sm outline-none transition-colors placeholder:text-[var(--color-text-muted)]"
                style={{
                  background: 'var(--color-bg-card)',
                  border: '1px solid var(--color-border-default)',
                  color: 'var(--color-text-primary)',
                }}
                onFocus={(e) => {
                  e.currentTarget.style.borderColor = 'var(--color-accent)'
                  e.currentTarget.style.boxShadow = '0 0 0 2px var(--color-accent-dim)'
                }}
                onBlur={(e) => {
                  e.currentTarget.style.borderColor = 'var(--color-border-default)'
                  e.currentTarget.style.boxShadow = 'none'
                }}
              />
            </div>

            {/* Submit button */}
            <button
              type="button"
              onClick={handleSubmit}
              disabled={!reaction || submitting}
              className={cn(
                'mt-auto w-full rounded-[5px] px-4 py-2 text-sm font-medium transition-opacity',
                (!reaction || submitting) && 'cursor-not-allowed opacity-50'
              )}
              style={{
                background: 'var(--color-accent)',
                color: '#ffffff',
              }}
            >
              {submitting ? 'Sending...' : 'Submit Feedback'}
            </button>
          </div>
        )}
      </div>
    </>
  )
}
