'use client';

import { isApiError } from '@impuestos/contracts';
import { useQuery } from '@tanstack/react-query';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { useT } from '@/i18n/t';
import { api } from '@/lib/api';
import { DangerZone } from './danger-zone';
import { InstallPrompt } from '@/components/install-prompt';
import { Reveal } from '@/components/ui/reveal';
import { DependentsSection } from './dependents-section';
import { IdentitySection } from './identity-section';
import { NotificationsSection } from './notifications-section';

/**
 * Flow E3. This screen is the trust feature: what we hold, who saw it, and the two
 * buttons that take it all back. Everything on it is reachable in one scroll.
 */
export function ProfileScreen() {
  const t = useT();

  const profile = useQuery({
    queryKey: ['me'],
    queryFn: ({ signal }) => api.getProfile(signal),
    retry: (count, error) => !isApiError(error) && count < 1,
  });

  if (profile.isPending) {
    return (
      <div className="space-y-4 py-4">
        <Card>
          <Skeleton name="profile-section" />
        </Card>
        <Card>
          <Skeleton name="profile-section" />
        </Card>
      </div>
    );
  }

  if (profile.isError) {
    const notSetUp = isApiError(profile.error) && profile.error.code === 'not_found';
    return (
      <Card className="my-4 space-y-3">
        <p role="alert" className="text-sm">
          {notSetUp ? t('setup.step1.title') : t('common.error.generic')}
        </p>
        <Button type="button" onClick={() => void profile.refetch()}>
          {t('common.retry')}
        </Button>
      </Card>
    );
  }

  return (
    <Reveal className="space-y-4 py-4">
      <h1 className="text-2xl font-semibold tracking-tight">{t('profile.title')}</h1>
      <IdentitySection profile={profile.data} />
      <DependentsSection />
      <NotificationsSection profile={profile.data} />
      <InstallPrompt />
      <DangerZone />
    </Reveal>
  );
}