import React from "react";
import { Card, Button, Typography, Space, Tooltip } from "antd";
import { SyncOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/ru";
import type { UserRole } from "../../services/types";

// Настройка dayjs для русской локали и относительного времени
dayjs.extend(relativeTime);
dayjs.locale("ru");

const { Text } = Typography;

interface SyncBlockProps {
  lastSyncAt: string | null;
  userRole: UserRole;
  onSync: () => void;
  isLoading?: boolean;
}

export const SyncBlock: React.FC<SyncBlockProps> = ({
  lastSyncAt,
  userRole,
  onSync,
  isLoading = false,
}) => {
  // Проверяем, есть ли права на синхронизацию
  const canSync = userRole === "OWNER" || userRole === "ADMIN";

  // Форматируем дату последней синхронизации
  const formatLastSync = (dateStr: string | null): string => {
    if (!dateStr) {
      return "Никогда";
    }
    const date = dayjs(dateStr);
    const formatted = date.format("DD.MM.YYYY HH:mm");
    const relative = date.fromNow();
    return `${formatted} (${relative})`;
  };

  return (
    <Card size="small" style={{ marginBottom: 16 }}>
      <Space direction="vertical" style={{ width: "100%" }} size="middle">
        <div>
          <Text
            strong
            style={{ fontSize: 16, display: "block", marginBottom: 8 }}
          >
            Синхронизация данных
          </Text>
          <Text type="secondary">
            Последняя синхронизация: {formatLastSync(lastSyncAt)}
          </Text>
        </div>

        <Tooltip title={!canSync ? "Только для администраторов" : undefined}>
          <Button
            type="primary"
            icon={<SyncOutlined spin={isLoading} />}
            onClick={onSync}
            loading={isLoading}
            disabled={!canSync}
            block
          >
            Синхронизировать
          </Button>
        </Tooltip>

        <Text type="secondary" style={{ fontSize: 12 }}>
          Загружает справочники, накладные и пересчитывает рекомендации
        </Text>
      </Space>
    </Card>
  );
};