"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { PlusCircle } from "lucide-react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

interface DataDictionaryItem {
  id: string
  fieldName: string
  description: string
  dataType: string
  source: string
}

export default function DataDictionaryPage() {
  const [dataDictionary, setDataDictionary] = useState<DataDictionaryItem[]>([
    {
      id: "1",
      fieldName: "username",
      description: "用户名",
      dataType: "string",
      source: "caihong_shua_users",
    },
  ])
  const [newFieldName, setNewFieldName] = useState("")
  const [newFieldDescription, setNewFieldDescription] = useState("")
  const [newFieldDataType, setNewFieldDataType] = useState("string")
  const [newFieldSource, setNewFieldSource] = useState("")

  const handleAddEntry = () => {
    if (newFieldName.trim() === "") {
      alert("字段名称不能为空")
      return
    }

    const newEntry: DataDictionaryItem = {
      id: Date.now().toString(),
      fieldName: newFieldName,
      description: newFieldDescription,
      dataType: newFieldDataType,
      source: newFieldSource,
    }

    setDataDictionary([...dataDictionary, newEntry])
    setNewFieldName("")
    setNewFieldDescription("")
    setNewFieldDataType("string")
    setNewFieldSource("")
  }

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold">数据字典管理</h1>
          <p className="text-muted-foreground mt-1">管理和维护数据字典</p>
        </div>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>添加数据字典条目</CardTitle>
          <CardDescription>手动添加数据字典条目</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="field-name">字段名称</Label>
            <Input
              id="field-name"
              placeholder="请输入字段名称"
              value={newFieldName}
              onChange={(e) => setNewFieldName(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="field-description">字段描述</Label>
            <Input
              id="field-description"
              placeholder="请输入字段描述"
              value={newFieldDescription}
              onChange={(e) => setNewFieldDescription(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="field-data-type">数据类型</Label>
            <Input
              id="field-data-type"
              placeholder="请输入数据类型"
              value={newFieldDataType}
              onChange={(e) => setNewFieldDataType(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="field-source">数据来源</Label>
            <Input
              id="field-source"
              placeholder="请输入数据来源"
              value={newFieldSource}
              onChange={(e) => setNewFieldSource(e.target.value)}
            />
          </div>
          <Button onClick={handleAddEntry}>
            <PlusCircle className="h-4 w-4 mr-2" />
            添加条目
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>数据字典列表</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>字段名称</TableHead>
                <TableHead>描述</TableHead>
                <TableHead>数据类型</TableHead>
                <TableHead>数据来源</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {dataDictionary.map((item) => (
                <TableRow key={item.id}>
                  <TableCell>{item.fieldName}</TableCell>
                  <TableCell>{item.description}</TableCell>
                  <TableCell>{item.dataType}</TableCell>
                  <TableCell>{item.source}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}