import { useState } from 'react'
import { MessageSquare, Send } from 'lucide-react'
import { EmptyState } from '@/components/common/EmptyState'
import { Markdown } from '@/components/common/Markdown'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import type { Consultation } from '@/types'
import { useWorkbenchData, WorkbenchShell, ReplyDialog, maskPhone } from './shared'

/** 专家工作台 - 待回复咨询:用户发起的咨询,专家在此回复 */
export function WorkbenchPending() {
  const { expert, consultations, loading, error, loadData } = useWorkbenchData()
  const [replyTarget, setReplyTarget] = useState<Consultation | null>(null)

  const pendingConsultations = consultations.filter(c => c.status === 'pending')

  return (
    <WorkbenchShell expert={expert} loading={loading} error={error} title="待回复咨询" description="用户发起的咨询,在此回复">
      {pendingConsultations.length === 0 ? (
        <EmptyState title="暂无待回复咨询" description="用户发起咨询后会显示在这里" icon={<MessageSquare className="h-8 w-8" />} />
      ) : (
        <div className="space-y-3">
          {pendingConsultations.map((c) => (
            <Card key={c.id}>
              <CardContent className="py-4">
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <p className="truncate text-sm font-medium">{c.topic}</p>
                      <Badge variant="destructive" className="shrink-0 text-xs">待回复</Badge>
                    </div>
                    <p className="mt-0.5 text-xs text-muted-foreground">用户:{maskPhone(c.user_phone || '')}</p>
                    {c.question && (
                      <div className="mt-2 text-sm text-muted-foreground">
                        <Markdown content={c.question} />
                      </div>
                    )}
                    {c.context && (
                      <div className="mt-2 rounded-md bg-muted/30 p-2 text-xs text-muted-foreground">
                        <p className="mb-1 font-medium">AI 对话上下文:</p>
                        <Markdown content={c.context} />
                      </div>
                    )}
                    <p className="mt-2 text-xs text-muted-foreground">创建时间:{c.created_at}</p>
                  </div>
                  <Button size="sm" className="shrink-0" onClick={() => setReplyTarget(c)}>
                    <Send className="h-3.5 w-3.5" /> 回复
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      <ReplyDialog target={replyTarget} onClose={() => setReplyTarget(null)} onSuccess={loadData} />
    </WorkbenchShell>
  )
}