"use client";

import { FormEvent, useMemo, useState } from "react";
import { Brain, Edit3, Filter, Plus, Search, Trash2 } 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 } from "@/components/ui/select";
import { Table } from "@/components/ui/table";
import { ElderAiAnalysisDialog } from "@/modules/ai/components/ElderAiAnalysisDialog";
import type { ApiResult } from "@/modules/core/server/api";
import type { Permission } from "@/modules/core/types";
import type { CareLevel, Elder, ElderInput, ElderStatus } from "@/modules/elders/types";
import { CARE_LEVEL_LABELS, ELDER_STATUS_LABELS, GENDER_LABELS } from "@/modules/elders/types";
import type { ElderOperationalContext, OperationalContextLine } from "@/modules/operations/types";

type EldersClientProps = {
  elderContexts?: Record<string, ElderOperationalContext>;
  initialElders: Elder[];
  permissions: Permission[];
};

type ElderFormState = Omit<ElderInput, "age" | "careLevel" | "gender" | "status"> & {
  age: string;
  careLevel: CareLevel | "";
  gender: ElderInput["gender"] | "";
  status: ElderStatus | "";
};

const emptyInput: ElderFormState = {
  name: "",
  gender: "",
  age: "",
  careLevel: "",
  room: "",
  bed: "",
  status: "",
  primaryContact: "",
  phone: "",
  medicalNotes: "",
};

const PAGE_SIZE = 8;
const ALL_STATUS = "all";
const ALL_CARE_LEVELS = "all";

function elderToInput(elder: Elder): ElderFormState {
  return {
    name: elder.name,
    gender: elder.gender,
    age: String(elder.age),
    careLevel: elder.careLevel,
    room: elder.room,
    bed: elder.bed,
    status: elder.status,
    primaryContact: elder.primaryContact,
    phone: elder.phone,
    medicalNotes: elder.medicalNotes,
  };
}

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

function formatBedLabel(elder: Pick<Elder, "room" | "bed">): string {
  return elder.room && elder.bed ? `${elder.room}-${elder.bed}` : "-";
}

const statusOptions = [
  { value: ALL_STATUS, label: "全部状态" },
  ...Object.entries(ELDER_STATUS_LABELS).map(([value, label]) => ({ value, label })),
];

const careLevelOptions = [
  { value: ALL_CARE_LEVELS, label: "全部照护" },
  ...Object.entries(CARE_LEVEL_LABELS).map(([value, label]) => ({ value, label })),
];

const genderOptions = [
  { value: "", label: "选择性别", disabled: true },
  ...Object.entries(GENDER_LABELS).map(([value, label]) => ({ value, label })),
];
const formCareLevelOptions = [
  { value: "", label: "选择护理等级", disabled: true },
  ...Object.entries(CARE_LEVEL_LABELS).map(([value, label]) => ({ value, label })),
];
const formStatusOptions = [
  { value: "", label: "选择档案状态", disabled: true },
  ...Object.entries(ELDER_STATUS_LABELS).map(([value, label]) => ({ value, label })),
];

function matchesFilters(
  elder: Elder,
  query: string,
  statusFilter: ElderStatus | typeof ALL_STATUS,
  careLevelFilter: CareLevel | typeof ALL_CARE_LEVELS,
): boolean {
  const normalizedQuery = query.trim().toLowerCase();
  const matchesSearch =
    normalizedQuery.length === 0 ||
    [elder.name, elder.room, elder.bed, elder.primaryContact, elder.phone, elder.medicalNotes]
      .join(" ")
      .toLowerCase()
      .includes(normalizedQuery);
  const matchesStatus = statusFilter === ALL_STATUS || elder.status === statusFilter;
  const matchesCareLevel = careLevelFilter === ALL_CARE_LEVELS || elder.careLevel === careLevelFilter;

  return matchesSearch && matchesStatus && matchesCareLevel;
}

export function EldersClient({ elderContexts = {}, initialElders, permissions }: EldersClientProps): React.ReactElement {
  const [elders, setElders] = useState(initialElders);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [form, setForm] = useState<ElderFormState>(emptyInput);
  const [message, setMessage] = useState("");
  const [isPending, setIsPending] = useState(false);
  const [isFormOpen, setIsFormOpen] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<Elder | null>(null);
  const [query, setQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState<ElderStatus | typeof ALL_STATUS>(ALL_STATUS);
  const [careLevelFilter, setCareLevelFilter] = useState<CareLevel | typeof ALL_CARE_LEVELS>(ALL_CARE_LEVELS);
  const [page, setPage] = useState(1);
  const [aiTarget, setAiTarget] = useState<Elder | null>(null);

  const canCreate = permissions.includes("elder:create");
  const canUpdate = permissions.includes("elder:update");
  const canDelete = permissions.includes("elder:delete");
  const canUseAi = permissions.includes("ai:read") && permissions.includes("elder:read");
  const isEditing = editingId !== null;
  const canSubmit = isEditing ? canUpdate : canCreate;

  const metrics = useMemo(() => {
    const totalCount = elders.length;
    const activeCount = elders.filter((elder) => elder.status === "active").length;
    const pendingCount = elders.filter((elder) => elder.status === "pending").length;
    const dischargedCount = elders.filter((elder) => elder.status === "discharged").length;
    return { activeCount, dischargedCount, pendingCount, totalCount };
  }, [elders]);

  const filteredElders = useMemo(
    () => elders.filter((elder) => matchesFilters(elder, query, statusFilter, careLevelFilter)),
    [careLevelFilter, elders, query, statusFilter],
  );
  const pageCount = Math.max(1, Math.ceil(filteredElders.length / PAGE_SIZE));
  const safePage = Math.min(page, pageCount);
  const pageStart = (safePage - 1) * PAGE_SIZE;
  const visibleElders = filteredElders.slice(pageStart, pageStart + PAGE_SIZE);
  const editingElder = editingId ? elders.find((elder) => elder.id === editingId) : undefined;

  function updateField<K extends keyof ElderFormState>(key: K, value: ElderFormState[K]): void {
    setForm((current) => ({ ...current, [key]: value }));
  }

  function beginCreate(): void {
    setEditingId(null);
    setForm(emptyInput);
    setMessage("");
    setIsFormOpen(true);
  }

  function beginEdit(elder: Elder): void {
    setEditingId(elder.id);
    setForm(elderToInput(elder));
    setMessage("");
    setIsFormOpen(true);
  }

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

    setIsFormOpen(false);
    setEditingId(null);
    setForm(emptyInput);
  }

  function updateQuery(value: string): void {
    setQuery(value);
    setPage(1);
  }

  function updateStatusFilter(value: string): void {
    setStatusFilter(value as ElderStatus | typeof ALL_STATUS);
    setPage(1);
  }

  function updateCareLevelFilter(value: string): void {
    setCareLevelFilter(value as CareLevel | typeof ALL_CARE_LEVELS);
    setPage(1);
  }

  async function refreshElders(): Promise<void> {
    const response = await fetch("/api/elders");
    const result = (await response.json()) as ApiResult<{ elders: Elder[] }>;
    if (result.success) {
      setElders(result.elders);
    }
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
    event.preventDefault();
    if (!canSubmit) {
      setMessage("当前角色无权保存老人档案");
      return;
    }

    setIsPending(true);
    setMessage("");

    if (!form.gender || !form.careLevel || !form.status) {
      setIsPending(false);
      setMessage("请完整选择性别、护理等级和档案状态");
      return;
    }

    const numericAge = Number(form.age);
    if (!Number.isInteger(numericAge) || numericAge < 0 || numericAge > 130) {
      setIsPending(false);
      setMessage("年龄需为0到130之间的整数");
      return;
    }

    const payload: ElderInput = {
      ...form,
      age: numericAge,
      careLevel: form.careLevel,
      gender: form.gender,
      status: form.status,
    };

    const response = await fetch(isEditing ? `/api/elders/${editingId}` : "/api/elders", {
      method: isEditing ? "PATCH" : "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(payload),
    });
    const result = (await response.json()) as ApiResult<{ elder: Elder }>;
    setIsPending(false);

    if (!result.success) {
      setMessage(result.reason);
      return;
    }

    await refreshElders();
    setEditingId(null);
    setForm(emptyInput);
    setIsFormOpen(false);
    setMessage(result.reason);
  }

  async function handleDelete(): Promise<void> {
    if (!deleteTarget) {
      return;
    }

    if (!canDelete) {
      setMessage("当前角色无权删除老人档案");
      return;
    }

    setIsPending(true);
    setMessage("");

    const response = await fetch(`/api/elders/${deleteTarget.id}`, { method: "DELETE" });
    const result = (await response.json()) as ApiResult<{ elder: Elder }>;
    setIsPending(false);

    if (!result.success) {
      setMessage(result.reason);
      return;
    }

    await refreshElders();
    setDeleteTarget(null);
    setMessage(result.reason);
  }

  return (
    <div className="mx-auto flex w-full max-w-7xl flex-col gap-5">
      <section className="flex flex-col gap-4 border-b pb-5 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <h1 className="text-3xl font-semibold tracking-normal">老人档案</h1>
          <p className="mt-2 text-sm text-muted-foreground">列表管理、筛选搜索、分页、弹窗维护和审计持久化。</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button disabled={!canCreate} onClick={beginCreate} type="button">
            <Plus className="size-4" aria-hidden="true" />
            新增老人
          </Button>
        </div>
      </section>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <Card>
          <CardHeader className="p-4">
            <CardDescription>档案总数</CardDescription>
            <CardTitle className="text-3xl">{metrics.totalCount}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="p-4">
            <CardDescription>在院</CardDescription>
            <CardTitle className="text-3xl">{metrics.activeCount}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="p-4">
            <CardDescription>待入住</CardDescription>
            <CardTitle className="text-3xl">{metrics.pendingCount}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="p-4">
            <CardDescription>已退住</CardDescription>
            <CardTitle className="text-3xl">{metrics.dischargedCount}</CardTitle>
          </CardHeader>
        </Card>
      </section>

      <Card>
        <CardHeader className="gap-4">
          <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <div>
              <CardTitle>档案列表</CardTitle>
              <CardDescription className="mt-1">
                共 {filteredElders.length} 条匹配记录，按状态、照护等级和关键词快速定位。
              </CardDescription>
            </div>
            <div className="grid gap-2 sm:grid-cols-[minmax(220px,1fr)_150px_150px]">
              <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="pl-9"
                  onChange={(event) => updateQuery(event.target.value)}
                  placeholder="搜索姓名、床位、联系人"
                  value={query}
                />
              </label>
              <div className="relative block">
                <Filter className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                <Select
                  aria-label="按老人状态筛选"
                  className="w-full pl-9"
                  onValueChange={updateStatusFilter}
                  options={statusOptions}
                  value={statusFilter}
                />
              </div>
              <Select
                aria-label="按照护等级筛选"
                className="w-full"
                onValueChange={updateCareLevelFilter}
                options={careLevelOptions}
                value={careLevelFilter}
              />
            </div>
          </div>
          {message ? (
            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
              {message}
            </p>
          ) : null}
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto rounded-md border">
            <Table className="w-full min-w-[980px] 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 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">
                {visibleElders.map((elder) => (
                  <Table.Row key={elder.id}>
                    <Table.Cell className="px-4 py-3">
                      <p className="font-medium">{elder.name}</p>
                      <p className="text-xs text-muted-foreground">
                        {GENDER_LABELS[elder.gender]} · {elder.age} 岁
                      </p>
                    </Table.Cell>
                    <Table.Cell className="px-4 py-3">{CARE_LEVEL_LABELS[elder.careLevel]}</Table.Cell>
                    <Table.Cell className="px-4 py-3 text-muted-foreground">{formatBedLabel(elder)}</Table.Cell>
                    <Table.Cell className="px-4 py-3">
                      <ContextLines lines={elderContexts[elder.id]?.lines ?? []} />
                    </Table.Cell>
                    <Table.Cell className="px-4 py-3 text-muted-foreground">
                      {elder.primaryContact} / {elder.phone}
                    </Table.Cell>
                    <Table.Cell className="px-4 py-3">
                      <Badge variant={elder.status === "active" ? "success" : "secondary"}>
                        {ELDER_STATUS_LABELS[elder.status]}
                      </Badge>
                    </Table.Cell>
                    <Table.Cell className="px-4 py-3">
                      <div className="flex justify-end gap-2">
                        {canUseAi ? (
                          <Button
                            onClick={() => setAiTarget(elder)}
                            size="sm"
                            type="button"
                            variant="outline"
                          >
                            <Brain className="size-4" aria-hidden="true" />
                            AI 分析
                          </Button>
                        ) : null}
                        <Button
                          disabled={!canUpdate}
                          onClick={() => beginEdit(elder)}
                          size="sm"
                          type="button"
                          variant="outline"
                        >
                          <Edit3 className="size-4" aria-hidden="true" />
                          编辑
                        </Button>
                        <Button
                          disabled={!canDelete || isPending}
                          onClick={() => setDeleteTarget(elder)}
                          size="sm"
                          type="button"
                          variant="destructive"
                        >
                          <Trash2 className="size-4" aria-hidden="true" />
                          删除
                        </Button>
                      </div>
                    </Table.Cell>
                  </Table.Row>
                ))}
                {visibleElders.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>
          </div>
          <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <p className="text-sm text-muted-foreground">
              第 {safePage} / {pageCount} 页
            </p>
            <div className="flex gap-2">
              <Button
                disabled={safePage === 1}
                onClick={() => setPage((current) => Math.max(1, current - 1))}
                size="sm"
                type="button"
                variant="outline"
              >
                上一页
              </Button>
              <Button
                disabled={safePage === pageCount}
                onClick={() => setPage((current) => Math.min(pageCount, current + 1))}
                size="sm"
                type="button"
                variant="outline"
              >
                下一页
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      <Dialog
        description="保存后会写入 PostgreSQL，并生成审计记录。"
        onClose={closeForm}
        open={isFormOpen}
        title={isEditing ? "编辑老人档案" : "新增老人档案"}
      >
        <form className="grid gap-3" id="elder-form" onSubmit={handleSubmit}>
          <label className="grid gap-1.5 text-sm font-medium">
            姓名
            <Input value={form.name} onChange={(event) => updateField("name", event.target.value)} />
          </label>
          <div className="grid gap-3 sm:grid-cols-2">
            <div className="grid gap-1.5 text-sm font-medium">
              性别
              <Select
                aria-label="性别"
                onValueChange={(value) => updateField("gender", value as ElderFormState["gender"])}
                options={genderOptions}
                required
                value={form.gender}
              />
            </div>
            <label className="grid gap-1.5 text-sm font-medium">
              年龄
              <Input
                max={130}
                min={0}
                onChange={(event) => updateField("age", event.target.value)}
                required
                type="number"
                value={form.age}
              />
            </label>
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            <div className="grid gap-1.5 text-sm font-medium">
              护理等级
              <Select
                aria-label="护理等级"
                onValueChange={(value) => updateField("careLevel", value as ElderFormState["careLevel"])}
                options={formCareLevelOptions}
                required
                value={form.careLevel}
              />
            </div>
            <div className="grid gap-1.5 text-sm font-medium">
              状态
              <Select
                aria-label="状态"
                onValueChange={(value) => updateField("status", value as ElderFormState["status"])}
                options={formStatusOptions}
                required
                value={form.status}
              />
            </div>
          </div>
          {isEditing ? (
            <div className="rounded-md border bg-secondary/30 px-3 py-2 text-sm">
              当前床位：{editingElder ? formatBedLabel(editingElder) : "-"}
            </div>
          ) : null}
          <label className="grid gap-1.5 text-sm font-medium">
            联系人
            <Input value={form.primaryContact} onChange={(event) => updateField("primaryContact", event.target.value)} />
          </label>
          <label className="grid gap-1.5 text-sm font-medium">
            联系电话
            <Input value={form.phone} onChange={(event) => updateField("phone", event.target.value)} />
          </label>
          <label className="grid gap-1.5 text-sm font-medium">
            健康备注
            <Textarea
              className="min-h-24"
              onChange={(event) => updateField("medicalNotes", event.target.value)}
              value={form.medicalNotes}
            />
          </label>
          {message ? (
            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
              {message}
            </p>
          ) : null}
          <div className="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
            <Button disabled={isPending} onClick={closeForm} type="button" variant="outline">
              取消
            </Button>
            <Button disabled={isPending || !canSubmit} type="submit">
              <Plus className="size-4" aria-hidden="true" />
              {isEditing ? "保存修改" : "新增老人"}
            </Button>
          </div>
        </form>
      </Dialog>

      <Dialog
        description={deleteTarget ? `确认删除 ${deleteTarget.name} 的档案？该操作会写入审计日志。` : undefined}
        onClose={() => setDeleteTarget(null)}
        open={deleteTarget !== null}
        title="删除确认"
        width="sm"
      >
        <div className="flex flex-col gap-4">
          {deleteTarget ? (
            <div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700">
              {deleteTarget.name}，{formatBedLabel(deleteTarget)}，最近更新：
              {formatDateTime(deleteTarget.updatedAt)}
            </div>
          ) : null}
          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
            <Button disabled={isPending} onClick={() => setDeleteTarget(null)} type="button" variant="outline">
              取消
            </Button>
            <Button disabled={isPending || !canDelete} onClick={() => void handleDelete()} type="button" variant="destructive">
              删除档案
            </Button>
          </div>
        </div>
      </Dialog>

      <ElderAiAnalysisDialog elder={aiTarget} onClose={() => setAiTarget(null)} open={aiTarget !== null} />
    </div>
  );
}

function contextToneClass(tone: OperationalContextLine["tone"]): string {
  if (tone === "danger") {
    return "text-destructive";
  }
  if (tone === "warning") {
    return "text-amber-700";
  }
  return "text-muted-foreground";
}

function ContextLines({ lines }: { lines: OperationalContextLine[] }): React.ReactElement {
  if (lines.length === 0) {
    return <span className="text-muted-foreground">-</span>;
  }

  return (
    <div className="grid gap-1">
      {lines.map((line) => (
        <p className={`max-w-[240px] truncate text-xs ${contextToneClass(line.tone)}`} key={`${line.kind}-${line.label}-${line.value}`}>
          <span className="font-medium">{line.label}</span> {line.value}
        </p>
      ))}
    </div>
  );
}