import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { FileText, Copy, X, ChevronRight } from 'lucide-react'
import { toast } from 'sonner'
import api from '../lib/api'
import Card from '../components/ui/Card'
import Button from '../components/ui/Button'
import EmptyState from '../components/ui/EmptyState'

const CATEGORY_LABELS: Record<string, string> = {
  CONTRACT: '合同',
  RULES: '规章制度',
  NOTICE: '通知',
  AGREEMENT: '协议',
  OTHER: '其他',
}

const VARIABLE_LABELS: Record<string, string> = {
  companyName: '公司名称',
  employeeName: '员工姓名',
  idCard: '身份证号',
  address: '地址',
  startDate: '开始日期',
  position: '岗位',
  endDate: '结束日期',
  terminationDate: '解除日期',
  publishDate: '公示日期',
  effectiveDate: '生效日期',
  meetingDate: '会议日期',
  meetingLocation: '会议地点',
  policyTitle: '制度名称',
  department: '部门',
  violationDate: '违纪日期',
  violationDescription: '违纪描述',
  probationEndDate: '试用期截止',
  regularDate: '转正日期',
  contractEndDate: '合同到期日',
  salary: '工资',
  phone: '手机号',
  hireDate: '入职日期',
  gender: '性别',
  birthDate: '出生日期',
  bankAccount: '银行账号',
  bankName: '开户银行',
  emergencyContact: '紧急联系人',
  emergencyPhone: '紧急联系电话',
  workYears: '工作年限',
  compAmount: '补偿金额',
  noticeDate: '通知日期',
  reason: '原因',
  overtimeHours: '加班时长',
  overtimePay: '加班费',
  socialInsBase: '社保基数',
  housingFundBase: '公积金基数',
  compensation: '经济补偿',
  lastWorkDay: '最后工作日',
  socialInsEndMonth: '社保截止月',
  housingFundEndMonth: '公积金截止月',
  probationMonths: '试用期月数',
  monthlySalary: '月薪',
  workplace: '工作地点',
  disciplineType: '处分类型',
  policyBasis: '制度依据',
}

/**
 * 用工文本模板库页面
 */
export default function Templates() {
  const [category, setCategory] = useState<string>('')
  const [selected, setSelected] = useState<any>(null)
  const [rendered, setRendered] = useState<string>('')
  const [variables, setVariables] = useState<Record<string, string>>({})

  const { data: list, isLoading } = useQuery<any>({
    queryKey: ['templates', category],
    queryFn: async () => {
      const params = category ? `?category=${category}` : ''
      const res = await api.get(`/templates${params}`) as any
      return res.data
    },
  })

  const { data: detail } = useQuery<any>({
    queryKey: ['template-detail', selected?.id],
    queryFn: async () => {
      const res = await api.get(`/templates/${selected.id}`) as any
      return res.data
    },
    enabled: !!selected,
  })

  const handleRender = async () => {
    if (!selected) return
    try {
      const res = await api.post(`/templates/${selected.id}/render`, { variables }) as any
      setRendered(res.data.content)
    } catch (err: any) {
      toast.error('渲染失败')
    }
  }

  const handleCopy = () => {
    navigator.clipboard.writeText(rendered)
    toast.success('已复制到剪贴板')
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2">
        <FileText className="h-5 w-5 text-primary" />
        <h1 className="text-base font-semibold">用工文本模板库</h1>
      </div>
      <p className="text-sm text-gray-500">合同、制度、通知等常用文本模板，支持变量替换</p>

      <div className="flex gap-2">
        {['', 'CONTRACT', 'RULES', 'NOTICE', 'AGREEMENT', 'OTHER'].map(c => (
          <button
            key={c}
            onClick={() => setCategory(c)}
            className={`px-3 py-1 text-xs rounded-lg ${category === c ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
          >
            {c === '' ? '全部' : CATEGORY_LABELS[c]}
          </button>
        ))}
      </div>

      {isLoading ? (
        <div className="text-center py-8 text-gray-500">加载中...</div>
      ) : !list || list.length === 0 ? (
        <EmptyState title="暂无模板" />
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
          {list.map((t: any) => (
            <Card key={t.id} className="hover:shadow-md transition-shadow cursor-pointer" >
              <div onClick={() => { setSelected(t); setRendered(''); setVariables({}) }}>
                <div className="flex items-center gap-2">
                  <span className="px-1.5 py-0.5 rounded text-xs bg-primary/10 text-primary">{CATEGORY_LABELS[t.category]}</span>
                  <span className="text-sm font-medium truncate">{t.name}</span>
                </div>
                <p className="text-xs text-gray-500 mt-1">{t.description}</p>
                <div className="flex items-center gap-1 mt-2 text-xs text-gray-400">
                  {t.variables?.slice(0, 4).map((v: string) => (
                    <span key={v} className="px-1 py-0.5 rounded bg-gray-100">{VARIABLE_LABELS[v] || v}</span>
                  ))}
                  {t.variables?.length > 4 && <span>+{t.variables.length - 4}</span>}
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}

      {/* 模板详情弹窗 */}
      {selected && (
        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 p-4" onClick={() => setSelected(null)}>
          <Card className="max-w-3xl w-full max-h-[85vh] overflow-y-auto" >
            <div onClick={(e) => e.stopPropagation()}>
              <div className="flex items-center justify-between mb-3">
                <h2 className="text-sm font-medium">{selected.name}</h2>
                <button onClick={() => setSelected(null)} className="text-gray-400 hover:text-gray-600"><X className="w-5 h-5" /></button>
              </div>

              {/* 变量输入 */}
              {detail?.variables && detail.variables.length > 0 && (
                <div className="mb-3 space-y-2">
                  <div className="text-xs font-medium text-gray-600">填写变量</div>
                  <div className="grid grid-cols-2 gap-2">
                    {detail.variables.map((v: string) => (
                      <div key={v}>
                        <label className="text-xs text-gray-500">{VARIABLE_LABELS[v] || v}</label>
                        <input
                          value={variables[v] || ''}
                          onChange={e => setVariables(prev => ({ ...prev, [v]: e.target.value }))}
                          className="w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring-1 focus:ring-primary"
                          placeholder={`输入${VARIABLE_LABELS[v] || v}`}
                        />
                      </div>
                    ))}
                  </div>
                  <Button size="sm" onClick={handleRender}>渲染模板</Button>
                </div>
              )}

              {/* 渲染结果 */}
              {rendered ? (
                <div>
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-xs font-medium text-gray-600">渲染结果</span>
                    <button onClick={handleCopy} className="flex items-center gap-1 text-xs text-primary hover:underline">
                      <Copy className="w-3 h-3" />复制
                    </button>
                  </div>
                  <pre className="text-sm text-gray-700 whitespace-pre-wrap bg-gray-50 p-3 rounded-lg max-h-[50vh] overflow-y-auto">{rendered}</pre>
                </div>
              ) : detail?.content ? (
                <div>
                  <div className="text-xs font-medium text-gray-600 mb-2">模板原文</div>
                  <pre className="text-sm text-gray-700 whitespace-pre-wrap bg-gray-50 p-3 rounded-lg max-h-[50vh] overflow-y-auto">{detail.content}</pre>
                </div>
              ) : null}
            </div>
          </Card>
        </div>
      )}
    </div>
  )
}