import { AppField } from '@/components/app/AppField'
import { AppPriorityBadge } from '@/components/app/AppPriorityBadge'
import { AppStatusBadge } from '@/components/app/AppStatusBadge'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'

import { getTicketCategoryLabel } from './ticketCategories'
import type { Ticket } from './types'

type TicketMetaPanelProps = {
  ticket: Ticket
}

function displayUser(user: Ticket['assignee']) {
  return user?.display_name || user?.username || '未设置'
}

export function TicketMetaPanel({ ticket }: TicketMetaPanelProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>工单属性</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid gap-3">
          <AppField label="当前状态">
            <AppStatusBadge status={ticket.status} />
          </AppField>
          <AppField label="优先级">
            <AppPriorityBadge priority={ticket.priority} />
          </AppField>
          <AppField label="问题分类">
            <span className="text-sm text-foreground">{getTicketCategoryLabel(ticket.category_code)}</span>
          </AppField>
          <Separator />
          <AppField label="提出人">
            <span className="text-sm text-foreground">{ticket.submitter_name || '未填写'}</span>
          </AppField>
          <AppField label="提出机构">
            <span className="text-sm text-foreground">{ticket.submitter_org || '未填写'}</span>
          </AppField>
          <AppField label="问题对象">
            <span className="text-sm text-foreground">{ticket.problem_object || '未填写'}</span>
          </AppField>
          <Separator />
          <AppField label="处理人">
            <span className="text-sm text-foreground">{displayUser(ticket.assignee)}</span>
          </AppField>
          <AppField label="请求人">
            <span className="text-sm text-foreground">{displayUser(ticket.requester)}</span>
          </AppField>
          <Separator />
          <AppField label="关联系统">
            <span className="text-sm text-foreground">{ticket.related_system || '未填写'}</span>
          </AppField>
          <AppField label="运行环境">
            <span className="text-sm text-foreground">{ticket.environment || '未填写'}</span>
          </AppField>
          <AppField label="影响范围">
            <span className="text-sm text-foreground">{ticket.impact_scope || '未填写'}</span>
          </AppField>
          <Separator />
          <div className="flex items-center justify-between gap-3">
            <span className="text-xs font-medium text-muted-foreground">SLA</span>
            <Badge variant="outline">后续接入</Badge>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}