import { AppDataTable, type AppDataTableColumn } from '@/components/app/AppDataTable'
import { AppDetailLayout } from '@/components/app/AppDetailLayout'
import { AppEmptyState } from '@/components/app/AppEmptyState'
import { AppFilterBar } from '@/components/app/AppFilterBar'
import { AppPageHeader } from '@/components/app/AppPageHeader'
import { AppPriorityBadge } from '@/components/app/AppPriorityBadge'
import { AppSection } from '@/components/app/AppSection'
import { AppStatusBadge } from '@/components/app/AppStatusBadge'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

type PreviewRow = {
  id: number
  name: string
  status: string
  priority: string
}

const previewRows: PreviewRow[] = [
  { id: 1, name: '登录失败无法进入生产系统', status: 'in_progress', priority: 'urgent' },
  { id: 2, name: '报表导出结果缺少字段', status: 'pending', priority: 'medium' }
]

const previewColumns: AppDataTableColumn<PreviewRow>[] = [
  { key: 'name', header: '问题', cell: (row) => row.name },
  { key: 'status', header: '状态', cell: (row) => <AppStatusBadge status={row.status} /> },
  { key: 'priority', header: '优先级', cell: (row) => <AppPriorityBadge priority={row.priority} /> },
  { key: 'action', header: '操作', cell: () => <Button variant="ghost">查看</Button> }
]

export function DesignSystemPreview() {
  return (
    <main className="min-h-screen bg-background p-6 text-foreground">
      <div className="mx-auto flex max-w-6xl flex-col gap-6">
        <AppPageHeader
          title="设计系统预览"
          actions={<Button>创建工单</Button>}
        />

        <Card>
          <CardHeader>
            <CardTitle className="text-sm">按钮</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-wrap gap-2">
            <Button>主要操作</Button>
            <Button variant="secondary">次要操作</Button>
            <Button variant="ghost">轻量操作</Button>
            <Button variant="destructive">高风险操作</Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-sm">状态与优先级</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-wrap gap-2">
            <Badge>默认</Badge>
            <Badge variant="success">成功</Badge>
            <Badge variant="warning">提醒</Badge>
            <Badge variant="danger">风险</Badge>
            <Badge variant="info">信息</Badge>
            <Badge variant="ai">AI</Badge>
            <AppStatusBadge status="in_progress" />
            <AppPriorityBadge priority="urgent" />
          </CardContent>
        </Card>

        <AppFilterBar actions={<Button variant="outline">重置筛选</Button>}>
          <Input placeholder="搜索工单标题或编号" />
          <Select defaultValue="all">
            <SelectTrigger className="w-full">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="all">全部状态</SelectItem>
                <SelectItem value="pending">待处理</SelectItem>
                <SelectItem value="in_progress">处理中</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </AppFilterBar>

        <AppDataTable
          columns={previewColumns}
          rows={previewRows}
          getRowKey={(row) => row.id}
          emptyTitle="暂无数据"
        />

        <AppDetailLayout
          side={
            <AppSection title="右侧面板">
              <AppEmptyState title="等待接入" />
            </AppSection>
          }
        >
          <AppSection title="详情区块">
            <p className="text-sm text-muted-foreground">页面级布局只复用 App 组件，业务字段由页面自行传入。</p>
          </AppSection>
        </AppDetailLayout>
      </div>
    </main>
  )
}