'use client';

import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Button } from '@/components/ui/primitives/Button';
import { Input } from '@/components/ui/primitives/Input';
import { NumberInput } from '@/components/ui/primitives/NumberInput';
import { AdminMoneyInput } from '@/components/ui/admin/AdminMoneyInput';
import { LabelWithTooltip } from '@/components/ui/primitives/LabelWithTooltip';
import { useT, useLocale } from '@/lib/i18n/react';
import { getCsrfToken } from '@/lib/csrf';
import { captureCaught } from '@/lib/observability';
import { he } from '@/lib/i18n/he';
import { en } from '@/lib/i18n/en';

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

interface Props {
  rows: ConfigRow[];
  section: string;
}

function isAgorotKey(key: string): boolean {
  return key.endsWith('_agorot');
}

function isPctKey(key: string): boolean {
  return key.endsWith('_pct');
}

function isNumericKey(key: string): boolean {
  return /_(days|grams|qty|ttl)/.test(key) || key.endsWith('_business_days');
}

function SettingRow({ configKey, initialValue }: { configKey: string; initialValue: string }) {
  const t = useT('admin_platform');
  const { locale } = useLocale();
  const keyLabelMap =
    locale === 'en' ? en.admin_platform.key_label_map : he.admin_platform.key_label_map;
  const keyTooltipMap =
    locale === 'en' ? en.admin_platform.key_tooltip_map : he.admin_platform.key_tooltip_map;
  const humanLabel = (keyLabelMap as Record<string, string>)[configKey] ?? configKey;
  const humanTooltip = (keyTooltipMap as Record<string, string>)[configKey];
  const qc = useQueryClient();
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(initialValue);
  const [draftAgorot, setDraftAgorot] = useState(() =>
    isAgorotKey(configKey) ? parseInt(initialValue, 10) || 0 : 0,
  );
  const [saved, setSaved] = useState(false);

  const mutation = useMutation({
    mutationFn: async (value: string) => {
      const res = await fetch(`/api/admin/platform-settings/${encodeURIComponent(configKey)}`, {
        method: 'PUT',
        headers: {
          'content-type': 'application/json',
          'x-csrf-token': getCsrfToken(),
        },
        body: JSON.stringify({ value }),
      });
      if (!res.ok) throw new Error(`${res.status}`);
      return res.json();
    },
    onSuccess: () => {
      setSaved(true);
      setEditing(false);
      void qc.invalidateQueries({ queryKey: ['admin-platform-settings'] });
      setTimeout(() => setSaved(false), 2000);
    },
    onError: (err) => {
      captureCaught(err, { scope: 'admin.platform-settings.save', severity: 'error' });
    },
  });

  function commitDraft() {
    if (isAgorotKey(configKey)) {
      mutation.mutate(String(draftAgorot));
    } else {
      mutation.mutate(draft);
    }
  }

  return (
    <li className="border-border-default flex items-start justify-between gap-4 rounded-md border p-3">
      <div className="min-w-0 shrink">
        {humanTooltip ? (
          <LabelWithTooltip label={humanLabel} tooltip={humanTooltip} />
        ) : (
          <p className="text-text-primary text-sm font-medium">{humanLabel}</p>
        )}
        <code className="text-text-muted font-mono text-xs">{configKey}</code>
      </div>
      {editing ? (
        <div className="ms-auto flex flex-col items-end gap-2">
          {isAgorotKey(configKey) ? (
            <AdminMoneyInput
              name={`edit-${configKey}`}
              label={humanLabel}
              valueAgorot={draftAgorot}
              onChange={setDraftAgorot}
              className="w-48"
            />
          ) : isPctKey(configKey) || isNumericKey(configKey) ? (
            <NumberInput
              id={`edit-${configKey}`}
              min={isPctKey(configKey) ? 0 : undefined}
              max={isPctKey(configKey) ? 100 : undefined}
              value={parseFloat(draft) || 0}
              onChange={(n) => setDraft(String(n))}
              aria-label={humanLabel}
            />
          ) : (
            <Input
              type="text"
              value={draft}
              onChange={(e) => setDraft(e.target.value)}
              className="w-48 min-w-0 font-mono text-sm"
              aria-label={`${t('value_label')}: ${humanLabel}`}
            />
          )}
          <div className="flex items-center gap-2">
            <Button size="sm" variant="primary" onClick={commitDraft} disabled={mutation.isPending}>
              {t('save_label')}
            </Button>
            <Button
              size="sm"
              variant="ghost"
              onClick={() => {
                setDraft(initialValue);
                setDraftAgorot(parseInt(initialValue, 10) || 0);
                setEditing(false);
              }}
            >
              {t('cancel_label')}
            </Button>
          </div>
        </div>
      ) : (
        <div className="ms-auto flex items-center gap-2">
          <span className="text-text-primary text-end font-mono text-sm">
            {saved ? <span className="text-success-600">{t('save_success')}</span> : initialValue}
          </span>
          {mutation.isError && <span className="text-danger-700 text-xs">{t('save_error')}</span>}
          <Button
            size="sm"
            variant="ghost"
            onClick={() => setEditing(true)}
            aria-label={`${t('edit_label')} ${humanLabel}`}
          >
            {t('edit_label')}
          </Button>
        </div>
      )}
    </li>
  );
}

export function PlatformSettingsEditor({ rows, section }: Props) {
  const t = useT('admin_platform');

  if (rows.length === 0) {
    return <p className="text-text-muted text-sm">{t('no_keys')}</p>;
  }

  return (
    <ul className="flex flex-col gap-2" aria-label={section}>
      {rows.map((r) => (
        <SettingRow key={r.key} configKey={r.key} initialValue={r.value} />
      ))}
    </ul>
  );
}