import { useState, useEffect, useCallback } from 'react'
import { FileText, X, Eye, Pencil, Save, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { MarkdownRenderer } from '@/components/sessions/MarkdownRenderer'
import { useFileViewerStore } from '@/stores/useFileViewerStore'
import { toast } from '@/lib/toast'
import { useI18n } from '@/i18n/useI18n'
import { PinnedFactsCard } from './PinnedFactsCard'

interface WorktreeContextEditorProps {
  worktreeId: string
}

export function WorktreeContextEditor({
  worktreeId
}: WorktreeContextEditorProps): React.JSX.Element {
  const { t } = useI18n()
  const [content, setContent] = useState('')
  const [savedContent, setSavedContent] = useState('')
  const [isEditing, setIsEditing] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)

  const hasUnsavedChanges = content !== savedContent

  // Load context on mount
  useEffect(() => {
    let cancelled = false

    void (async () => {
      setIsLoading(true)
      try {
        const result = await window.worktreeOps.getContext(worktreeId)
        if (cancelled) return
        const ctx = result.success ? (result.context ?? '') : ''
        setContent(ctx)
        setSavedContent(ctx)
        // Default to edit mode when content is empty
        if (!ctx) {
          setIsEditing(true)
        }
      } catch {
        if (!cancelled) {
          toast.error(t('worktreeContext.toasts.loadError'))
        }
      } finally {
        if (!cancelled) {
          setIsLoading(false)
        }
      }
    })()

    return () => {
      cancelled = true
    }
  }, [worktreeId, t])

  const handleSave = useCallback(async () => {
    setIsSaving(true)
    try {
      const result = await window.worktreeOps.updateContext(worktreeId, content || null)
      if (result.success) {
        setSavedContent(content)
        toast.success(t('worktreeContext.toasts.saved'))
      } else {
        toast.error(result.error || t('worktreeContext.toasts.saveError'))
      }
    } catch {
      toast.error(t('worktreeContext.toasts.saveError'))
    } finally {
      setIsSaving(false)
    }
  }, [worktreeId, content, t])

  // Save on Cmd+S / Ctrl+S
  useEffect(() => {
    if (!isEditing) return

    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
        e.preventDefault()
        if (hasUnsavedChanges && !isSaving) {
          handleSave()
        }
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [isEditing, hasUnsavedChanges, isSaving, handleSave])

  const handleClose = useCallback(() => {
    if (hasUnsavedChanges) {
      const confirmed = window.confirm(t('worktreeContext.confirmDiscard'))
      if (!confirmed) return
    }
    useFileViewerStore.getState().closeContextEditor()
  }, [hasUnsavedChanges, t])

  if (isLoading) {
    return (
      <div className="flex flex-col h-full">
        <div className="flex items-center justify-center flex-1">
          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
        </div>
      </div>
    )
  }

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-muted/30">
        {/* Left: icon + title + unsaved indicator */}
        <FileText className="h-4 w-4 text-emerald-400 flex-shrink-0" />
        <span className="text-sm font-bold">{t('worktreeContext.title')}</span>
        {hasUnsavedChanges && isEditing && (
          <span
            className="w-2 h-2 rounded-full bg-amber-400 flex-shrink-0"
            title={t('worktreeContext.unsaved')}
          />
        )}

        {/* Spacer */}
        <div className="flex-1" />

        {/* Toggle buttons */}
        <div className="flex items-center gap-1">
          <Button
            variant={!isEditing ? 'secondary' : 'ghost'}
            size="sm"
            className="h-7 px-2 text-xs gap-1"
            onClick={() => setIsEditing(false)}
          >
            <Eye className="h-3.5 w-3.5" />
            {t('worktreeContext.preview')}
          </Button>
          <Button
            variant={isEditing ? 'secondary' : 'ghost'}
            size="sm"
            className="h-7 px-2 text-xs gap-1"
            onClick={() => setIsEditing(true)}
          >
            <Pencil className="h-3.5 w-3.5" />
            {t('worktreeContext.edit')}
          </Button>
        </div>

        {/* Close button */}
        <button
          onClick={handleClose}
          className="p-1 rounded hover:bg-accent transition-colors"
          title={t('worktreeContext.close')}
        >
          <X className="h-4 w-4" />
        </button>
      </div>

      {/* Content area */}
      <div className="flex-1 overflow-auto">
        {isEditing ? (
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            placeholder={t('worktreeContext.placeholder')}
            className="w-full min-h-[40vh] resize-none bg-transparent font-mono text-sm p-4 focus:outline-none"
          />
        ) : content ? (
          <div className="p-4 text-sm">
            <MarkdownRenderer content={content} />
          </div>
        ) : (
          <div className="flex items-center justify-center min-h-[40vh] text-sm text-muted-foreground px-8 text-center">
            {t('worktreeContext.empty')}
          </div>
        )}

        {/* v1.4.1: Pinned Facts — permanent worktree-scoped facts injected
            into every AI session as part of the Field Context. */}
        <div className="px-4 pb-4 pt-2">
          <PinnedFactsCard worktreeId={worktreeId} />
        </div>
      </div>

      {/* Footer with save button — only in edit mode */}
      {isEditing && (
        <div className="flex items-center justify-end px-4 py-2 border-t border-border bg-muted/30">
          <Button
            size="sm"
            onClick={handleSave}
            disabled={isSaving || !hasUnsavedChanges}
            className="gap-1.5"
          >
            {isSaving ? (
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
            ) : (
              <Save className="h-3.5 w-3.5" />
            )}
            {t('worktreeContext.save')}
          </Button>
        </div>
      )}
    </div>
  )
}
