import { IconPlayCircle, IconUser, IconFile, IconCheckCircle } from "@arco-design/web-react/icon";
import { dramaApi, logApi, userApi } from "../api";
import { usePageData } from "../hooks/usePageData";
import { hasPermissions } from "../utils/permission";
import { NoAccessPage } from "../components/NoAccessPage";
import { Panel } from "../components/Panel";
import { RequestLogTable } from "../components/RequestLogTable";
import type { AppUser, DashboardPageProps, Drama, MetricCardProps, RequestLog } from "./interface";

const METRIC_ICONS: Record<string, React.ReactNode> = {
    dramas: <IconPlayCircle className="text-2xl text-brand" />,
    users: <IconUser className="text-2xl text-success" />,
    logs: <IconFile className="text-2xl text-warning" />,
    status: <IconCheckCircle className="text-2xl text-success" />,
};

const METRIC_COLORS: Record<string, string> = {
    dramas: "from-brand/5 to-brand/10",
    users: "from-success/5 to-success/10",
    logs: "from-warning/5 to-warning/10",
    status: "from-success/5 to-success/10",
};

function MetricCard({ label, value, icon }: MetricCardProps & { icon: string }) {
    return (
        <div className={`stat-card animate-slide-up bg-gradient-to-br ${METRIC_COLORS[icon]}`}>
            <div className="mb-3.5 flex items-center gap-2">
                <div className="flex h-10 w-10 items-center justify-center">{METRIC_ICONS[icon]}</div>
                <span className="text-[1.1rem] font-medium text-muted">{label}</span>
            </div>
            <div className="text-[1.6rem] font-bold tracking-tight text-ink">{value}</div>
        </div>
    );
}

function DashboardPage({ profile }: DashboardPageProps) {
    const canReadDramas = hasPermissions(profile, ["drama:read"]);
    const canReadUsers = hasPermissions(profile, ["user:read"]);
    const canReadLogs = hasPermissions(profile, ["log:read"]);
    const dramas = usePageData<Drama>(dramaApi.listDramas, { page: 1, pageSize: 20 }, canReadDramas);
    const users = usePageData<AppUser>(userApi.listUsers, { page: 1, pageSize: 20 }, canReadUsers);
    const logs = usePageData<RequestLog>(logApi.listRequestLogs, { page: 1, pageSize: 20 }, canReadLogs);
    const hasAnyDataModule = canReadDramas || canReadUsers || canReadLogs;

    return (
        <div className="page-stack">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 min-[901px]:grid-cols-4">
                {canReadDramas && <MetricCard label="短剧管理" value={dramas.data.pagination.total} icon="dramas" />}
                {canReadUsers && <MetricCard label="用户管理" value={users.data.pagination.total} icon="users" />}
                {canReadLogs && <MetricCard label="请求日志" value={logs.data.pagination.total} icon="logs" />}
                <MetricCard label="接口状态" value="运行中" icon="status" />
            </div>
            {canReadLogs ? (
                <Panel title="最近请求" noPadding>
                    <RequestLogTable data={logs.data.list.slice(0, 8)} loading={logs.loading} />
                </Panel>
            ) : null}
            {!hasAnyDataModule ? <NoAccessPage /> : null}
        </div>
    );
}

export default DashboardPage;