'use client';

/**
 * KbManager — admin KB article list + create/edit view.
 */

import { useState } from 'react';
import { useT, useLocale } from '@/lib/i18n/react';
import { HydratedIsland } from '@/components/HydratedIsland';
import { AdminTable } from '@/components/ui/domain/admin/AdminTable';
import { PageHeader } from '@/components/ui/layout/PageHeader';
import { Button } from '@/components/ui/primitives/Button';
import { Input } from '@/components/ui/primitives/Input';
import { TableSkeleton } from '@/components/ui/feedback/Skeleton';
import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { Row } from '@/components/ui/layout/Row';
import { Stack } from '@/components/ui/layout/Stack';
import { Pill } from '@/components/ui/primitives/Pill';
import { QueryBoundary } from '@platform-modules/ui-primitives';
import { KbArticleEditor } from '@/components/ui/domain/support/KbArticleEditor';
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from '@/components/ui/overlays/AlertDialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/primitives/Select';
import { useKbList, useKbCreate, useKbUpdate, useKbDelete } from './internals/useAdminSupport';
import type { KbArticleView, KbArticlePayload } from '@/server/support/types';
import { formatDate } from '@/lib/format';

function KbManagerSkeleton() {
  return (
    <Stack gap="4">
      <TableSkeleton rows={6} cols={7} />
    </Stack>
  );
}

function KbManagerInner() {
  const t = useT('admin');
  const ts = t('support') as unknown as Record<string, string>;
  const { locale: uiLocale } = useLocale();

  const [locale, setLocale] = useState('__all__');
  const [category, setCategory] = useState('__all__');
  const [search, setSearch] = useState('');
  const [editing, setEditing] = useState<KbArticleView | null | 'new'>(null);
  const [deleteTarget, setDeleteTarget] = useState<KbArticleView | null>(null);

  const q: Record<string, string> = {};
  if (locale && locale !== '__all__') q.locale = locale;
  if (category && category !== '__all__') q.category = category;
  if (search) q.search = search;

  const kbListQuery = useKbList(q);
  const create = useKbCreate();
  const updateHook = useKbUpdate(editing && editing !== 'new' ? editing.id : '');
  const deleteHook = useKbDelete(deleteTarget?.id ?? '');

  async function handleSubmit(payload: KbArticlePayload) {
    if (editing === 'new') {
      await create.mutateAsync(payload as unknown as Record<string, unknown>);
    } else if (editing) {
      await updateHook.mutateAsync(payload as unknown as Record<string, unknown>);
    }
    setEditing(null);
  }

  const hasActiveFilters = locale !== '__all__' || category !== '__all__' || search.length > 0;

  if (editing !== null) {
    const editTitle =
      editing === 'new'
        ? (ts.kb_new_article ?? '')
        : (ts.kb_edit_article ?? '').replace('{slug}', editing.slug);
    return (
      <Stack gap="4">
        <Row gap="3" align="center">
          <Button variant="ghost" size="sm" onClick={() => setEditing(null)}>
            {ts.kb_back_to_list}
          </Button>
          <PageHeader title={editTitle} />
        </Row>
        {deleteTarget && editing !== 'new' && (
          <Button
            variant="ghost"
            size="sm"
            className="text-danger-500 self-end"
            onClick={() => setDeleteTarget(editing as KbArticleView)}
          >
            {ts.kb_delete}
          </Button>
        )}
        <KbArticleEditor
          article={editing === 'new' ? null : editing}
          onSubmit={handleSubmit}
          onCancel={() => setEditing(null)}
        />
      </Stack>
    );
  }

  return (
    <Stack gap="4">
      <Row gap="3" align="center" className="flex-wrap">
        <PageHeader title={ts.kb_title ?? ''} />
        <Button variant="primary" size="sm" onClick={() => setEditing('new')}>
          {ts.kb_new_article}
        </Button>
      </Row>

      <div
        role="toolbar"
        aria-label={ts.kb_filters ?? ts.filter_type ?? 'Filters'}
        className="flex flex-wrap gap-2"
      >
        <Select value={locale} onValueChange={setLocale}>
          <SelectTrigger className="w-28">
            <SelectValue placeholder={ts.kb_all_locales} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="__all__">{ts.kb_all_locales}</SelectItem>
            <SelectItem value="he">{ts.lang_he}</SelectItem>
            <SelectItem value="en">{ts.lang_en}</SelectItem>
          </SelectContent>
        </Select>

        <Select value={category} onValueChange={setCategory}>
          <SelectTrigger className="w-40">
            <SelectValue placeholder={ts.kb_all_categories} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="__all__">{ts.kb_all_categories}</SelectItem>
            <SelectItem value="faq">{ts.kb_category_faq}</SelectItem>
            <SelectItem value="policy">{ts.kb_category_policy}</SelectItem>
            <SelectItem value="refund_rules">{ts.kb_category_refund_rules}</SelectItem>
            <SelectItem value="redemption_rules">{ts.kb_category_redemption_rules}</SelectItem>
            <SelectItem value="internal">{ts.kb_category_internal}</SelectItem>
          </SelectContent>
        </Select>

        <Input
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder={ts.kb_search_placeholder}
          className="w-56"
          dir="auto"
        />
      </div>

      <QueryBoundary
        query={kbListQuery}
        skeleton={<KbManagerSkeleton />}
        errorFallback={() => <InlineNotice tone="danger" title={ts.kb_load_error ?? ''} />}
      >
        {(resolved) => {
          const articles = (resolved.articles as KbArticleView[]) ?? [];
          if (articles.length === 0) {
            return (
              <EmptyState
                title={hasActiveFilters ? (ts.kb_empty_filtered ?? '') : (ts.kb_empty ?? '')}
              />
            );
          }

          return (
            <AdminTable<KbArticleView>
              columns={[
                {
                  key: 'slug',
                  label: ts.kb_col_slug ?? '',
                  render: (r) => (
                    <span
                      className="font-mono text-xs"
                      {...(/^e2e-/i.test(r.slug) ? { 'data-e2e-seed': '' } : {})}
                    >
                      {r.slug}
                    </span>
                  ),
                },
                {
                  key: 'locale',
                  label: ts.kb_col_locale ?? '',
                  render: (r) => ts[`lang_${r.locale}`] ?? r.locale,
                },
                {
                  key: 'category',
                  label: ts.kb_col_category ?? '',
                  render: (r) => ts[`kb_category_${r.category}`] ?? r.category,
                },
                {
                  key: 'visibility',
                  label: ts.kb_col_visibility ?? '',
                  render: (r) => (
                    <Pill tone={r.visibility === 'internal' ? 'warning' : 'success'}>
                      {ts[`visibility_${r.visibility}`] ?? r.visibility}
                    </Pill>
                  ),
                },
                {
                  key: 'isActive',
                  label: ts.kb_col_active ?? '',
                  render: (r) => (
                    <Pill tone={r.isActive ? 'success' : 'neutral'}>
                      {r.isActive
                        ? (ts.kb_status_active ?? 'Active')
                        : (ts.kb_status_inactive ?? 'Inactive')}
                    </Pill>
                  ),
                },
                {
                  key: 'updatedAt',
                  label: ts.kb_col_updated ?? '',
                  render: (r) => formatDate(r.updatedAt, uiLocale),
                },
                {
                  key: 'actions',
                  label: '',
                  render: (r) => (
                    <Row gap="2">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={(e) => {
                          e.preventDefault();
                          setEditing(r);
                        }}
                      >
                        {ts.kb_edit}
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-danger-500"
                        onClick={(e) => {
                          e.preventDefault();
                          setDeleteTarget(r);
                        }}
                      >
                        {ts.kb_delete}
                      </Button>
                    </Row>
                  ),
                },
              ]}
              rows={articles}
              loading={false}
            />
          );
        }}
      </QueryBoundary>

      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <AlertDialogContent>
          <AlertDialogTitle>{ts.kb_confirm_delete_title}</AlertDialogTitle>
          <AlertDialogDescription>
            {(ts.kb_confirm_delete_body ?? '').replace('{slug}', deleteTarget?.slug ?? '')}
          </AlertDialogDescription>
          <AlertDialogCancel>{ts.kb_cancel}</AlertDialogCancel>
          <AlertDialogAction
            onClick={async () => {
              await deleteHook.mutateAsync();
              setDeleteTarget(null);
            }}
          >
            {ts.kb_delete}
          </AlertDialogAction>
        </AlertDialogContent>
      </AlertDialog>
    </Stack>
  );
}

export function KbManager() {
  return (
    <HydratedIsland>
      <KbManagerInner />
    </HydratedIsland>
  );
}