import React from 'react';
import { Settings as SettingsIcon, UserCheck, UserX } from 'lucide-react';
import { PageContainer, PageTitle } from '@/components/ui/Typography';
import { Button } from '@/components/ui/Button';
import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
import { useAutoVerifySetting, useUpdateAutoVerifySetting } from './core/_hooks';
import { ReportSkeleton } from '@/components/common/ReportSkeleton';

const SystemSettingsPage = () => {
  const { data, isLoading, error } = useAutoVerifySetting();
  const { mutate: updateSetting, isPending } = useUpdateAutoVerifySetting();

  const handleToggle = (enabled: boolean) => {
    updateSetting({
      data: { enabled },
    });
  };

  if (isLoading) {
    return (
      <PageContainer>
        <ReportSkeleton />
      </PageContainer>
    );
  }

  if (error) {
    return (
      <PageContainer>
        <div className="text-center py-12">
          <p className="text-red-600 dark:text-red-400">
            خطا در بارگذاری تنظیمات
          </p>
        </div>
      </PageContainer>
    );
  }

  const isEnabled = data?.setting?.data?.enabled || false;

  return (
    <PageContainer>
      <PageTitle>تنظیمات سیستم</PageTitle>

      <div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-6 mb-6">
        <div className="flex items-center justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-3 mb-2">
              {isEnabled ? (
                <UserCheck className="h-6 w-6 text-green-600 dark:text-green-400" />
              ) : (
                <UserX className="h-6 w-6 text-gray-400" />
              )}
              <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                تأیید خودکار کاربران جدید
              </h3>
            </div>
            <p className="text-sm text-gray-600 dark:text-gray-400 mr-9">
              در صورت فعال بودن این گزینه، کاربرانی که برای اولین بار ثبت‌نام می‌کنند به صورت خودکار تأیید می‌شوند.
              در غیر این صورت، کاربران باید توسط ادمین به صورت دستی تأیید شوند.
            </p>
            {data?.setting?.updated_at && (
              <p className="text-xs text-gray-500 dark:text-gray-500 mt-2 mr-9">
                آخرین به‌روزرسانی: {new Date(data.setting.updated_at).toLocaleDateString('fa-IR')}
              </p>
            )}
          </div>
          <div className="flex items-center gap-4">
            {isPending ? (
              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-gray-100"></div>
            ) : (
              <ToggleSwitch
                checked={isEnabled}
                onChange={handleToggle}
              />
            )}
          </div>
        </div>
      </div>
    </PageContainer>
  );
};

export default SystemSettingsPage;
