import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Loader2 } from 'lucide-react';
import { Page } from './_util';
import { useLocale } from '../i18n/LocaleContext';
import { useTranslation } from '../i18n/useTranslation';
import { getHelpArticle, type HelpArticleDetail } from '../services/helpApi';

export default function HelpArticlePage() {
  const params = useParams<{ token?: string; slug: string }>();
  const slug = params.slug;
  const { locale } = useLocale();
  const { t } = useTranslation();
  const [article, setArticle] = React.useState<HelpArticleDetail | null>(null);
  const [state, setState] = React.useState<'loading' | 'ready' | 'error'>('loading');
  const basePath = params.token ? `/e/${encodeURIComponent(params.token)}/help` : '/help';

  const loadArticle = React.useCallback(async () => {
    if (!slug) {
      setState('error');
      return;
    }
    setState('loading');
    try {
      const result = await getHelpArticle(slug, locale);
      setArticle(result.article);
      setState('ready');
    } catch (error) {
      console.error('[HelpArticle] Failed to load article', error);
      setState('error');
    }
  }, [slug, locale]);

  React.useEffect(() => {
    loadArticle();
  }, [loadArticle]);

  const title = article?.title ?? t('help.article.unavailable');

  return (
    <Page title={title}>
      <div className="mb-4">
        <Button variant="ghost" size="sm" asChild>
          <Link to={basePath}>
            {t('help.article.back')}
          </Link>
        </Button>
      </div>

      {state === 'loading' && (
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="h-4 w-4 animate-spin" />
          {t('common.actions.loading')}
        </div>
      )}

      {state === 'error' && (
        <div className="space-y-3 rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
          <p>{t('help.article.unavailable')}</p>
          <Button variant="secondary" size="sm" onClick={loadArticle}>
            {t('help.article.reload')}
          </Button>
        </div>
      )}

      {state === 'ready' && article && (
        <article className="space-y-6">
          <div className="space-y-2 text-sm text-muted-foreground">
            {article.updated_at && (
              <div>{t('help.article.updated', { date: formatDate(article.updated_at, locale) })}</div>
            )}
            <Button variant="ghost" size="sm" asChild>
              <Link to={basePath}>
                ← {t('help.article.back')}
              </Link>
            </Button>
          </div>
          <div className="overflow-x-auto">
            <div
              className="prose prose-sm max-w-none dark:prose-invert [&_table]:w-full [&_table]:text-sm [&_:where(p,ul,ol,li)]:text-foreground [&_:where(h1,h2,h3,h4,h5,h6)]:text-foreground"
              dangerouslySetInnerHTML={{ __html: article.body_html ?? article.body_markdown ?? '' }}
            />
          </div>
          {article.related && article.related.length > 0 && (
            <section className="space-y-3">
              <h3 className="text-base font-semibold text-foreground">{t('help.article.relatedTitle')}</h3>
              <div className="flex flex-wrap gap-2">
                {article.related.map((rel) => (
                  <Button
                    key={rel.slug}
                    variant="outline"
                    size="sm"
                    asChild
                  >
                    <Link to={`${basePath}/${encodeURIComponent(rel.slug)}`}>
                      {rel.title ?? rel.slug}
                    </Link>
                  </Button>
                ))}
              </div>
            </section>
          )}
        </article>
      )}
    </Page>
  );
}

function formatDate(value: string, locale: string): string {
  try {
    return new Date(value).toLocaleDateString(locale, {
      day: '2-digit',
      month: 'short',
      year: 'numeric',
    });
  } catch {
    return value;
  }
}
