import { App, Empty, Input, Spin } from 'antd';
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { spacing } from '@/design/tokens/spacing';
import { usersApi } from '@/services/usersApi';
import type { UserDetails } from '@/types/user';
import UserInfoCard from '@/pages/Profile/UserInfoCard';
import StatCardsRow from '@/pages/Profile/StatCards';
import ProfileTabs from '@/pages/Profile/ProfileTabs';

type SearchStatus = 'idle' | 'loading' | 'error' | 'success';

interface FetchResult {
  uuid: string;
  status: 'success' | 'error';
  user: UserDetails | null;
}

const UUID_PARAM = 'uuid';

const Profile = () => {
  const { message } = App.useApp();
  const [searchParams, setSearchParams] = useSearchParams();
  const uuid = searchParams.get(UUID_PARAM) ?? '';
  const [result, setResult] = useState<FetchResult | null>(null);

  const handleSearch = (value: string) => {
    const trimmed = value.trim();

    if (!trimmed) {
      message.warning('شناسه (UUID) کاربر را وارد کنید');
      return;
    }

    setSearchParams({ [UUID_PARAM]: trimmed });
  };

  useEffect(() => {
    if (!uuid) {
      return;
    }

    usersApi
      .getUserDetails(uuid)
      .then((details) => {
        setResult({ uuid, status: 'success', user: details });
      })
      .catch(() => {
        setResult({ uuid, status: 'error', user: null });
        message.error('کاربری با این شناسه یافت نشد');
      });
  }, [uuid, message]);

  const isCurrent = result?.uuid === uuid;
  const status: SearchStatus = !uuid ? 'idle' : isCurrent ? result.status : 'loading';
  const user = isCurrent ? result.user : null;

  return (
    <div>
      <div style={{ marginBottom: spacing.md }}>
        <Input.Search
          placeholder="جستجو بر اساس شناسه (UUID) کاربر"
          defaultValue={uuid}
          onSearch={handleSearch}
          enterButton="جستجو"
          size="large"
          loading={status === 'loading'}
          style={{ maxWidth: 480 }}
        />
      </div>

      {status === 'idle' && (
        <Empty description="برای مشاهده اطلاعات، شناسه (UUID) کاربر را جستجو کنید" style={{ padding: spacing.xl }} />
      )}

      {status === 'loading' && (
        <div style={{ display: 'flex', justifyContent: 'center', padding: spacing.xl }}>
          <Spin size="large" />
        </div>
      )}

      {status === 'error' && <Empty description="کاربری با این شناسه یافت نشد" style={{ padding: spacing.xl }} />}

      {status === 'success' && user && (
        <>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: spacing.md }}>
            <UserInfoCard user={user} />
            <StatCardsRow />
          </div>

          <ProfileTabs style={{ marginTop: spacing.lg }} />
        </>
      )}
    </div>
  );
};

export default Profile;