import { useEffect, useState } from 'react'
import { apiFetch } from '@core/lib/api'
import { Button } from '@core/components/ui/button'
import { Textarea } from '@core/components/ui/textarea'
import { ScrollArea } from '@core/components/ui/scroll-area'
import { Bot, FileText, MessageSquare, Pencil, Send, User } from 'lucide-react'

function formatDate(value?: string | null): string | null {
  if (!value) return null
  const d = new Date(value)
  if (Number.isNaN(d.getTime())) return value
  return d.toLocaleString()
}

function authorName(id: string | null, people: any[]): string {
  if (!id) return 'Unknown'
  if (id === '00000000000') return 'Devin'
  const person = people.find((p: any) => p.id === id)
  return person?.full_name || id
}

interface MessageProps {
  author: string
  content: string
  createdAt?: string
  isDescription?: boolean
  isDevin?: boolean
  isAgent?: boolean
}

function Message({ author, content, createdAt, isDescription, isDevin, isAgent }: MessageProps) {
  const Icon = isDescription ? FileText : (isDevin || isAgent) ? Bot : User
  return (
    <div className="flex gap-3">
      <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0">
        <Icon className="h-4 w-4 text-muted-foreground" />
      </div>
      <div className="space-y-1 flex-1 min-w-0">
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <span className="font-medium text-foreground truncate">{author}</span>
          {createdAt && <span className="shrink-0">{formatDate(createdAt)}</span>}
        </div>
        <div className={`rounded-lg p-3 text-sm ${isDescription ? 'bg-muted/50' : 'bg-muted/30'}`}>
          <p className="whitespace-pre-wrap break-words">{content}</p>
        </div>
      </div>
    </div>
  )
}

interface DescriptionMessageProps {
  author: string
  display: string
  raw: string
  createdAt?: string
  isDevin?: boolean
  onUpdate: (value: string) => Promise<void>
}

function DescriptionMessage({ author, display, raw, createdAt, isDevin, onUpdate }: DescriptionMessageProps) {
  const [editing, setEditing] = useState(false)
  const [draft, setDraft] = useState(raw)
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    setDraft(raw)
  }, [raw])

  const handleSave = async () => {
    setSaving(true)
    try {
      await onUpdate(draft)
      setEditing(false)
    } finally {
      setSaving(false)
    }
  }

  const Icon = isDevin ? Bot : FileText

  return (
    <div className="flex gap-3">
      <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0">
        <Icon className="h-4 w-4 text-muted-foreground" />
      </div>
      <div className="space-y-1 flex-1 min-w-0">
        <div className="flex items-center gap-2 text-xs text-muted-foreground">
          <span className="font-medium text-foreground truncate">{author}</span>
          {createdAt && <span className="shrink-0">{formatDate(createdAt)}</span>}
        </div>
        {editing ? (
          <div className="space-y-2">
            <Textarea
              value={draft}
              onChange={e => setDraft(e.target.value)}
              rows={4}
              className="text-sm"
            />
            <div className="flex justify-end gap-2">
              <Button variant="outline" size="sm" onClick={() => { setEditing(false); setDraft(raw) }}>
                Cancel
              </Button>
              <Button size="sm" onClick={handleSave} disabled={saving}>
                Save
              </Button>
            </div>
          </div>
        ) : (
          <div className="relative group rounded-lg p-3 text-sm bg-muted/50">
            <Pencil
              className="absolute top-2 right-2 h-3.5 w-3.5 text-muted-foreground cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
              onClick={() => setEditing(true)}
            />
            <p className="whitespace-pre-wrap break-words pr-5">{display || 'No description.'}</p>
          </div>
        )}
      </div>
    </div>
  )
}

interface WorkItemThreadProps {
  item: any
  comments: any[]
  loadingComments: boolean
  aiMode?: boolean
  onToggleAiMode?: () => void
  onPost: (content: string) => Promise<void>
  onPostAi: (content: string) => Promise<void>
  onUpdateDescription: (description: string) => Promise<void>
  itemLabel?: string
  emptyMessage?: string
  placeholder?: string
}

export function WorkItemThread({
  item,
  comments,
  loadingComments,
  aiMode = false,
  onToggleAiMode,
  onPost,
  onPostAi,
  onUpdateDescription,
  itemLabel = 'Work item',
  emptyMessage = 'Create the work item to start the conversation.',
  placeholder = 'Add a message…',
}: WorkItemThreadProps) {
  const [people, setPeople] = useState<any[]>([])
  const [newComment, setNewComment] = useState('')
  const [posting, setPosting] = useState(false)
  const hasItem = !!item

  useEffect(() => {
    apiFetch('/api/admin-data?action=list&entity=people&limit=200')
      .then(r => r.json())
      .then(json => setPeople(Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : []))
      .catch(() => setPeople([]))
  }, [])

  const handlePost = async () => {
    if (!newComment.trim()) return
    setPosting(true)
    try {
      if (aiMode) {
        await onPostAi(newComment.trim())
      } else {
        await onPost(newComment.trim())
      }
      setNewComment('')
    } catch (err) {
      console.error('Failed to post message', err)
    } finally {
      setPosting(false)
    }
  }

  return (
    <div className="flex-1 min-h-0 flex flex-col">
      <div className="shrink-0 flex items-center gap-2 pb-2 border-b">
        <MessageSquare className="h-4 w-4 text-muted-foreground" />
        <span className="text-sm font-medium">Conversation</span>
        {!loadingComments && (
          <span className="text-xs text-muted-foreground">{comments.length} messages</span>
        )}
      </div>
      <ScrollArea className="flex-1 min-h-0 pr-2">
        {loadingComments ? (
          <div className="py-3 text-sm text-muted-foreground">Loading messages…</div>
        ) : !hasItem ? (
          <div className="min-h-full flex items-center justify-center py-3">
            <p className="text-sm text-muted-foreground">{emptyMessage}</p>
          </div>
        ) : (
          <div className="space-y-4 py-3">
            <DescriptionMessage
              author={item.created_by ? authorName(item.created_by, people) : itemLabel}
              display={item.description || ''}
              raw={item.description || ''}
              createdAt={item.created_at}
              isDevin={item.created_by === '00000000000'}
              onUpdate={onUpdateDescription}
            />
            {comments.map((c: any, idx: number) => {
              const isAgent = c.data?.message_type === 'agent'
              const isAiTarget = c.data?.ai_target === true
              return (
                <Message
                  key={c.id || idx}
                  author={isAgent ? 'AI Agent' : `${authorName(c.created_by || null, people)}${isAiTarget ? ' (AI)' : ''}`}
                  content={c.content}
                  createdAt={c.created_at}
                  isDevin={c.created_by === '00000000000'}
                  isAgent={isAgent}
                />
              )
            })}
          </div>
        )}
      </ScrollArea>
      <div className="shrink-0 flex flex-col gap-2 pt-3 border-t">
        <div className="flex items-center justify-between gap-2">
          <Button
            type="button"
            variant={aiMode ? 'default' : 'outline'}
            size="sm"
            onClick={onToggleAiMode}
            disabled={!onToggleAiMode || posting}
          >
            <Bot className="h-4 w-4" />
            <span className="ml-1.5">{aiMode ? 'AI On' : 'AI Off'}</span>
          </Button>
          {aiMode && (
            <span className="text-xs text-muted-foreground">Messages are sent to the AI agent.</span>
          )}
        </div>
        <div className="flex gap-2">
          <Textarea
            value={newComment}
            onChange={e => setNewComment(e.target.value)}
            placeholder={
              aiMode
                ? 'Ask the AI…'
                : hasItem
                  ? placeholder
                  : `Type a first message and send to create the ${itemLabel.toLowerCase()}…`
            }
            rows={2}
            className="text-sm flex-1"
            disabled={posting}
          />
          <Button size="sm" onClick={handlePost} disabled={posting || !newComment.trim()}>
            {aiMode ? <Bot className="h-4 w-4" /> : <Send className="h-4 w-4" />}
          </Button>
        </div>
      </div>
    </div>
  )
}