"use client"

import Section from "@/components/shared/section"
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card"
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
import {ChartContainer, ChartTooltip, ChartTooltipContent,} from "@/components/ui/chart"
import {
  Area,
  AreaChart,
  CartesianGrid,
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
} from "recharts"

const baseArchive = [
  { industry: "燃气", 规模: 1240, 平均年限: 9.4, 类型数: 12, 覆盖区县: 12 },
  { industry: "供水", 规模: 980, 平均年限: 8.1, 类型数: 9, 覆盖区县: 12 },
  { industry: "排水", 规模: 760, 平均年限: 10.2, 类型数: 7, 覆盖区县: 12 },
]

export default function InfraDashboard() {
  return (
    <div className="space-y-8">
      <Section
        title="基础档案"
        description="构建设施基础档案，数字化呈现规模、年限、类型与分布。"
      >
        <Card>
          <CardContent className="pt-4 overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>行业</TableHead>
                  <TableHead>规模（处）</TableHead>
                  <TableHead>平均年限（年）</TableHead>
                  <TableHead>类型数</TableHead>
                  <TableHead>覆盖区县</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {baseArchive.map((row) => (
                  <TableRow key={row.industry}>
                    <TableCell className="font-medium">{row.industry}</TableCell>
                    <TableCell>{row.规模}</TableCell>
                    <TableCell>{row.平均年限}</TableCell>
                    <TableCell>{row.类型数}</TableCell>
                    <TableCell>{row.覆盖区县}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </Section>

      <Section
        title="运行信息"
        description="展示日常供应能力与承载能力，辅助掌握运行能力、指导设施建设。"
      >
        <div className="grid gap-4 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">供水能力（万m³/日）</CardTitle>
            </CardHeader>
            <CardContent>
              <ChartContainer
                config={{ supply: { label: "供水", color: "hsl(var(--chart-2))" } }}
                className="h-[220px]"
              >
                <ResponsiveContainer width="100%" height="100%">
                  <AreaChart
                    data={Array.from({ length: 12 }).map((_, i) => ({
                      m: `${i + 1}月`,
                      supply: Math.round(290 + 5 * i + 10 * Math.sin(i / 2)),
                    }))}
                  >
                    <defs>
                      <linearGradient id="supplyFill" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor="var(--color-supply)" stopOpacity={0.35} />
                        <stop offset="95%" stopColor="var(--color-supply)" stopOpacity={0.05} />
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
                    <XAxis dataKey="m" tickLine={false} axisLine={false} />
                    <YAxis tickLine={false} axisLine={false} />
                    <ChartTooltip content={<ChartTooltipContent />} />
                    <Area type="monotone" dataKey="supply" stroke="var(--color-supply)" fill="url(#supplyFill)" />
                  </AreaChart>
                </ResponsiveContainer>
              </ChartContainer>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle className="text-sm">承载能力雷达图（样例）</CardTitle>
            </CardHeader>
            <CardContent>
              <ChartContainer
                config={{
                  score: { label: "能力分", color: "hsl(var(--chart-3))" },
                }}
                className="h-[220px]"
              >
                <ResponsiveContainer width="100%" height="100%">
                  <RadarChart
                    data={[
                      { name: "管网", score: 76 },
                      { name: "水厂", score: 84 },
                      { name: "泵站", score: 72 },
                      { name: "阀门", score: 68 },
                      { name: "智能化", score: 80 },
                    ]}
                  >
                    <PolarGrid />
                    <PolarAngleAxis dataKey="name" />
                    <PolarRadiusAxis angle={30} domain={[0, 100]} />
                    <Radar
                      name="能力"
                      dataKey="score"
                      stroke="var(--color-score)"
                      fill="var(--color-score)"
                      fillOpacity={0.2}
                    />
                  </RadarChart>
                </ResponsiveContainer>
              </ChartContainer>
            </CardContent>
          </Card>
        </div>
      </Section>

      <Section title="管理信息" description="分类展示管理单位信息，辅助了解权属分布。">
        <Card>
          <CardContent className="pt-4">
            <div className="grid gap-4 md:grid-cols-3">
              <UnitCard name="市燃气集团" owners={5} regions={8} />
              <UnitCard name="市自来水公司" owners={4} regions={10} />
              <UnitCard name="市排水管理中心" owners={3} regions={12} />
            </div>
          </CardContent>
        </Card>
      </Section>

      <Section title="应急保障" description="展示危险源、防护目标及应急资源配置情况。">
        <div className="grid gap-4 md:grid-cols-3">
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">危险源</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="text-sm list-disc pl-4 space-y-1">
                <li>高压燃气管线（重点段） 26 处</li>
                <li>大型储气罐区 8 处</li>
                <li>易涝点 14 处</li>
              </ul>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">防护目标</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="text-sm list-disc pl-4 space-y-1">
                <li>学校、医院等重点单位 120 所</li>
                <li>大型商圈 12 个</li>
                <li>交通枢纽 6 处</li>
              </ul>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle className="text-sm">应急资源</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="text-sm list-disc pl-4 space-y-1">
                <li>应急队伍 18 支</li>
                <li>应急车辆 64 台</li>
                <li>物资库 9 处（发电机、沙袋、移动泵等）</li>
              </ul>
            </CardContent>
          </Card>
        </div>
      </Section>
    </div>
  )
}

function UnitCard({ name, owners, regions }: { name: string; owners: number; regions: number }) {
  return (
    <div className="rounded-lg border p-4">
      <h3 className="font-medium">{name}</h3>
      <p className="text-sm text-muted-foreground mt-1">权属单位：{owners} 个</p>
      <p className="text-sm text-muted-foreground">覆盖区县：{regions} 个</p>
    </div>
  )
}