impuestospy/apps/web/app/[locale]/(marketing)/ruc-hook.tsx

'use client';

import { isApiError, type LookupDto } from '@impuestos/contracts';
import { formatDateLong, type Locale } from '@impuestos/i18n';
import { useMutation } from '@tanstack/react-query';
import { useLocale } from 'next-intl';
import { useState } from 'react';
import { Button, buttonClasses } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Skeleton } from '@/components/ui/skeleton';
import { Link } from '@/i18n/navigation';
import { useT } from '@/i18n/t';
import { api } from '@/lib/api';

/**
 * Flow A2. Type a RUC or CI and see your own filing dates before signing up: the whole
 * point is that the first screen already knows something true about you.
 */
export function RucHook() {
  const t = useT();
  const locale = useLocale() as Locale;
  const [value, setValue] = useState('');

  const lookup = useMutation<LookupDto, unknown, string>({
    mutationFn: (input) => api.lookupRuc(input),
  });

  const result = lookup.data;
  const invalid = result !== undefined && !result.valid;

  return (
    <div className="space-y-4">
      <form
        className="space-y-2"
        onSubmit={(event) => {
          event.preventDefault();
          const trimmed = value.trim();
          if (trimmed.length > 0) lookup.mutate(trimmed);
        }}
      >
        <Label htmlFor="ruc">{t('landing.hero.inputLabel')}</Label>
        {/* Stacks at 390px so the call to action never wraps to two lines. */}
        <div className="flex flex-col gap-2 sm:flex-row">
          <Input
            id="ruc"
            name="ruc"
            inputMode="numeric"
            autoComplete="off"
            value={value}
            aria-invalid={invalid}
            aria-describedby={invalid ? 'ruc-error' : undefined}
            onChange={(event) => setValue(event.target.value)}
          />
          <Button
            type="submit"
            className="whitespace-nowrap"
            disabled={lookup.isPending || value.trim().length === 0}
          >
            {lookup.isPending ? t('landing.lookup.checking') : t('landing.hero.cta')}
          </Button>
        </div>

        {invalid ? (
          <p id="ruc-error" role="alert" className="text-sm text-overdue">
            {t('landing.invalidDoc')}
          </p>
        ) : null}

        {lookup.isError ? (
          <p role="alert" className="text-sm text-overdue">
            {isApiError(lookup.error) ? lookup.error.message : t('common.error.generic')}
          </p>
        ) : null}
      </form>

      {lookup.isPending ? (
        <Card>
          <Skeleton name="dashboard-position" />
        </Card>
      ) : null}

      {result?.valid ? <Preview result={result} locale={locale} /> : null}
    </div>
  );
}

function Preview({ result, locale }: { result: LookupDto; locale: Locale }) {
  const t = useT();
  const [d1, d2, d3] = result.nextDeadlines as [string, string, string];

  return (
    <Card className="space-y-3">
      <p className="text-sm font-medium text-[var(--text-muted)]">{t('landing.preview.title')}</p>
      <p className="text-lg font-semibold tracking-tight text-balance">
        {t('landing.preview.deadline', { day: result.deadlineDay })}
      </p>
      <p className="text-sm text-[var(--text-muted)]">
        {t('landing.preview.next', {
          d1: formatDateLong(locale, d1),
          d2: formatDateLong(locale, d2),
          d3: formatDateLong(locale, d3),
        })}
      </p>
      <Link href="/registro" className={buttonClasses({ className: 'mt-2 w-full sm:w-auto' })}>
        {t('landing.preview.cta')}
      </Link>
    </Card>
  );
}