"use client";

import { FormEvent, useMemo, useState } from "react";
import { Activity, ClipboardPlus, FileText, HeartPulse, Search, ShieldAlert, Stethoscope } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog } from "@/components/ui/dialog";
import { Input, Textarea } from "@/components/ui/input";
import { Select, type SelectOption } from "@/components/ui/select";
import { Table } from "@/components/ui/table";
import type { ApiResult } from "@/modules/core/server/api";
import type {
  ChronicCondition,
  ChronicConditionStatus,
  HealthAdminData,
  HealthAnomalyReview,
  HealthProfile,
  HealthReviewSeverity,
  HealthReviewStatus,
  VitalRecord,
  VitalSource,
} from "@/modules/health/types";
import {
  CHRONIC_CONDITION_STATUS_LABELS,
  HEALTH_REVIEW_SEVERITY_LABELS,
  HEALTH_REVIEW_STATUS_LABELS,
  VITAL_SOURCE_LABELS,
} from "@/modules/health/types";

type HealthAdminClientProps = {
  canManage: boolean;
  initialData: HealthAdminData;
};

type HealthTab = "profiles" | "vitals" | "conditions" | "reviews";

type ProfileForm = {
  allergyNotes: string;
  medicalHistory: string;
  medicationNotes: string;
  careRestrictions: string;
  emergencyNotes: string;
};

const tabs: Array<{ value: HealthTab; label: string }> = [
  { value: "profiles", label: "健康档案" },
  { value: "vitals", label: "生命体征" },
  { value: "conditions", label: "慢病记录" },
  { value: "reviews", label: "异常复核" },
];

const emptyProfileForm: ProfileForm = {
  allergyNotes: "",
  medicalHistory: "",
  medicationNotes: "",
  careRestrictions: "",
  emergencyNotes: "",
};

const emptyVitalForm = {
  elderId: "",
  recordedAt: "",
  source: "manual" as VitalSource,
  systolicBp: "",
  diastolicBp: "",
  heartRate: "",
  temperatureTenths: "",
  spo2: "",
  bloodGlucoseTenths: "",
  weightTenths: "",
  notes: "",
};

const emptyConditionForm = {
  elderId: "",
  name: "",
  status: "active" as ChronicConditionStatus,
  diagnosedAt: "",
  treatmentNotes: "",
  followUpNotes: "",
};

function formatDateTime(value: string | undefined): string {
  return value ? new Date(value).toLocaleString("zh-CN") : "-";
}

function formatTenths(value: number | undefined, suffix = ""): string {
  return value === undefined ? "-" : `${(value / 10).toFixed(1)}${suffix}`;
}

function optionalNumber(value: string): number | undefined {
  const trimmed = value.trim();
  if (!trimmed) {
    return undefined;
  }

  const numeric = Number(trimmed);
  return Number.isFinite(numeric) ? numeric : undefined;
}

function optionalTenths(value: string): number | undefined {
  const numeric = optionalNumber(value);
  return numeric === undefined ? undefined : Math.round(numeric * 10);
}

function profileToForm(profile: HealthProfile | undefined): ProfileForm {
  return profile
    ? {
        allergyNotes: profile.allergyNotes,
        medicalHistory: profile.medicalHistory,
        medicationNotes: profile.medicationNotes,
        careRestrictions: profile.careRestrictions,
        emergencyNotes: profile.emergencyNotes,
      }
    : emptyProfileForm;
}

function severityBadgeVariant(severity: HealthReviewSeverity): "secondary" | "warning" | "danger" {
  if (severity === "critical") {
    return "danger";
  }

  return severity === "warning" ? "warning" : "secondary";
}

function reviewStatusBadgeVariant(status: HealthReviewStatus): "success" | "secondary" | "warning" {
  if (status === "pending") {
    return "warning";
  }

  return status === "resolved" ? "success" : "secondary";
}

export function HealthAdminClient({ canManage, initialData }: HealthAdminClientProps): React.ReactElement {
  const [data, setData] = useState(initialData);
  const [activeTab, setActiveTab] = useState<HealthTab>("profiles");
  const [query, setQuery] = useState("");
  const [vitalSourceFilter, setVitalSourceFilter] = useState<"all" | VitalSource>("all");
  const [conditionStatusFilter, setConditionStatusFilter] = useState<"all" | ChronicConditionStatus>("all");
  const [reviewStatusFilter, setReviewStatusFilter] = useState<"all" | HealthReviewStatus>("all");
  const [reviewSeverityFilter, setReviewSeverityFilter] = useState<"all" | HealthReviewSeverity>("all");
  const [message, setMessage] = useState("");
  const [isPending, setIsPending] = useState(false);
  const [editingProfile, setEditingProfile] = useState<HealthProfile | undefined>();
  const [profileElderId, setProfileElderId] = useState("");
  const [profileForm, setProfileForm] = useState<ProfileForm>(emptyProfileForm);
  const [isVitalOpen, setIsVitalOpen] = useState(false);
  const [vitalForm, setVitalForm] = useState(emptyVitalForm);
  const [isConditionOpen, setIsConditionOpen] = useState(false);
  const [conditionForm, setConditionForm] = useState(emptyConditionForm);
  const [reviewTarget, setReviewTarget] = useState<HealthAnomalyReview | undefined>();
  const [reviewStatus, setReviewStatus] = useState<HealthReviewStatus>("reviewed");
  const [reviewNotes, setReviewNotes] = useState("");

  const elderOptions: SelectOption[] = useMemo(
    () => [
      { value: "", label: "选择老人", disabled: true },
      ...data.elders.map((elder) => ({ value: elder.id, label: elder.name })),
    ],
    [data.elders],
  );
  const normalizedQuery = query.trim().toLowerCase();
  const profilesByElderId = useMemo(
    () => new Map(data.profiles.map((profile) => [profile.elderId, profile])),
    [data.profiles],
  );
  const filteredElders = useMemo(
    () =>
      data.elders.filter((elder) => {
        if (!normalizedQuery) {
          return true;
        }

        const profile = profilesByElderId.get(elder.id);
        return [elder.name, profile?.allergyNotes, profile?.medicalHistory, profile?.emergencyNotes]
          .join(" ")
          .toLowerCase()
          .includes(normalizedQuery);
      }),
    [data.elders, normalizedQuery, profilesByElderId],
  );
  const filteredVitals = useMemo(
    () =>
      data.vitals.filter((vital) => {
        const matchesQuery = !normalizedQuery || vital.elderName.toLowerCase().includes(normalizedQuery);
        const matchesSource = vitalSourceFilter === "all" || vital.source === vitalSourceFilter;
        return matchesQuery && matchesSource;
      }),
    [data.vitals, normalizedQuery, vitalSourceFilter],
  );
  const filteredConditions = useMemo(
    () =>
      data.chronicConditions.filter((condition) => {
        const matchesQuery = !normalizedQuery
          ? true
          : [condition.elderName, condition.name].join(" ").toLowerCase().includes(normalizedQuery);
        const matchesStatus = conditionStatusFilter === "all" || condition.status === conditionStatusFilter;
        return matchesQuery && matchesStatus;
      }),
    [conditionStatusFilter, data.chronicConditions, normalizedQuery],
  );
  const filteredReviews = useMemo(
    () =>
      data.reviews.filter((review) => {
        const matchesQuery = !normalizedQuery
          ? true
          : [review.elderName, review.title, review.description].join(" ").toLowerCase().includes(normalizedQuery);
        const matchesStatus = reviewStatusFilter === "all" || review.status === reviewStatusFilter;
        const matchesSeverity = reviewSeverityFilter === "all" || review.severity === reviewSeverityFilter;
        return matchesQuery && matchesStatus && matchesSeverity;
      }),
    [data.reviews, normalizedQuery, reviewSeverityFilter, reviewStatusFilter],
  );

  async function refreshData(): Promise<void> {
    const response = await fetch("/api/health/admin");
    const result = (await response.json()) as ApiResult<{ data: HealthAdminData }>;
    if (result.success) {
      setData(result.data);
    }
  }

  function openProfileDialog(elderId: string): void {
    const profile = profilesByElderId.get(elderId);
    setEditingProfile(profile);
    setProfileElderId(elderId);
    setProfileForm(profileToForm(profile));
    setMessage("");
  }

  function closeProfileDialog(): void {
    if (isPending) {
      return;
    }

    setEditingProfile(undefined);
    setProfileElderId("");
    setProfileForm(emptyProfileForm);
  }

  async function saveProfile(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    if (!canManage || !profileElderId) {
      setMessage("当前角色无权维护健康档案");
      return;
    }

    setIsPending(true);
    setMessage("");
    const response = await fetch(`/api/health/profiles/${profileElderId}`, {
      method: "PUT",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(profileForm),
    });
    const result = (await response.json()) as ApiResult<{ profile: HealthProfile }>;
    setIsPending(false);
    setMessage(result.reason);

    if (result.success) {
      closeProfileDialog();
      await refreshData();
    }
  }

  async function saveVital(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    if (!canManage) {
      setMessage("当前角色无权录入生命体征");
      return;
    }

    setIsPending(true);
    setMessage("");
    const response = await fetch("/api/health/vitals", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        elderId: vitalForm.elderId,
        recordedAt: vitalForm.recordedAt,
        source: vitalForm.source,
        systolicBp: optionalNumber(vitalForm.systolicBp),
        diastolicBp: optionalNumber(vitalForm.diastolicBp),
        heartRate: optionalNumber(vitalForm.heartRate),
        temperatureTenths: optionalTenths(vitalForm.temperatureTenths),
        spo2: optionalNumber(vitalForm.spo2),
        bloodGlucoseTenths: optionalTenths(vitalForm.bloodGlucoseTenths),
        weightTenths: optionalTenths(vitalForm.weightTenths),
        notes: vitalForm.notes,
      }),
    });
    const result = (await response.json()) as ApiResult<{ vital: VitalRecord; review?: HealthAnomalyReview }>;
    setIsPending(false);
    setMessage(result.reason);

    if (result.success) {
      setIsVitalOpen(false);
      setVitalForm(emptyVitalForm);
      await refreshData();
    }
  }

  async function saveCondition(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    if (!canManage) {
      setMessage("当前角色无权新增慢病记录");
      return;
    }

    setIsPending(true);
    setMessage("");
    const response = await fetch("/api/health/chronic-conditions", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(conditionForm),
    });
    const result = (await response.json()) as ApiResult<{ condition: ChronicCondition }>;
    setIsPending(false);
    setMessage(result.reason);

    if (result.success) {
      setIsConditionOpen(false);
      setConditionForm(emptyConditionForm);
      await refreshData();
    }
  }

  function openReviewDialog(review: HealthAnomalyReview): void {
    setReviewTarget(review);
    setReviewStatus(review.status === "pending" ? "reviewed" : review.status);
    setReviewNotes(review.resolutionNotes);
    setMessage("");
  }

  function closeReviewDialog(): void {
    if (isPending) {
      return;
    }

    setReviewTarget(undefined);
    setReviewStatus("reviewed");
    setReviewNotes("");
  }

  async function saveReview(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    if (!canManage || !reviewTarget) {
      setMessage("当前角色无权处理异常复核");
      return;
    }

    setIsPending(true);
    setMessage("");
    const response = await fetch(`/api/health/reviews/${reviewTarget.id}`, {
      method: "PATCH",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ status: reviewStatus, resolutionNotes: reviewNotes }),
    });
    const result = (await response.json()) as ApiResult<{ review: HealthAnomalyReview }>;
    setIsPending(false);
    setMessage(result.reason);

    if (result.success) {
      closeReviewDialog();
      await refreshData();
    }
  }

  return (
    <div className="flex w-full flex-col gap-5">
      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <MetricCard icon={FileText} label="健康档案" value={data.metrics.eldersWithProfiles} />
        <MetricCard icon={Activity} label="今日体征" value={data.metrics.vitalsToday} />
        <MetricCard icon={Stethoscope} label="慢病管理" value={data.metrics.activeChronicConditions} />
        <MetricCard icon={ShieldAlert} label="待复核" value={data.metrics.pendingReviews} />
      </section>

      <section className="flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-center lg:justify-between">
        <div className="flex flex-wrap gap-2" role="tablist" aria-label="健康数据管理">
          {tabs.map((tab) => (
            <Button
              aria-selected={activeTab === tab.value}
              key={tab.value}
              onClick={() => setActiveTab(tab.value)}
              role="tab"
              type="button"
              variant={activeTab === tab.value ? "default" : "outline"}
            >
              {tab.label}
            </Button>
          ))}
        </div>
        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
          <label className="relative block">
            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              className="w-full pl-9 sm:w-72"
              onChange={(event) => setQuery(event.target.value)}
              placeholder="搜索老人、记录或异常"
              value={query}
            />
          </label>
          {activeTab === "vitals" ? (
            <Select
              aria-label="体征来源"
              onValueChange={(value) => setVitalSourceFilter(value as "all" | VitalSource)}
              options={[
                { value: "all", label: "全部来源" },
                ...Object.entries(VITAL_SOURCE_LABELS).map(([value, label]) => ({ value, label })),
              ]}
              value={vitalSourceFilter}
            />
          ) : null}
          {activeTab === "conditions" ? (
            <Select
              aria-label="慢病状态"
              onValueChange={(value) => setConditionStatusFilter(value as "all" | ChronicConditionStatus)}
              options={[
                { value: "all", label: "全部状态" },
                ...Object.entries(CHRONIC_CONDITION_STATUS_LABELS).map(([value, label]) => ({ value, label })),
              ]}
              value={conditionStatusFilter}
            />
          ) : null}
          {activeTab === "reviews" ? (
            <>
              <Select
                aria-label="复核状态"
                onValueChange={(value) => setReviewStatusFilter(value as "all" | HealthReviewStatus)}
                options={[
                  { value: "all", label: "全部状态" },
                  ...Object.entries(HEALTH_REVIEW_STATUS_LABELS).map(([value, label]) => ({ value, label })),
                ]}
                value={reviewStatusFilter}
              />
              <Select
                aria-label="异常级别"
                onValueChange={(value) => setReviewSeverityFilter(value as "all" | HealthReviewSeverity)}
                options={[
                  { value: "all", label: "全部级别" },
                  ...Object.entries(HEALTH_REVIEW_SEVERITY_LABELS).map(([value, label]) => ({ value, label })),
                ]}
                value={reviewSeverityFilter}
              />
            </>
          ) : null}
          {activeTab === "vitals" ? (
            <Button disabled={!canManage} onClick={() => setIsVitalOpen(true)} type="button">
              <HeartPulse className="size-4" aria-hidden="true" />
              录入体征
            </Button>
          ) : null}
          {activeTab === "conditions" ? (
            <Button disabled={!canManage} onClick={() => setIsConditionOpen(true)} type="button">
              <ClipboardPlus className="size-4" aria-hidden="true" />
              新增慢病
            </Button>
          ) : null}
        </div>
      </section>

      {message ? (
        <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
          {message}
        </p>
      ) : null}

      {activeTab === "profiles" ? (
        <Card>
          <CardHeader>
            <CardTitle>健康档案</CardTitle>
            <CardDescription>按老人维护过敏、病史、用药和紧急说明。</CardDescription>
          </CardHeader>
          <CardContent className="overflow-x-auto">
            <Table className="w-full min-w-[840px] text-sm">
              <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
                <Table.Row>
                  <Table.Head className="px-4 py-3 font-medium">老人</Table.Head>
                  <Table.Head className="px-4 py-3 font-medium">过敏</Table.Head>
                  <Table.Head className="px-4 py-3 font-medium">用药</Table.Head>
                  <Table.Head className="px-4 py-3 font-medium">紧急说明</Table.Head>
                  <Table.Head className="px-4 py-3 text-right font-medium">操作</Table.Head>
                </Table.Row>
              </Table.Header>
              <Table.Body className="divide-y bg-card">
                {filteredElders.map((elder) => {
                  const profile = profilesByElderId.get(elder.id);
                  return (
                    <Table.Row key={elder.id}>
                      <Table.Cell className="px-4 py-3 font-medium">{elder.name}</Table.Cell>
                      <Table.Cell className="px-4 py-3 text-muted-foreground">{profile?.allergyNotes || "-"}</Table.Cell>
                      <Table.Cell className="px-4 py-3 text-muted-foreground">{profile?.medicationNotes || "-"}</Table.Cell>
                      <Table.Cell className="px-4 py-3 text-muted-foreground">{profile?.emergencyNotes || "-"}</Table.Cell>
                      <Table.Cell className="px-4 py-3 text-right">
                        <Button
                          disabled={!canManage}
                          onClick={() => openProfileDialog(elder.id)}
                          size="sm"
                          type="button"
                          variant="outline"
                        >
                          维护档案
                        </Button>
                      </Table.Cell>
                    </Table.Row>
                  );
                })}
              </Table.Body>
            </Table>
          </CardContent>
        </Card>
      ) : null}

      {activeTab === "vitals" ? (
        <DataTable
          emptyText="暂无生命体征记录"
          headers={["老人", "时间", "来源", "血压", "心率", "体温", "血氧", "备注"]}
          rows={filteredVitals.map((vital) => [
            vital.elderName,
            formatDateTime(vital.recordedAt),
            VITAL_SOURCE_LABELS[vital.source],
            vital.systolicBp && vital.diastolicBp ? `${vital.systolicBp}/${vital.diastolicBp}` : "-",
            vital.heartRate?.toString() ?? "-",
            formatTenths(vital.temperatureTenths, "°C"),
            vital.spo2 === undefined ? "-" : `${vital.spo2}%`,
            vital.notes || "-",
          ])}
          title="生命体征"
        />
      ) : null}

      {activeTab === "conditions" ? (
        <DataTable
          emptyText="暂无慢病记录"
          headers={["老人", "慢病", "状态", "诊断时间", "治疗记录", "随访备注"]}
          rows={filteredConditions.map((condition) => [
            condition.elderName,
            condition.name,
            CHRONIC_CONDITION_STATUS_LABELS[condition.status],
            formatDateTime(condition.diagnosedAt),
            condition.treatmentNotes || "-",
            condition.followUpNotes || "-",
          ])}
          title="慢病记录"
        />
      ) : null}

      {activeTab === "reviews" ? (
        <Card>
          <CardHeader>
            <CardTitle>异常复核</CardTitle>
            <CardDescription>处理生命体征触发或手工创建的健康异常。</CardDescription>
          </CardHeader>
          <CardContent className="overflow-x-auto">
            <Table className="w-full min-w-[900px] text-sm">
              <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
                <Table.Row>
                  <Table.Head className="px-4 py-3 font-medium">老人</Table.Head>
                  <Table.Head className="px-4 py-3 font-medium">异常</Table.Head>
                  <Table.Head className="px-4 py-3 font-medium">级别</Table.Head>
                  <Table.Head className="px-4 py-3 font-medium">状态</Table.Head>
                  <Table.Head className="px-4 py-3 font-medium">处理人</Table.Head>
                  <Table.Head className="px-4 py-3 text-right font-medium">操作</Table.Head>
                </Table.Row>
              </Table.Header>
              <Table.Body className="divide-y bg-card">
                {filteredReviews.map((review) => (
                  <Table.Row key={review.id}>
                    <Table.Cell className="px-4 py-3 font-medium">{review.elderName}</Table.Cell>
                    <Table.Cell className="px-4 py-3">
                      <p className="font-medium">{review.title}</p>
                      <p className="text-xs text-muted-foreground">{review.description}</p>
                    </Table.Cell>
                    <Table.Cell className="px-4 py-3">
                      <Badge variant={severityBadgeVariant(review.severity)}>
                        {HEALTH_REVIEW_SEVERITY_LABELS[review.severity]}
                      </Badge>
                    </Table.Cell>
                    <Table.Cell className="px-4 py-3">
                      <Badge variant={reviewStatusBadgeVariant(review.status)}>
                        {HEALTH_REVIEW_STATUS_LABELS[review.status]}
                      </Badge>
                    </Table.Cell>
                    <Table.Cell className="px-4 py-3 text-muted-foreground">{review.reviewedByName ?? "-"}</Table.Cell>
                    <Table.Cell className="px-4 py-3 text-right">
                      <Button
                        disabled={!canManage}
                        onClick={() => openReviewDialog(review)}
                        size="sm"
                        type="button"
                        variant="outline"
                      >
                        处理
                      </Button>
                    </Table.Cell>
                  </Table.Row>
                ))}
                {filteredReviews.length === 0 ? (
                  <Table.Row>
                    <Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
                      暂无异常复核
                    </Table.Cell>
                  </Table.Row>
                ) : null}
              </Table.Body>
            </Table>
          </CardContent>
        </Card>
      ) : null}

      <Dialog
        description="维护老人健康档案基础信息。"
        onClose={closeProfileDialog}
        open={profileElderId.length > 0}
        title={editingProfile ? "编辑健康档案" : "新增健康档案"}
        width="lg"
      >
        <form className="grid gap-3" onSubmit={saveProfile}>
          <Textarea
            label="过敏记录"
            onChange={(event) => setProfileForm((current) => ({ ...current, allergyNotes: event.target.value }))}
            value={profileForm.allergyNotes}
          />
          <Textarea
            label="既往病史"
            onChange={(event) => setProfileForm((current) => ({ ...current, medicalHistory: event.target.value }))}
            value={profileForm.medicalHistory}
          />
          <Textarea
            label="用药备注"
            onChange={(event) => setProfileForm((current) => ({ ...current, medicationNotes: event.target.value }))}
            value={profileForm.medicationNotes}
          />
          <Textarea
            label="照护限制"
            onChange={(event) => setProfileForm((current) => ({ ...current, careRestrictions: event.target.value }))}
            value={profileForm.careRestrictions}
          />
          <Textarea
            label="紧急说明"
            onChange={(event) => setProfileForm((current) => ({ ...current, emergencyNotes: event.target.value }))}
            value={profileForm.emergencyNotes}
          />
          <DialogActions isPending={isPending} onCancel={closeProfileDialog} submitLabel="保存档案" />
        </form>
      </Dialog>

      <Dialog description="录入一条真实生命体征记录。" onClose={() => setIsVitalOpen(false)} open={isVitalOpen} title="录入生命体征" width="lg">
        <form className="grid gap-3" onSubmit={saveVital}>
          <Select
            label="老人"
            onValueChange={(value) => setVitalForm((current) => ({ ...current, elderId: value }))}
            options={elderOptions}
            required
            value={vitalForm.elderId}
          />
          <div className="grid gap-3 md:grid-cols-2">
            <Input
              label="记录时间"
              onChange={(event) => setVitalForm((current) => ({ ...current, recordedAt: event.target.value }))}
              required
              type="datetime-local"
              value={vitalForm.recordedAt}
            />
            <Select
              label="来源"
              onValueChange={(value) => setVitalForm((current) => ({ ...current, source: value as VitalSource }))}
              options={Object.entries(VITAL_SOURCE_LABELS).map(([value, label]) => ({ value, label }))}
              value={vitalForm.source}
            />
          </div>
          <div className="grid gap-3 md:grid-cols-3">
            <Input label="收缩压" onChange={(event) => setVitalForm((current) => ({ ...current, systolicBp: event.target.value }))} value={vitalForm.systolicBp} />
            <Input label="舒张压" onChange={(event) => setVitalForm((current) => ({ ...current, diastolicBp: event.target.value }))} value={vitalForm.diastolicBp} />
            <Input label="心率" onChange={(event) => setVitalForm((current) => ({ ...current, heartRate: event.target.value }))} value={vitalForm.heartRate} />
            <Input label="体温" onChange={(event) => setVitalForm((current) => ({ ...current, temperatureTenths: event.target.value }))} value={vitalForm.temperatureTenths} />
            <Input label="血氧" onChange={(event) => setVitalForm((current) => ({ ...current, spo2: event.target.value }))} value={vitalForm.spo2} />
            <Input label="体重" onChange={(event) => setVitalForm((current) => ({ ...current, weightTenths: event.target.value }))} value={vitalForm.weightTenths} />
          </div>
          <Textarea label="备注" onChange={(event) => setVitalForm((current) => ({ ...current, notes: event.target.value }))} value={vitalForm.notes} />
          <DialogActions isPending={isPending} onCancel={() => setIsVitalOpen(false)} submitLabel="录入体征" />
        </form>
      </Dialog>

      <Dialog description="新增老人慢病管理记录。" onClose={() => setIsConditionOpen(false)} open={isConditionOpen} title="新增慢病记录">
        <form className="grid gap-3" onSubmit={saveCondition}>
          <Select
            label="老人"
            onValueChange={(value) => setConditionForm((current) => ({ ...current, elderId: value }))}
            options={elderOptions}
            required
            value={conditionForm.elderId}
          />
          <Input label="慢病名称" onChange={(event) => setConditionForm((current) => ({ ...current, name: event.target.value }))} required value={conditionForm.name} />
          <Select
            label="状态"
            onValueChange={(value) => setConditionForm((current) => ({ ...current, status: value as ChronicConditionStatus }))}
            options={Object.entries(CHRONIC_CONDITION_STATUS_LABELS).map(([value, label]) => ({ value, label }))}
            value={conditionForm.status}
          />
          <Input
            label="诊断日期"
            onChange={(event) => setConditionForm((current) => ({ ...current, diagnosedAt: event.target.value }))}
            type="date"
            value={conditionForm.diagnosedAt}
          />
          <Textarea label="治疗记录" onChange={(event) => setConditionForm((current) => ({ ...current, treatmentNotes: event.target.value }))} value={conditionForm.treatmentNotes} />
          <Textarea label="随访备注" onChange={(event) => setConditionForm((current) => ({ ...current, followUpNotes: event.target.value }))} value={conditionForm.followUpNotes} />
          <DialogActions isPending={isPending} onCancel={() => setIsConditionOpen(false)} submitLabel="新增慢病" />
        </form>
      </Dialog>

      <Dialog description={reviewTarget?.description} onClose={closeReviewDialog} open={reviewTarget !== undefined} title={reviewTarget?.title ?? "处理异常复核"}>
        <form className="grid gap-3" onSubmit={saveReview}>
          <Select
            label="处理状态"
            onValueChange={(value) => setReviewStatus(value as HealthReviewStatus)}
            options={Object.entries(HEALTH_REVIEW_STATUS_LABELS).map(([value, label]) => ({ value, label }))}
            value={reviewStatus}
          />
          <Textarea label="处理备注" onChange={(event) => setReviewNotes(event.target.value)} value={reviewNotes} />
          <DialogActions isPending={isPending} onCancel={closeReviewDialog} submitLabel="保存复核" />
        </form>
      </Dialog>
    </div>
  );
}

function MetricCard({
  icon: Icon,
  label,
  value,
}: {
  icon: React.ComponentType<{ "aria-hidden"?: boolean; className?: string }>;
  label: string;
  value: number;
}): React.ReactElement {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between p-4">
        <div>
          <CardDescription>{label}</CardDescription>
          <CardTitle className="mt-2 text-3xl">{value}</CardTitle>
        </div>
        <Icon className="size-5 text-primary" aria-hidden={true} />
      </CardHeader>
    </Card>
  );
}

function DataTable({
  emptyText,
  headers,
  rows,
  title,
}: {
  emptyText: string;
  headers: string[];
  rows: string[][];
  title: string;
}): React.ReactElement {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent className="overflow-x-auto">
        <Table className="w-full min-w-[860px] text-sm">
          <Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
            <Table.Row>
              {headers.map((header) => (
                <Table.Head className="px-4 py-3 font-medium" key={header}>
                  {header}
                </Table.Head>
              ))}
            </Table.Row>
          </Table.Header>
          <Table.Body className="divide-y bg-card">
            {rows.map((row, rowIndex) => (
              <Table.Row key={row.join("|") || rowIndex}>
                {row.map((cell, cellIndex) => (
                  <Table.Cell className={cellIndex === 0 ? "px-4 py-3 font-medium" : "px-4 py-3 text-muted-foreground"} key={`${cell}-${cellIndex}`}>
                    {cell}
                  </Table.Cell>
                ))}
              </Table.Row>
            ))}
            {rows.length === 0 ? (
              <Table.Row>
                <Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={headers.length}>
                  {emptyText}
                </Table.Cell>
              </Table.Row>
            ) : null}
          </Table.Body>
        </Table>
      </CardContent>
    </Card>
  );
}

function DialogActions({
  isPending,
  onCancel,
  submitLabel,
}: {
  isPending: boolean;
  onCancel: () => void;
  submitLabel: string;
}): React.ReactElement {
  return (
    <div className="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
      <Button disabled={isPending} onClick={onCancel} type="button" variant="outline">
        取消
      </Button>
      <Button disabled={isPending} type="submit">
        {submitLabel}
      </Button>
    </div>
  );
}