'use client';

import { useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { WidgetSettingsPanel } from '@/components/settings/widget-settings-panel';
import { fetchDashboards, fetchWidgets } from '@/lib/dashboard-api';

/**
 * Settings > Dashboard > Widgets page (D-03).
 * Fetches the widget instances of the user's FIRST dashboard tab (the
 * standard tab, quick-260923-ad9) and renders per-instance config forms.
 *
 * quick-260923-ad9 (Task 3, deviation Rule 3 — blocking compile issue):
 * `fetchWidgets` now requires a `dashboardId` since widgets are scoped per
 * tab. This page is not itself tab-aware (out of this plan's scope — see
 * "Nicht im Umfang") and previously showed every widget the user had, back
 * when there was exactly one dashboard per user; it now shows the first
 * tab's widgets, which is the same set for the (overwhelmingly common)
 * case of a user who has not yet created a second tab.
 */
export default function WidgetSettingsPage() {
  const t = useTranslations('settings');
  const tCommon = useTranslations('common');
  const [widgets, setWidgets] = useState<
    Array<{ id: string; widgetType: string; config: Record<string, unknown> }>
  >([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    (async () => {
      try {
        const dashboards = await fetchDashboards();
        const first = dashboards[0];
        setWidgets(first ? await fetchWidgets(first.id) : []);
      } catch {
        // Silent fail — empty widget list shown
      } finally {
        setIsLoading(false);
      }
    })();
  }, []);

  return (
    <div>
      <h1 className="mb-6 text-lg font-semibold text-foreground">
        {t('categoryWidgets')}
      </h1>

      {isLoading ? (
        <p className="text-sm text-muted-foreground">{tCommon('loading')}</p>
      ) : widgets.length === 0 ? (
        <p className="text-sm text-muted-foreground">
          {t('widgets.empty')}
        </p>
      ) : (
        <WidgetSettingsPanel
          widgets={widgets}
          onWidgetUpdate={(id, config) => {
            setWidgets((prev) =>
              prev.map((w) =>
                w.id === id ? { ...w, config: { ...w.config, ...config } } : w,
              ),
            );
          }}
        />
      )}
    </div>
  );
}