"use client";

import type { ReactNode } from "react";
import {
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  InfoCircleOutlined,
  LoadingOutlined,
  WarningOutlined,
} from "@ant-design/icons";
import { Empty, Space, Spin, Typography } from "antd";

const { Paragraph, Text } = Typography;

type PageStateTone = "loading" | "empty" | "error" | "unavailable" | "info";

const toneMeta: Record<
  PageStateTone,
  {
    color: string;
    icon: ReactNode;
  }
> = {
  loading: {
    color: "#1677ff",
    icon: <LoadingOutlined />,
  },
  empty: {
    color: "#8c8c8c",
    icon: <InfoCircleOutlined />,
  },
  error: {
    color: "#ff4d4f",
    icon: <ExclamationCircleOutlined />,
  },
  unavailable: {
    color: "#faad14",
    icon: <WarningOutlined />,
  },
  info: {
    color: "#52c41a",
    icon: <CheckCircleOutlined />,
  },
};

type PageStateNoticeProps = {
  tone: PageStateTone;
  title: string;
  description: ReactNode;
  actions?: ReactNode;
  compact?: boolean;
};

export function PageStateNotice({ tone, title, description, actions, compact = false }: PageStateNoticeProps) {
  const meta = toneMeta[tone];

  if (tone === "loading") {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          padding: compact ? "24px 16px" : "48px 24px",
        }}
      >
        <Space direction="vertical" size={12} style={{ alignItems: "center", maxWidth: 560, textAlign: "center" }}>
          <Spin indicator={<LoadingOutlined style={{ fontSize: compact ? 20 : 28, color: meta.color }} spin />} />
          <Space direction="vertical" size={4}>
            <Text strong>{title}</Text>
            <Paragraph type="secondary" style={{ marginBottom: 0 }}>
              {description}
            </Paragraph>
          </Space>
          {actions}
        </Space>
      </div>
    );
  }

  return (
    <Empty
      image={Empty.PRESENTED_IMAGE_SIMPLE}
      description={
        <Space direction="vertical" size={6} style={{ alignItems: "center", maxWidth: 620, textAlign: "center" }}>
          <span style={{ color: meta.color, fontSize: compact ? 20 : 24 }}>{meta.icon}</span>
          <Text strong>{title}</Text>
          <Paragraph type="secondary" style={{ marginBottom: 0 }}>
            {description}
          </Paragraph>
        </Space>
      }
    >
      {actions}
    </Empty>
  );
}