'use client';

import { PageHeader } from '@/components/layout/page-header';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { type DomainCheckResult, checkDomainAction } from './actions';
import { DomainInput } from './components/DomainInput';
import { ResultList } from './components/ResultList';

/**
 * Domaincheck module page within the portal.
 *
 * Provides a form to enter a domain label, calls the API to check
 * TLD variant availability, and displays color-coded results.
 *
 * Per D-05a: uses Card-style layout consistent with portal modules.
 */
export default function DomaincheckPage() {
  const t = useTranslations('domaincheck');

  const [results, setResults] = useState<DomainCheckResult[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (domain: string) => {
    setIsLoading(true);
    setError(null);

    try {
      const response = await checkDomainAction(domain);
      setResults(response.results);
    } catch (err) {
      setError(err instanceof Error ? err.message : t('error'));
      setResults([]);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="mx-auto max-w-2xl space-y-6 p-3 sm:p-6">
      <PageHeader moduleSlug="domaincheck" title={t('title')} description={t('description')} />

      {/* Card panel (per D-05a) */}
      <div className="rounded-lg bg-card dark:border dark:border-border p-6 shadow-sm space-y-4">
        {/* Domain input */}
        <DomainInput onSubmit={handleSubmit} isLoading={isLoading} />

        {/* Error message */}
        {error && (
          <p className="text-sm text-destructive">{error}</p>
        )}

        {/* Results */}
        <ResultList results={results} />
      </div>
    </div>
  );
}