import type { LucideIcon } from "lucide-react";
import { Database, ExternalLink } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { LinkButton } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

type ModulePageProps = {
  title: string;
  eyebrow: string;
  description: string;
  icon: LucideIcon;
  phase: "待接入" | "二期预留" | "三期预留";
};

const realWorkspaceLinks = [
  { href: "/app/dashboard", label: "运营看板" },
  { href: "/app/elders", label: "老人档案" },
  { href: "/app/beds", label: "床位房间" },
];

export function ModulePage({ title, eyebrow, description, icon: Icon, phase }: ModulePageProps): React.ReactElement {
  return (
    <div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
      <section className="flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-start lg:justify-between">
        <div className="flex min-w-0 items-center gap-3">
          <span className="inline-flex size-9 items-center justify-center rounded-md bg-secondary text-primary">
            <Icon className="size-4" aria-hidden="true" />
          </span>
          <div className="min-w-0">
            <div className="flex items-center gap-2">
              <h1 className="truncate text-xl font-semibold tracking-normal">{title}</h1>
              <Badge variant="secondary">{phase}</Badge>
            </div>
            <p className="mt-1 truncate text-sm text-muted-foreground">{eyebrow}</p>
            <p className="mt-2 max-w-3xl text-sm text-muted-foreground">{description}</p>
          </div>
        </div>
      </section>

      <section className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_24rem]">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <Database className="size-5 text-primary" aria-hidden="true" />
              数据状态
            </CardTitle>
            <CardDescription>当前模块未接入真实业务数据源。</CardDescription>
          </CardHeader>
          <CardContent>
            <dl className="grid gap-3 text-sm">
              <div className="flex items-center justify-between gap-4 border-b pb-3">
                <dt className="text-muted-foreground">业务记录</dt>
                <dd className="font-medium">暂不展示</dd>
              </div>
              <div className="flex items-center justify-between gap-4 border-b pb-3">
                <dt className="text-muted-foreground">统计指标</dt>
                <dd className="font-medium">暂不展示</dd>
              </div>
              <div className="flex items-center justify-between gap-4">
                <dt className="text-muted-foreground">待办流程</dt>
                <dd className="font-medium">待真实流程接入</dd>
              </div>
            </dl>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-base">已接入工作区</CardTitle>
            <CardDescription>以下页面展示真实系统数据。</CardDescription>
          </CardHeader>
          <CardContent className="grid gap-2">
            {realWorkspaceLinks.map((link) => (
              <LinkButton className="w-full justify-between" href={link.href} key={link.href} variant="outline">
                {link.label}
                <ExternalLink className="size-4" aria-hidden="true" />
              </LinkButton>
            ))}
          </CardContent>
        </Card>
      </section>
    </div>
  );
}