"use client";

import { FormEvent, useMemo, useState } from "react";
import { 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 } from "@/components/ui/input";
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";

type EldersClientProps = {
  initialElders: Elder[];
  permissions: Permission[];
};

const emptyInput: ElderInput = {
  name: "",
  gender: "male",
  age: 75,
  careLevel: "self-care",
  room: "",
  bed: "",
  status: "active",
  primaryContact: "",
  phone: "",
  medicalNotes: "",
};

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

function elderToInput(elder: Elder): ElderInput {
  return {
    name: elder.name,
    gender: elder.gender,
    age: 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 getRiskLabel(elder: Elder): { label: string; variant: "danger" | "warning" | "success" } {
  if (elder.careLevel === "intensive") {
    return { label: "红色重点", variant: "danger" };
  }

  if (elder.status === "pending" || elder.careLevel === "assisted") {
    return { label: "黄色关注", variant: "warning" };
  }

  return { label: "绿色稳定", variant: "success" };
}

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({ initialElders, permissions }: EldersClientProps): React.ReactElement {
  const [elders, setElders] = useState(initialElders);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [form, setForm] = useState<ElderInput>(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 canCreate = permissions.includes("elder:create");
  const canUpdate = permissions.includes("elder:update");
  const canDelete = permissions.includes("elder:delete");
  const isEditing = editingId !== null;
  const canSubmit = isEditing ? canUpdate : canCreate;

  const metrics = useMemo(() => {
    const activeCount = elders.filter((elder) => elder.status === "active").length;
    const pendingCount = elders.filter((elder) => elder.status === "pending").length;
    const intensiveCount = elders.filter((elder) => elder.careLevel === "intensive").length;
    const warningCount = elders.filter((elder) => getRiskLabel(elder).variant !== "success").length;
    return { activeCount, pendingCount, intensiveCount, warningCount };
  }, [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);

  function updateField<K extends keyof ElderInput>(key: K, value: ElderInput[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("");

    const response = await fetch(isEditing ? `/api/elders/${editingId}` : "/api/elders", {
      method: isEditing ? "PATCH" : "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify(form),
    });
    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>
          <Badge variant="success">全栈 CRUD</Badge>
          <h1 className="mt-3 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.activeCount}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="p-4">
            <CardDescription>待入住</CardDescription>
            <CardTitle className="text-3xl">{metrics.pendingCount}</CardTitle>
          </CardHeader>
        </Card>
        <Card className="border-red-200 bg-red-50/70">
          <CardHeader className="p-4">
            <CardDescription className="text-red-700">红色重点</CardDescription>
            <CardTitle className="text-3xl text-red-700">{metrics.intensiveCount}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="p-4">
            <CardDescription>需关注标记</CardDescription>
            <CardTitle className="text-3xl">{metrics.warningCount}</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>
              <label className="relative block">
                <Filter className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                <select
                  className="h-11 w-full rounded-md border bg-background px-9 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
                  onChange={(event) => updateStatusFilter(event.target.value)}
                  value={statusFilter}
                >
                  <option value={ALL_STATUS}>全部状态</option>
                  {Object.entries(ELDER_STATUS_LABELS).map(([value, label]) => (
                    <option key={value} value={value}>
                      {label}
                    </option>
                  ))}
                </select>
              </label>
              <select
                className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
                onChange={(event) => updateCareLevelFilter(event.target.value)}
                value={careLevelFilter}
              >
                <option value={ALL_CARE_LEVELS}>全部照护</option>
                {Object.entries(CARE_LEVEL_LABELS).map(([value, label]) => (
                  <option key={value} value={value}>
                    {label}
                  </option>
                ))}
              </select>
            </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">
              <thead className="bg-secondary text-left text-xs text-muted-foreground">
                <tr>
                  <th className="px-4 py-3 font-medium">姓名</th>
                  <th className="px-4 py-3 font-medium">照护</th>
                  <th className="px-4 py-3 font-medium">床位</th>
                  <th className="px-4 py-3 font-medium">联系人</th>
                  <th className="px-4 py-3 font-medium">状态</th>
                  <th className="px-4 py-3 font-medium">标记</th>
                  <th className="px-4 py-3 text-right font-medium">操作</th>
                </tr>
              </thead>
              <tbody className="divide-y bg-card">
                {visibleElders.map((elder) => {
                  const risk = getRiskLabel(elder);

                  return (
                    <tr key={elder.id}>
                      <td 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>
                      </td>
                      <td className="px-4 py-3">{CARE_LEVEL_LABELS[elder.careLevel]}</td>
                      <td className="px-4 py-3 text-muted-foreground">
                        {elder.room}-{elder.bed}
                      </td>
                      <td className="px-4 py-3 text-muted-foreground">
                        {elder.primaryContact} / {elder.phone}
                      </td>
                      <td className="px-4 py-3">
                        <Badge variant={elder.status === "active" ? "success" : "secondary"}>
                          {ELDER_STATUS_LABELS[elder.status]}
                        </Badge>
                      </td>
                      <td className="px-4 py-3">
                        <Badge variant={risk.variant}>{risk.label}</Badge>
                      </td>
                      <td className="px-4 py-3">
                        <div className="flex justify-end gap-2">
                          <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>
                      </td>
                    </tr>
                  );
                })}
                {visibleElders.length === 0 ? (
                  <tr>
                    <td className="px-4 py-8 text-center text-muted-foreground" colSpan={7}>
                      暂无匹配老人档案
                    </td>
                  </tr>
                ) : null}
              </tbody>
            </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="保存后会写入服务端数据文件，并生成审计记录。"
        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">
            <label className="grid gap-1.5 text-sm font-medium">
              性别
              <select
                className="h-11 rounded-md border bg-background px-3 text-sm"
                onChange={(event) => updateField("gender", event.target.value as ElderInput["gender"])}
                value={form.gender}
              >
                {Object.entries(GENDER_LABELS).map(([value, label]) => (
                  <option key={value} value={value}>
                    {label}
                  </option>
                ))}
              </select>
            </label>
            <label className="grid gap-1.5 text-sm font-medium">
              年龄
              <Input
                max={130}
                min={0}
                onChange={(event) => updateField("age", Number(event.target.value))}
                type="number"
                value={form.age}
              />
            </label>
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            <label className="grid gap-1.5 text-sm font-medium">
              护理等级
              <select
                className="h-11 rounded-md border bg-background px-3 text-sm"
                onChange={(event) => updateField("careLevel", event.target.value as ElderInput["careLevel"])}
                value={form.careLevel}
              >
                {Object.entries(CARE_LEVEL_LABELS).map(([value, label]) => (
                  <option key={value} value={value}>
                    {label}
                  </option>
                ))}
              </select>
            </label>
            <label className="grid gap-1.5 text-sm font-medium">
              状态
              <select
                className="h-11 rounded-md border bg-background px-3 text-sm"
                onChange={(event) => updateField("status", event.target.value as ElderInput["status"])}
                value={form.status}
              >
                {Object.entries(ELDER_STATUS_LABELS).map(([value, label]) => (
                  <option key={value} value={value}>
                    {label}
                  </option>
                ))}
              </select>
            </label>
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            <label className="grid gap-1.5 text-sm font-medium">
              房间
              <Input value={form.room} onChange={(event) => updateField("room", event.target.value)} />
            </label>
            <label className="grid gap-1.5 text-sm font-medium">
              床位
              <Input value={form.bed} onChange={(event) => updateField("bed", event.target.value)} />
            </label>
          </div>
          <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 rounded-md border bg-background px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
              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
        className="max-w-md"
        description={deleteTarget ? `确认删除 ${deleteTarget.name} 的档案？该操作会写入审计日志。` : undefined}
        onClose={() => setDeleteTarget(null)}
        open={deleteTarget !== null}
        title="删除确认"
      >
        <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}，{deleteTarget.room}-{deleteTarget.bed}，最近更新：
              {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>
    </div>
  );
}