// @design-system: domain/support/KbArticleEditor

/**
 * KbArticleEditor — create/edit a knowledge base article.
 *
 * @example
 * <KbArticleEditor article={null} onSubmit={handleSubmit} />
 * <KbArticleEditor article={existing} onSubmit={handleUpdate} />
 */

import { useState } from 'react';
import { useT } from '@/lib/i18n/react';
import { FormField } from '@/components/ui/primitives/FormField';
import { Input } from '@/components/ui/primitives/Input';
import { Textarea } from '@/components/ui/primitives/Textarea';
import { Switch } from '@/components/ui/primitives/Switch';
import { Label } from '@/components/ui/primitives/Label';
import { Button } from '@/components/ui/primitives/Button';
import { Spinner } from '@/components/ui/feedback/Spinner';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { Stack } from '@/components/ui/layout/Stack';
import { Row } from '@/components/ui/layout/Row';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/primitives/Select';
import type { KbArticleView, KbArticlePayload } from '@/server/support/types';

export interface KbArticleEditorProps {
  article: KbArticleView | null;
  onSubmit: (payload: KbArticlePayload) => Promise<void>;
  onCancel?: () => void;
}

const CATEGORIES = ['faq', 'policy', 'refund_rules', 'redemption_rules', 'internal'] as const;

export function KbArticleEditor({ article, onSubmit, onCancel }: KbArticleEditorProps) {
  const t = useT('admin');
  const ts = t('support') as unknown as Record<string, string>;
  const tI18n = useT('i18n');

  const [slug, setSlug] = useState(article?.slug ?? '');
  const [locale, setLocale] = useState<'he' | 'en'>((article?.locale as 'he' | 'en') ?? 'he');
  const [category, setCategory] = useState(article?.category ?? 'faq');
  const [title, setTitle] = useState(article?.title ?? '');
  const [bodyMd, setBodyMd] = useState(article?.bodyMd ?? '');
  const [tags, setTags] = useState(article?.tags.join(', ') ?? '');
  const [visibility, setVisibility] = useState<'public' | 'internal'>(
    article?.visibility ?? 'public',
  );
  const [isActive, setIsActive] = useState(article?.isActive ?? true);
  const [preview, setPreview] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: React.SyntheticEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!slug.trim()) {
      setError(ts.kb_error_slug_required ?? 'Slug required');
      return;
    }
    setSaving(true);
    setError(null);
    try {
      await onSubmit({
        slug: slug.trim(),
        locale,
        category,
        title: title.trim(),
        bodyMd: bodyMd.trim(),
        tags: tags
          .split(',')
          .map((t) => t.trim())
          .filter(Boolean),
        visibility,
        isActive,
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setSaving(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <Stack gap="4">
        {error && <InlineNotice tone="danger" title={error} />}

        <Row gap="3" className="flex-col sm:flex-row">
          <FormField label={ts.kb_field_slug ?? 'Slug'} className="flex-1">
            <Input
              value={slug}
              onChange={(e) => setSlug(e.target.value)}
              dir="ltr"
              placeholder="my-article-slug"
              required
            />
          </FormField>

          <FormField label={ts.kb_field_locale ?? 'Locale'} className="w-32">
            <Select value={locale} onValueChange={(v) => setLocale(v as 'he' | 'en')}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="he">{tI18n('hebrew')}</SelectItem>
                <SelectItem value="en">{tI18n('english')}</SelectItem>
              </SelectContent>
            </Select>
          </FormField>

          <FormField label={ts.kb_field_category ?? 'Category'} className="w-44">
            <Select value={category} onValueChange={setCategory}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {CATEGORIES.map((c) => (
                  <SelectItem key={c} value={c}>
                    {c}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </FormField>
        </Row>

        <FormField label={ts.kb_field_title ?? 'Title'}>
          <Input value={title} onChange={(e) => setTitle(e.target.value)} required />
        </FormField>

        <FormField label={ts.kb_field_body ?? 'Body (Markdown)'}>
          <Row gap="2" align="center" className="mb-2">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => setPreview(false)}
              aria-pressed={!preview}
            >
              {ts.kb_edit ?? 'Edit'}
            </Button>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => setPreview(true)}
              aria-pressed={preview}
            >
              {ts.kb_preview ?? 'Preview'}
            </Button>
          </Row>
          {preview ? (
            <div
              className="border-border-default bg-surface-base min-h-32 rounded-md border px-3 py-2 text-sm"
              aria-label={ts.kb_preview}
            >
              <pre className="font-sans whitespace-pre-wrap">{bodyMd}</pre>
            </div>
          ) : (
            <Textarea
              value={bodyMd}
              onChange={(e) => setBodyMd(e.target.value)}
              dir="ltr"
              rows={12}
              className="font-mono text-xs"
              required
            />
          )}
        </FormField>

        <FormField label={ts.kb_field_tags ?? 'Tags'}>
          <Input
            value={tags}
            onChange={(e) => setTags(e.target.value)}
            placeholder="tag1, tag2, tag3"
            dir="ltr"
          />
        </FormField>

        <Row gap="6" align="center">
          <div className="flex items-center gap-2">
            <Switch
              id="kb-visibility"
              checked={visibility === 'internal'}
              onCheckedChange={(v) => setVisibility(v ? 'internal' : 'public')}
            />
            <Label htmlFor="kb-visibility" className="text-sm">
              {ts.kb_field_visibility ?? 'Visibility'}: {visibility}
            </Label>
          </div>

          <div className="flex items-center gap-2">
            <Switch id="kb-active" checked={isActive} onCheckedChange={setIsActive} />
            <Label htmlFor="kb-active" className="text-sm">
              {ts.kb_field_is_active ?? 'Active'}
            </Label>
          </div>
        </Row>

        <Row gap="3" justify="end">
          {onCancel && (
            <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
              {ts.kb_cancel ?? 'Cancel'}
            </Button>
          )}
          <Button type="submit" variant="primary" size="sm" disabled={saving}>
            {saving ? <Spinner size="sm" /> : (ts.kb_save ?? 'Save')}
          </Button>
        </Row>
      </Stack>
    </form>
  );
}