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 { TimezoneCombobox } from '@/components/shared/timezone-combobox';
import { ImageCropperDialog } from '@/components/shared/image-cropper-dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { apiFetch, resolvePortIdFromSlug } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';

export type SettingFieldType =
  | 'string'
  | 'password'
  | 'number'
  | 'boolean'
  | 'textarea'
  | 'html'
  | 'select'
  | 'color'
  | 'timezone'
  | 'image-upload';

export interface SettingFieldDef {
  key: string;
  label: string;
  description?: string;
  type: SettingFieldType;
  placeholder?: string;
  defaultValue: unknown;
  options?: Array<{ value: string; label: string }>;
  /** For 'image-upload' fields: aspect ratio for the cropper (default 1).
   *  For 'html' fields: when set, renders an "Insert default" button that
   *  pastes this text into the textarea — used for email-template defaults
   *  so admins can see the baseline before editing. */
  defaultTemplate?: string;
  /** For 'image-upload' fields: cropper aspect ratio. */
  imageAspect?: number;
  /** For 'image-upload' fields: output format. Default 'jpeg' (smaller
   *  files, good for photos / backgrounds). Use 'png' for logos with
   *  transparency — JPEG has no alpha channel, so transparent pixels
   *  composite against black on export. */
  imageFormat?: 'jpeg' | 'png';
}

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. Update inside an effect — writing to ref
  // .current during render trips the React Compiler purity rules.
  const fieldsRef = useRef(fields);
  useEffect(() => {
    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(() => {
    // Initial load — fetchValues internally setStates loading + values.
    // eslint-disable-next-line react-hooks/set-state-in-effect
    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) {
      toastError(err);
    } 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" aria-hidden />
            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" aria-hidden />}
            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">
          <div className="flex items-center justify-between">
            <Label htmlFor={id}>{field.label}</Label>
            {field.defaultTemplate && (
              <Button
                type="button"
                size="sm"
                variant="ghost"
                className="h-7 text-xs"
                onClick={() => onChange(field.defaultTemplate)}
              >
                Insert default
              </Button>
            )}
          </div>
          {field.description && (
            <p className="text-xs text-muted-foreground">{field.description}</p>
          )}
          <Textarea
            id={id}
            rows={field.type === 'html' ? 8 : 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 'image-upload':
      return (
        <ImageUploadField
          id={id}
          field={field}
          value={typeof value === 'string' ? value : ''}
          onChange={onChange}
        />
      );

    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 'timezone':
      return (
        <div className="space-y-1">
          <Label htmlFor={id}>{field.label}</Label>
          {field.description && (
            <p className="text-xs text-muted-foreground">{field.description}</p>
          )}
          <TimezoneCombobox
            value={typeof value === 'string' ? value : null}
            onChange={(tz) => onChange(tz)}
          />
        </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>
      );
  }
}

/**
 * Image-upload sub-form: shows current image preview, lets admin pick
 * a file, opens the cropper, and on success replaces the setting value
 * with the resulting public URL. Used for branding logos.
 */
function ImageUploadField({
  id,
  field,
  value,
  onChange,
}: {
  id: string;
  field: SettingFieldDef;
  value: string;
  onChange: (next: unknown) => void;
}) {
  const [pendingFile, setPendingFile] = useState<File | null>(null);
  const [open, setOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  function handlePicked(e: React.ChangeEvent<HTMLInputElement>) {
    const f = e.target.files?.[0] ?? null;
    if (!f) return;
    setPendingFile(f);
    setOpen(true);
    if (inputRef.current) inputRef.current.value = '';
  }

  async function uploadCropped(blob: Blob) {
    const fd = new FormData();
    // Trust the blob's own MIME — the cropper auto-picks PNG when the
    // source had alpha, JPEG otherwise. Hardcoding to JPEG here threw
    // away the alpha channel on transparent logos.
    const mime = blob.type || 'image/jpeg';
    const ext = mime === 'image/png' ? 'png' : 'jpg';
    fd.append('file', new File([blob], `image.${ext}`, { type: mime }));
    // Raw fetch (not apiFetch — FormData body) → manually attach the
    // X-Port-Id header that the admin settings route requires.
    const headers = new Headers();
    if (typeof window !== 'undefined') {
      const slug = window.location.pathname.split('/').filter(Boolean)[0];
      if (slug && slug !== 'login' && slug !== 'portal' && slug !== 'api' && slug !== 'dashboard') {
        const portId = await resolvePortIdFromSlug(slug);
        if (portId) headers.set('X-Port-Id', portId);
      }
    }
    const res = await fetch('/api/v1/admin/settings/image', {
      method: 'POST',
      headers,
      body: fd,
    });
    if (!res.ok) {
      const err = (await res.json().catch(() => ({}))) as { error?: { message?: string } };
      throw new Error(err.error?.message ?? 'Image upload failed');
    }
    const json = (await res.json()) as { data: { url: string } };
    onChange(json.data.url);
  }

  return (
    <div className="space-y-2">
      <Label htmlFor={id}>{field.label}</Label>
      {field.description && <p className="text-xs text-muted-foreground">{field.description}</p>}
      <div className="flex items-start gap-3">
        <div className="h-20 w-20 shrink-0 rounded-md border bg-muted/30 flex items-center justify-center overflow-hidden">
          {}
          {value ? (
            <img
              src={value}
              // M-U11: describe the preview so screen readers don't say
              // "image" with no context. Falls back to a generic label
              // when no field.label is set.
              alt={`${field.label || 'Settings'} preview`}
              className="h-full w-full object-contain"
            />
          ) : (
            <span className="text-[10px] text-muted-foreground">No image</span>
          )}
        </div>
        <div className="flex-1 space-y-2">
          <div className="flex flex-wrap items-center gap-2">
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => inputRef.current?.click()}
            >
              {value ? 'Replace image' : 'Upload image'}
            </Button>
            {value && (
              <Button type="button" variant="ghost" size="sm" onClick={() => onChange('')}>
                Remove
              </Button>
            )}
          </div>
          <Input
            id={id}
            value={value}
            onChange={(e) => onChange(e.target.value)}
            placeholder="https://example.com/logo.png"
            className="text-xs"
          />
          <p className="text-[11px] text-muted-foreground">
            Upload to use the platform&apos;s storage backend, or paste an external URL.
          </p>
        </div>
      </div>
      <input
        ref={inputRef}
        type="file"
        accept="image/jpeg,image/png,image/webp"
        onChange={handlePicked}
        className="hidden"
      />
      <ImageCropperDialog
        open={open}
        onOpenChange={setOpen}
        file={pendingFile}
        aspect={field.imageAspect ?? 1}
        outputWidth={field.imageAspect && field.imageAspect > 1 ? 1024 : 512}
        outputFormat={field.imageFormat ?? 'auto'}
        title={`Crop ${field.label.toLowerCase()}`}
        onUpload={uploadCropped}
      />
    </div>
  );
}