'use client';

import { Permission } from '@pac/types';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Can } from '@/components/can';
import { useAuthStore } from '@/stores/auth-store';

export default function HomePage() {
  const user = useAuthStore((s) => s.user);
  const authenticated = useAuthStore((s) => s.isAuthenticated());

  return (
    <main className="container mx-auto max-w-5xl space-y-6 p-8">
      <header className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">PAC 工作台</h1>
          <p className="text-sm text-muted-foreground">
            Patient Analyze Center — 业务 UI 后续迭代填充
          </p>
        </div>
        <Badge variant={authenticated ? 'default' : 'outline'}>
          {authenticated ? '已登录' : '未登录'}
        </Badge>
      </header>

      <Card>
        <CardHeader>
          <CardTitle>会话信息</CardTitle>
          <CardDescription>来自当前 accessToken 的解析结果</CardDescription>
        </CardHeader>
        <CardContent className="space-y-1 text-sm">
          {user ? (
            <>
              <div>
                用户:<span className="font-mono">{user.sub}</span>
              </div>
              <div>
                宿主:<span className="font-mono">{user.hostId}</span>
              </div>
              <div>
                租户:<span className="font-mono">{user.tenantId}</span>
              </div>
              <div>
                诊所:<span className="font-mono">{user.clinicIds.join(', ')}</span>
              </div>
              <div>
                角色:<span className="font-mono">{user.role}</span>
              </div>
              <div>
                权限:<span className="font-mono">{user.permissions.join(', ')}</span>
              </div>
            </>
          ) : (
            <div className="text-muted-foreground">未携带有效 token</div>
          )}
        </CardContent>
      </Card>

      {/* 按权限渲染按钮 — 展示 Can / useHasPermission 的用法 */}
      <Card>
        <CardHeader>
          <CardTitle>按权限展示动作</CardTitle>
          <CardDescription>
            staff 看不到分配/回收;leader/admin 看得到;只有 admin 看得到平台管理。
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-wrap gap-2">
          <Can perm={Permission.PLAN_VIEW_OWN}>
            <Button variant="default">召回池</Button>
          </Can>
          <Can perm={Permission.PLAN_ASSIGN}>
            <Button variant="outline">分配线索</Button>
          </Can>
          <Can perm={Permission.PLAN_RECYCLE}>
            <Button variant="outline">回收线索</Button>
          </Can>
          <Can perm={Permission.STATS_VIEW}>
            <Button variant="ghost">统计看板</Button>
          </Can>
          <Can
            perm={Permission.PLATFORM_MANAGE}
            fallback={<Button variant="ghost" disabled>平台管理(无权限)</Button>}
          >
            <Button variant="ghost">平台管理</Button>
          </Can>
        </CardContent>
      </Card>
    </main>
  );
}
