'use client';

/**
 * SupportSettings — admin form for global system_config support keys.
 */

import { useState, useMemo } from 'react';
import { useT } from '@/lib/i18n/react';
import { HydratedIsland } from '@/components/HydratedIsland';
import { PageHeader } from '@/components/ui/layout/PageHeader';
import { FormField } from '@/components/ui/primitives/FormField';
import { Input } from '@/components/ui/primitives/Input';
import { NumberInput } from '@/components/ui/primitives/NumberInput';
import { Button } from '@/components/ui/primitives/Button';
import { captureCaught } from '@/lib/observability';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { PageShellSkeleton } from '@/components/ui/feedback/Skeleton';
import { Stack } from '@/components/ui/layout/Stack';
import { Row } from '@/components/ui/layout/Row';
import { QueryBoundary } from '@platform-modules/ui-primitives';
import { useSettings, useSaveSettings } from './internals/useAdminSupport';

interface SettingsDraft {
  support_vendor_window_hours: string;
  support_autoclose_days: string;
  support_notification_emails: string;
  support_media_max_images: string;
  support_media_max_mb: string;
  support_return_window_days: string;
  support_reopen_limit: string;
}

function SupportSettingsInner() {
  const t = useT('admin');
  const ts = t('support') as unknown as Record<string, string>;

  const settingsQuery = useSettings();
  const save = useSaveSettings();

  const loadedDraft = useMemo<SettingsDraft | null>(() => {
    if (!settingsQuery.data?.settings) return null;
    const s = settingsQuery.data.settings as Record<string, unknown>;
    return {
      support_vendor_window_hours: String(s.support_vendor_window_hours ?? 48),
      support_autoclose_days: String(s.support_autoclose_days ?? 14),
      support_notification_emails: (() => {
        const v = s.support_notification_emails;
        if (Array.isArray(v)) return (v as string[]).join(', ');
        const str = String(v ?? '');
        try {
          const parsed = JSON.parse(str);
          if (Array.isArray(parsed)) return (parsed as string[]).join(', ');
        } catch (err) {
          captureCaught(err, {
            scope: 'SupportSettings.parseNotificationEmails',
            severity: 'warning',
          });
        }
        return str;
      })(),
      support_media_max_images: String(s.support_media_max_images ?? 5),
      support_media_max_mb: String(s.support_media_max_mb ?? 10),
      support_return_window_days: String(s.support_return_window_days ?? 14),
      support_reopen_limit: String(s.support_reopen_limit ?? 1),
    };
  }, [settingsQuery.data]);

  const [overrides, setOverrides] = useState<Partial<SettingsDraft>>({});
  const [saved, setSaved] = useState(false);
  const [saveError, setSaveError] = useState<string | null>(null);

  const draft = loadedDraft ? { ...loadedDraft, ...overrides } : null;

  function setField(key: keyof SettingsDraft, value: string) {
    setOverrides((o) => ({ ...o, [key]: value }));
    setSaved(false);
  }

  async function handleSave(e: React.SyntheticEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!draft) return;
    setSaveError(null);
    try {
      const payload: Record<string, unknown> = {
        support_vendor_window_hours: Number(draft.support_vendor_window_hours),
        support_autoclose_days: Number(draft.support_autoclose_days),
        support_notification_emails: draft.support_notification_emails
          .split(',')
          .map((e) => e.trim())
          .filter(Boolean),
        support_media_max_images: Number(draft.support_media_max_images),
        support_media_max_mb: Number(draft.support_media_max_mb),
        support_return_window_days: Number(draft.support_return_window_days),
        support_reopen_limit: Number(draft.support_reopen_limit),
      };
      // Remove undefined (optional fields not changed)
      for (const k of Object.keys(payload)) {
        if (payload[k] === undefined) delete payload[k];
      }
      await save.mutateAsync(payload);
      setSaved(true);
    } catch (err) {
      setSaveError(err instanceof Error ? err.message : String(err));
    }
  }

  return (
    <QueryBoundary
      query={settingsQuery}
      skeleton={<PageShellSkeleton />}
      errorFallback={() => <InlineNotice tone="danger" title={String(settingsQuery.error ?? '')} />}
    >
      {() =>
        draft ? (
          <form onSubmit={handleSave} noValidate>
            <Stack gap="6">
              <PageHeader title={ts.settings_title ?? ''} />
              {saved && <InlineNotice tone="success" title={ts.settings_saved ?? ''} />}
              {saveError && <InlineNotice tone="danger" title={saveError} />}

              <section className="bg-surface-default rounded-2xl p-4 shadow-md">
                <h3 className="text-text-primary mb-3 text-sm font-semibold">
                  {ts.settings_section_sla}
                </h3>
                <Stack gap="3">
                  <FormField
                    label={ts.settings_vendor_window_hours ?? ''}
                    htmlFor="ss-vendor-window-hours"
                  >
                    <NumberInput
                      id="ss-vendor-window-hours"
                      value={parseFloat(draft.support_vendor_window_hours) || 0}
                      onChange={(n) => setField('support_vendor_window_hours', String(n))}
                      min={1}
                      max={720}
                    />
                  </FormField>
                  <FormField label={ts.settings_autoclose_days ?? ''} htmlFor="ss-autoclose-days">
                    <NumberInput
                      id="ss-autoclose-days"
                      value={parseFloat(draft.support_autoclose_days) || 0}
                      onChange={(n) => setField('support_autoclose_days', String(n))}
                      min={1}
                      max={90}
                    />
                  </FormField>
                  <FormField
                    label={ts.settings_return_window_days ?? ''}
                    htmlFor="ss-return-window-days"
                  >
                    <NumberInput
                      id="ss-return-window-days"
                      value={parseFloat(draft.support_return_window_days) || 0}
                      onChange={(n) => setField('support_return_window_days', String(n))}
                      min={1}
                      max={365}
                    />
                  </FormField>
                  <FormField label={ts.settings_reopen_limit ?? ''} htmlFor="ss-reopen-limit">
                    <NumberInput
                      id="ss-reopen-limit"
                      value={parseFloat(draft.support_reopen_limit) || 0}
                      onChange={(n) => setField('support_reopen_limit', String(n))}
                      min={0}
                      max={10}
                    />
                  </FormField>
                </Stack>
              </section>

              <section className="bg-surface-default rounded-2xl p-4 shadow-md">
                <h3 className="text-text-primary mb-3 text-sm font-semibold">
                  {ts.settings_section_media}
                </h3>
                <Stack gap="3">
                  <FormField
                    label={ts.settings_media_max_images ?? ''}
                    htmlFor="ss-media-max-images"
                  >
                    <NumberInput
                      id="ss-media-max-images"
                      value={parseFloat(draft.support_media_max_images) || 0}
                      onChange={(n) => setField('support_media_max_images', String(n))}
                      min={1}
                      max={50}
                    />
                  </FormField>
                  <FormField label={ts.settings_media_max_mb ?? ''} htmlFor="ss-media-max-mb">
                    <NumberInput
                      id="ss-media-max-mb"
                      value={parseFloat(draft.support_media_max_mb) || 0}
                      onChange={(n) => setField('support_media_max_mb', String(n))}
                      min={1}
                      max={50}
                    />
                  </FormField>
                </Stack>
              </section>

              <section className="bg-surface-default rounded-2xl p-4 shadow-md">
                <h3 className="text-text-primary mb-3 text-sm font-semibold">
                  {ts.settings_section_notifications}
                </h3>
                <Stack gap="3">
                  <FormField label={ts.settings_notification_emails ?? ''}>
                    <Input
                      dir="ltr"
                      value={draft.support_notification_emails}
                      onChange={(e) => setField('support_notification_emails', e.target.value)}
                      placeholder="admin@example.com, ops@example.com"
                    />
                  </FormField>
                </Stack>
              </section>

              <Row justify="end">
                <Button type="submit" variant="primary" size="sm" disabled={save.isPending}>
                  {save.isPending ? (ts.settings_saved ?? ts.settings_save) : ts.settings_save}
                </Button>
              </Row>
            </Stack>
          </form>
        ) : null
      }
    </QueryBoundary>
  );
}

export function SupportSettings() {
  return (
    <HydratedIsland>
      <SupportSettingsInner />
    </HydratedIsland>
  );
}