'use client';

import { useT } from '@/lib/i18n/react';
import { PlatformSettingsEditor } from '@/features/admin/PlatformSettingsEditor';
import { HydratedIsland } from '@/components/HydratedIsland';
import { EmptyState } from '@/components/ui/feedback/EmptyState';

type ConfigRow = { key: string; value: string };

interface Props {
  initialSettings: Record<string, string>;
}

/**
 * Platform settings React island.
 * Accepts initialSettings from SSR and renders grouped editable rows.
 * Uses the existing PlatformSettingsEditor primitive.
 */
function PlatformSettingsInner({ initialSettings }: Props) {
  const t = useT('admin_platform');

  const itemRows: ConfigRow[] = Object.entries(initialSettings)
    .filter(([key]) => key.startsWith('item.'))
    .map(([key, value]) => ({ key, value }));

  const settlementRows: ConfigRow[] = Object.entries(initialSettings)
    .filter(([key]) => key.startsWith('settlement.'))
    .map(([key, value]) => ({ key, value }));

  const deliveryRows: ConfigRow[] = Object.entries(initialSettings)
    .filter(([key]) => key.startsWith('delivery.'))
    .map(([key, value]) => ({ key, value }));

  const otherRows: ConfigRow[] = Object.entries(initialSettings)
    .filter(
      ([key]) =>
        !key.startsWith('item.') && !key.startsWith('settlement.') && !key.startsWith('delivery.'),
    )
    .map(([key, value]) => ({ key, value }));

  return (
    <div className="space-y-8">
      {itemRows.length > 0 && (
        <section aria-labelledby="ps-item-heading">
          <h2 id="ps-item-heading" className="mb-3 text-lg font-semibold">
            {t('section_item')}
          </h2>
          <PlatformSettingsEditor rows={itemRows} section={t('section_item')} />
        </section>
      )}
      {settlementRows.length > 0 && (
        <section aria-labelledby="ps-settlement-heading">
          <h2 id="ps-settlement-heading" className="mb-3 text-lg font-semibold">
            {t('section_settlement')}
          </h2>
          <PlatformSettingsEditor rows={settlementRows} section={t('section_settlement')} />
        </section>
      )}
      {deliveryRows.length > 0 && (
        <section aria-labelledby="ps-delivery-heading">
          <h2 id="ps-delivery-heading" className="mb-3 text-lg font-semibold">
            {t('section_delivery')}
          </h2>
          <PlatformSettingsEditor rows={deliveryRows} section={t('section_delivery')} />
        </section>
      )}
      {otherRows.length > 0 && (
        <section aria-labelledby="ps-other-heading">
          <h2 id="ps-other-heading" className="mb-3 text-lg font-semibold">
            {t('section_other')}
          </h2>
          <PlatformSettingsEditor rows={otherRows} section={t('section_other')} />
        </section>
      )}
      {Object.keys(initialSettings).length === 0 && (
        <EmptyState title={t('no_keys')} description={t('no_keys_hint')} />
      )}
    </div>
  );
}

export function PlatformSettings({ initialSettings }: Props) {
  return (
    <HydratedIsland>
      <PlatformSettingsInner initialSettings={initialSettings} />
    </HydratedIsland>
  );
}