pn-new-crm/src/components/admin/shared/settings-form-card.tsx

'use client';

import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
import { Loader2 } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { apiFetch } from '@/lib/api/client';

export type SettingFieldType =
  | 'string'
  | 'password'
  | 'number'
  | 'boolean'
  | 'textarea'
  | 'html'
  | 'select'
  | 'color';

export interface SettingFieldDef {
  key: string;
  label: string;
  description?: string;
  type: SettingFieldType;
  placeholder?: string;
  defaultValue: unknown;
  options?: Array<{ value: string; label: string }>;
}

interface SettingsRowResponse {
  key: string;
  value: unknown;
  portId: string | null;
}

interface ListResponse {
  data: { portSettings: SettingsRowResponse[]; globalSettings: SettingsRowResponse[] };
}

interface SettingsFormCardProps {
  title: string;
  description?: string;
  fields: SettingFieldDef[];
  /** Optional extra slot rendered below the form (e.g. test-connection button). */
  extra?: ReactNode;
}

/**
 * Reusable card that fetches /api/v1/admin/settings, renders editable form
 * fields for the supplied keys, and PUTs each on save.
 */
export function SettingsFormCard({ title, description, fields, extra }: SettingsFormCardProps) {
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [values, setValues] = useState<Record<string, unknown>>({});
  const [originals, setOriginals] = useState<Record<string, unknown>>({});

  // Parent components often pass `FIELDS.slice(0, 5)` directly, so the prop
  // reference changes on every render. Capture it in a ref so the fetch
  // callback can read the current list without being re-created and looping
  // through useEffect forever.
  const fieldsRef = useRef(fields);
  fieldsRef.current = fields;

  const fetchValues = useCallback(async () => {
    setLoading(true);
    try {
      const res = await apiFetch<ListResponse>('/api/v1/admin/settings');
      const next: Record<string, unknown> = {};
      for (const field of fieldsRef.current) {
        const port = res.data.portSettings.find((s) => s.key === field.key);
        const global = res.data.globalSettings.find((s) => s.key === field.key);
        next[field.key] = port?.value ?? global?.value ?? field.defaultValue;
      }
      setValues(next);
      setOriginals(next);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void fetchValues();
  }, [fetchValues]);

  function setField(key: string, value: unknown) {
    setValues((prev) => ({ ...prev, [key]: value }));
  }

  async function handleSave() {
    setSaving(true);
    try {
      const changedFields = fields.filter((f) => values[f.key] !== originals[f.key]);
      if (changedFields.length === 0) {
        toast.info('No changes to save');
        return;
      }
      for (const f of changedFields) {
        await apiFetch('/api/v1/admin/settings', {
          method: 'PUT',
          body: { key: f.key, value: values[f.key] },
        });
      }
      toast.success(`Saved ${changedFields.length} setting(s)`);
      setOriginals(values);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Save failed');
    } finally {
      setSaving(false);
    }
  }

  if (loading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>{title}</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center text-sm text-muted-foreground">
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Loading…
          </div>
        </CardContent>
      </Card>
    );
  }

  const dirty = fields.some((f) => values[f.key] !== originals[f.key]);

  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        {description && <CardDescription>{description}</CardDescription>}
      </CardHeader>
      <CardContent className="space-y-5">
        {fields.map((field) => (
          <FieldRow
            key={field.key}
            field={field}
            value={values[field.key]}
            onChange={(v) => setField(field.key, v)}
          />
        ))}

        <div className="flex items-center justify-end gap-2 pt-2 border-t">
          {extra}
          <Button onClick={handleSave} disabled={saving || !dirty}>
            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            Save changes
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

function FieldRow({
  field,
  value,
  onChange,
}: {
  field: SettingFieldDef;
  value: unknown;
  onChange: (v: unknown) => void;
}) {
  const id = `setting-${field.key}`;

  switch (field.type) {
    case 'boolean':
      return (
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-0.5">
            <Label htmlFor={id}>{field.label}</Label>
            {field.description && (
              <p className="text-xs text-muted-foreground">{field.description}</p>
            )}
          </div>
          <Switch id={id} checked={!!value} onCheckedChange={(checked) => onChange(checked)} />
        </div>
      );

    case 'textarea':
    case 'html':
      return (
        <div className="space-y-1">
          <Label htmlFor={id}>{field.label}</Label>
          {field.description && (
            <p className="text-xs text-muted-foreground">{field.description}</p>
          )}
          <Textarea
            id={id}
            rows={field.type === 'html' ? 6 : 3}
            value={typeof value === 'string' ? value : ''}
            placeholder={field.placeholder}
            onChange={(e) => onChange(e.target.value)}
            className={field.type === 'html' ? 'font-mono text-xs' : undefined}
          />
        </div>
      );

    case 'select':
      return (
        <div className="space-y-1">
          <Label htmlFor={id}>{field.label}</Label>
          {field.description && (
            <p className="text-xs text-muted-foreground">{field.description}</p>
          )}
          <Select value={typeof value === 'string' ? value : ''} onValueChange={(v) => onChange(v)}>
            <SelectTrigger id={id}>
              <SelectValue placeholder={field.placeholder ?? 'Choose…'} />
            </SelectTrigger>
            <SelectContent>
              {(field.options ?? []).map((o) => (
                <SelectItem key={o.value} value={o.value}>
                  {o.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      );

    case 'number':
      return (
        <div className="space-y-1">
          <Label htmlFor={id}>{field.label}</Label>
          {field.description && (
            <p className="text-xs text-muted-foreground">{field.description}</p>
          )}
          <Input
            id={id}
            type="number"
            value={typeof value === 'number' ? value : ''}
            placeholder={field.placeholder}
            onChange={(e) => {
              const n = e.target.value === '' ? null : Number(e.target.value);
              onChange(n);
            }}
          />
        </div>
      );

    case 'color':
      return (
        <div className="space-y-1">
          <Label htmlFor={id}>{field.label}</Label>
          {field.description && (
            <p className="text-xs text-muted-foreground">{field.description}</p>
          )}
          <div className="flex items-center gap-2">
            <input
              type="color"
              value={typeof value === 'string' ? value : '#000000'}
              onChange={(e) => onChange(e.target.value)}
              className="h-9 w-14 cursor-pointer rounded border"
            />
            <Input
              id={id}
              value={typeof value === 'string' ? value : ''}
              onChange={(e) => onChange(e.target.value)}
              placeholder="#000000"
              className="font-mono"
            />
          </div>
        </div>
      );

    case 'password':
      return (
        <div className="space-y-1">
          <Label htmlFor={id}>{field.label}</Label>
          {field.description && (
            <p className="text-xs text-muted-foreground">{field.description}</p>
          )}
          <Input
            id={id}
            type="password"
            value={typeof value === 'string' ? value : ''}
            placeholder={field.placeholder ?? '(unchanged)'}
            onChange={(e) => onChange(e.target.value)}
          />
        </div>
      );

    case 'string':
    default:
      return (
        <div className="space-y-1">
          <Label htmlFor={id}>{field.label}</Label>
          {field.description && (
            <p className="text-xs text-muted-foreground">{field.description}</p>
          )}
          <Input
            id={id}
            value={typeof value === 'string' ? value : ''}
            placeholder={field.placeholder}
            onChange={(e) => onChange(e.target.value)}
          />
        </div>
      );
  }
}