// TODO: P2-T21 — Replace hardcoded ENTITY_OPTIONS with backend config
/**
 * Custom Fields Settings page.
 * Manage custom field definitions per entity (contact/company).
 */

import { asError } from '@/utils/errorTypes';
import React, { useState, useMemo, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Card } from '@/components/ui/Card';
import { Input } from '@/components/ui/Input';
import { Button } from '@/components/ui/Button';
import { Select } from '@/components/ui/Select';
import { Badge } from '@/components/ui/Badge';
import { Modal } from '@/components/ui/Modal';
import { Table, TableColumn } from '@/components/ui/Table';
import { useToast } from '@/components/ui/Toast';
import { Plus, Pencil, Trash2 } from 'lucide-react';
import {
  CustomFieldDefinition,
  CustomFieldDefinitionCreate,
  CustomFieldDefinitionUpdate,
  CustomFieldType,
  CustomFieldEntity,
  useCustomFieldDefinitions,
  useCreateCustomFieldDefinition,
  useUpdateCustomFieldDefinition,
  useDeleteCustomFieldDefinition,
} from '@/api/customFieldDefinitions';

// --- Helpers ---

const FIELD_TYPE_OPTIONS = [
  { value: 'text', label: 'Text' },
  { value: 'number', label: 'Zahl' },
  { value: 'date', label: 'Datum' },
  { value: 'select', label: 'Auswahl (einfach)' },
  { value: 'multiselect', label: 'Auswahl (mehrfach)' },
  { value: 'boolean', label: 'Checkbox (Ja/Nein)' },
];

const ENTITY_OPTIONS = [
  { value: 'contact', label: 'Kontakt' },
  { value: 'company', label: 'Firma' },
];

const FIELD_TYPE_LABELS: Record<string, string> = {
  text: 'Text',
  number: 'Zahl',
  date: 'Datum',
  select: 'Auswahl',
  multiselect: 'Mehrfachauswahl',
  boolean: 'Checkbox',
};

function slugifyLabel(label: string): string {
  return label
    .toLowerCase()
    .trim()
    .replace(/ä/g, 'ae')
    .replace(/ö/g, 'oe')
    .replace(/ü/g, 'ue')
    .replace(/ß/g, 'ss')
    .replace(/[^a-z0-9]+/g, '_')
    .replace(/^_+|_+$/g, '');
}

function parseOptionsString(optionsStr: string): string[] {
  return optionsStr
    .split(',')
    .map((o) => o.trim())
    .filter((o) => o.length > 0);
}

function optionsToString(options: string[] | undefined): string {
  return (options || []).join(', ');
}

// --- Form state interface ---

interface FormState {
  label: string;
  name: string;
  nameTouched: boolean;
  field_type: CustomFieldType;
  optionsStr: string;
  required: boolean;
  default_value: string;
  is_active: boolean;
}

function emptyForm(): FormState {
  return {
    label: '',
    name: '',
    nameTouched: false,
    field_type: 'text',
    optionsStr: '',
    required: false,
    default_value: '',
    is_active: true,
  };
}

function formFromDefinition(def: CustomFieldDefinition): FormState {
  return {
    label: def.label,
    name: def.name,
    nameTouched: true,
    field_type: def.field_type,
    optionsStr: optionsToString(def.options),
    required: def.required,
    default_value: def.default_value != null ? String(def.default_value) : '',
    is_active: def.is_active,
  };
}

// --- Page component ---

export function CustomFieldsPage() {
  const { t } = useTranslation();
  const toast = useToast();

  const [entity, setEntity] = useState<CustomFieldEntity>('contact');
  const [showModal, setShowModal] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [form, setForm] = useState<FormState>(emptyForm());
  const [deleteTarget, setDeleteTarget] = useState<CustomFieldDefinition | null>(null);
  const [formError, setFormError] = useState<string | null>(null);

  const { data, isLoading } = useCustomFieldDefinitions(entity);
  const createMutation = useCreateCustomFieldDefinition();
  const updateMutation = useUpdateCustomFieldDefinition();
  const deleteMutation = useDeleteCustomFieldDefinition();

  const definitions = useMemo(() => data?.items ?? [], [data]);

  // Auto-generate name from label when name hasn't been manually edited
  useEffect(() => {
    if (!form.nameTouched && form.label) {
      setForm((prev) => ({ ...prev, name: slugifyLabel(prev.label) }));
    }
  }, [form.label, form.nameTouched]);

  const openCreate = () => {
    setForm(emptyForm());
    setEditingId(null);
    setFormError(null);
    setShowModal(true);
  };

  const openEdit = (def: CustomFieldDefinition) => {
    setForm(formFromDefinition(def));
    setEditingId(def.id);
    setFormError(null);
    setShowModal(true);
  };

  const closeFormModal = () => {
    setShowModal(false);
    setEditingId(null);
    setFormError(null);
  };

  const handleNameChange = (val: string) => {
    setForm((prev) => ({ ...prev, name: val, nameTouched: true }));
  };

  const handleLabelChange = (val: string) => {
    setForm((prev) => ({ ...prev, label: val }));
  };

  const handleFieldTypeChange = (val: string) => {
    setForm((prev) => ({
      ...prev,
      field_type: val as CustomFieldType,
      // Reset default_value and options when switching away from select/multiselect
      default_value: val === 'boolean' ? '' : prev.default_value,
    }));
  };

  const handleSave = async () => {
    setFormError(null);

    if (!form.label.trim()) {
      setFormError('Bitte ein Label eingeben');
      return;
    }
    if (!form.name.trim()) {
      setFormError('Bitte einen Feldnamen eingeben');
      return;
    }

    const needsOptions = form.field_type === 'select' || form.field_type === 'multiselect';
    const parsedOptions = needsOptions ? parseOptionsString(form.optionsStr) : [];
    if (needsOptions && parsedOptions.length === 0) {
      setFormError('Bitte mindestens eine Option eingeben (kommagetrennt)');
      return;
    }

    // Convert default_value based on field_type
    let defaultValue: any = form.default_value;
    if (form.field_type === 'number') {
      defaultValue = form.default_value === '' ? null : Number(form.default_value);
    } else if (form.field_type === 'boolean') {
      defaultValue = form.default_value === 'true' || form.default_value === '1';
    } else if (form.default_value === '') {
      defaultValue = null;
    }

    const isEditing = !!editingId;

    if (isEditing) {
      const updateData: CustomFieldDefinitionUpdate = {
        name: form.name.trim(),
        label: form.label.trim(),
        field_type: form.field_type,
        options: needsOptions ? parsedOptions : [],
        default_value: defaultValue,
        required: form.required,
        is_active: form.is_active,
      };
      try {
        await updateMutation.mutateAsync({ id: editingId!, data: updateData });
        toast.success(t('customFields.updated', 'Feld aktualisiert'));
        closeFormModal();
      } catch (err: unknown) { const errObj = asError(err);
        setFormError(errObj.message || 'Fehler beim Aktualisieren');
      }
    } else {
      const createData: CustomFieldDefinitionCreate = {
        entity,
        name: form.name.trim(),
        label: form.label.trim(),
        field_type: form.field_type,
        options: needsOptions ? parsedOptions : [],
        default_value: defaultValue,
        required: form.required,
        is_active: form.is_active,
      };
      try {
        await createMutation.mutateAsync(createData);
        toast.success(t('customFields.created', 'Feld erstellt'));
        closeFormModal();
      } catch (err: unknown) { const errObj = asError(err);
        setFormError(errObj.message || 'Fehler beim Erstellen');
      }
    }
  };

  const confirmDelete = async () => {
    if (!deleteTarget) return;
    try {
      await deleteMutation.mutateAsync(deleteTarget.id);
      toast.success(t('customFields.deleted', 'Feld gelöscht'));
      setDeleteTarget(null);
    } catch (err: unknown) { const errObj = asError(err);
      toast.error(errObj.message || 'Fehler beim Löschen');
      setDeleteTarget(null);
    }
  };

  const needsOptions = form.field_type === 'select' || form.field_type === 'multiselect';
  const saving = createMutation.isPending || updateMutation.isPending;

  // --- Table columns ---
  const columns: TableColumn<CustomFieldDefinition>[] = [
    {
      key: 'label',
      header: t('customFields.columnLabel', 'Bezeichnung'),
      sortable: true,
      render: (row) => (
        <span className="font-medium text-secondary-900">{row.label}</span>
      ),
    },
    {
      key: 'name',
      header: t('customFields.columnName', 'Feldname'),
      render: (row) => <code className="text-xs text-secondary-600">{row.name}</code>,
    },
    {
      key: 'field_type',
      header: t('customFields.columnType', 'Typ'),
      render: (row) => {
        const variantMap: Record<string, 'primary' | 'info' | 'success' | 'warning' | 'secondary'> = {
          text: 'secondary',
          number: 'info',
          date: 'warning',
          select: 'primary',
          multiselect: 'primary',
          boolean: 'success',
        };
        return (
          <Badge variant={variantMap[row.field_type] || 'secondary'}>
            {FIELD_TYPE_LABELS[row.field_type] || row.field_type}
          </Badge>
        );
      },
    },
    {
      key: 'required',
      header: t('customFields.columnRequired', 'Pflicht'),
      render: (row) =>
        row.required ? (
          <Badge variant="danger">{t('common.required', 'Pflichtfeld')}</Badge>
        ) : (
          <span className="text-secondary-400">—</span>
        ),
    },
    {
      key: 'is_active',
      header: t('customFields.columnStatus', 'Status'),
      render: (row) =>
        row.is_active ? (
          <Badge variant="success" dot>{t('common.active', 'Aktiv')}</Badge>
        ) : (
          <Badge variant="default">{t('common.inactive', 'Inaktiv')}</Badge>
        ),
    },
    {
      key: 'actions',
      header: '',
      render: (row) => (
        <div className="flex gap-2">
          <button
            onClick={() => openEdit(row)}
            className="p-1 rounded hover:bg-secondary-100"
            aria-label={t('common.edit', 'Bearbeiten')}
          >
            <Pencil className="w-4 h-4" />
          </button>
          <button
            onClick={() => setDeleteTarget(row)}
            className="p-1 rounded hover:bg-danger-50 text-danger-600"
            aria-label={t('common.delete', 'Löschen')}
          >
            <Trash2 className="w-4 h-4" />
          </button>
        </div>
      ),
    },
  ];

  // --- Render ---
  return (
    <div className="space-y-4">
      {/* Header with entity selector */}
      <Card
        title={t('customFields.title', 'Custom Fields')}
        description={t('customFields.description', 'Verwalten Sie benutzerdefinierte Felder für Kontakte und Firmen')}
        actions={
          <Button size="sm" onClick={openCreate}>
            <Plus className="w-4 h-4 mr-1" />
            {t('customFields.addNew', 'Neues Feld')}
          </Button>
        }
      >
        <div className="mb-4">
          <Select
            label={t('customFields.entity', 'Entität')}
            options={ENTITY_OPTIONS}
            value={entity}
            onChange={(e) => setEntity(e.target.value as CustomFieldEntity)}
            className="max-w-xs"
          />
        </div>

        <Table
          columns={columns}
          data={definitions}
          rowKey={(row) => row.id}
          loading={isLoading}
          emptyMessage={t('customFields.empty', 'Noch keine Felder definiert')}
        />
      </Card>

      {/* Create / Edit Modal */}
      <Modal
        open={showModal}
        onClose={closeFormModal}
        title={editingId ? t('customFields.editTitle', 'Feld bearbeiten') : t('customFields.createTitle', 'Neues Feld')}
        size="lg"
      >
        <div className="space-y-4">
          {formError && (
            <div className="p-3 rounded-md bg-danger-50 border border-danger-200 text-danger-700 text-sm">
              {formError}
            </div>
          )}

          {/* Label */}
          <Input
            label={t('customFields.fieldLabel', 'Bezeichnung')}
            required
            value={form.label}
            onChange={(e) => handleLabelChange(e.target.value)}
            placeholder="z.B. Branche, Abteilung, Geburtsdatum"
          />

          {/* Name (auto-generated) */}
          <Input
            label={t('customFields.fieldName', 'Feldname (intern)')}
            required
            value={form.name}
            onChange={(e) => handleNameChange(e.target.value)}
            helperText="Wird automatisch aus der Bezeichnung generiert"
            placeholder="z.B. branche, abteilung, geburtsdatum"
          />

          {/* Field type */}
          <Select
            label={t('customFields.fieldType', 'Feldtyp')}
            required
            options={FIELD_TYPE_OPTIONS}
            value={form.field_type}
            onChange={(e) => handleFieldTypeChange(e.target.value)}
          />

          {/* Options (only for select / multiselect) */}
          {needsOptions && (
            <Input
              label={t('customFields.options', 'Optionen (kommagetrennt)')}
              required
              value={form.optionsStr}
              onChange={(e) => setForm((prev) => ({ ...prev, optionsStr: e.target.value }))}
              placeholder="Option 1, Option 2, Option 3"
              helperText="Trennen Sie die Optionen mit Kommas"
            />
          )}

          {/* Default value — varies by field type */}
          {form.field_type !== 'multiselect' && form.field_type !== 'boolean' && (
            <Input
              label={t('customFields.defaultValue', 'Standardwert')}
              type={form.field_type === 'number' ? 'number' : form.field_type === 'date' ? 'date' : 'text'}
              value={form.default_value}
              onChange={(e) => setForm((prev) => ({ ...prev, default_value: e.target.value }))}
              helperText="Optional — wird für neue Einträge vorbelegt"
            />
          )}

          {form.field_type === 'boolean' && (
            <Select
              label={t('customFields.defaultValue', 'Standardwert')}
              options={[
                { value: '', label: '— Keiner —' },
                { value: 'true', label: 'Ja / Aktiv' },
                { value: 'false', label: 'Nein / Inaktiv' },
              ]}
              value={form.default_value}
              onChange={(e) => setForm((prev) => ({ ...prev, default_value: e.target.value }))}
            />
          )}

          {/* Required checkbox */}
          <div className="flex items-center gap-2">
            <input
              id="cf-required"
              type="checkbox"
              checked={form.required}
              onChange={(e) => setForm((prev) => ({ ...prev, required: e.target.checked }))}
              className="h-4 w-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
            />
            <label htmlFor="cf-required" className="text-sm font-medium text-secondary-700 cursor-pointer">
              {t('customFields.required', 'Pflichtfeld')}
            </label>
          </div>

          {/* Active checkbox */}
          <div className="flex items-center gap-2">
            <input
              id="cf-active"
              type="checkbox"
              checked={form.is_active}
              onChange={(e) => setForm((prev) => ({ ...prev, is_active: e.target.checked }))}
              className="h-4 w-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
            />
            <label htmlFor="cf-active" className="text-sm font-medium text-secondary-700 cursor-pointer">
              {t('customFields.active', 'Aktiv')}
            </label>
          </div>

          {/* Form actions */}
          <div className="flex justify-end gap-2 pt-4 border-t border-secondary-200">
            <Button variant="secondary" onClick={closeFormModal}>
              {t('common.cancel', 'Abbrechen')}
            </Button>
            <Button onClick={handleSave} isLoading={saving}>
              {editingId ? t('common.save', 'Speichern') : t('common.create', 'Erstellen')}
            </Button>
          </div>
        </div>
      </Modal>

      {/* Delete confirmation modal */}
      <Modal
        open={!!deleteTarget}
        onClose={() => setDeleteTarget(null)}
        title={t('customFields.deleteTitle', 'Feld löschen')}
        size="sm"
      >
        <div className="space-y-4">
          <p className="text-sm text-secondary-700">
            {t('customFields.deleteConfirm', 'Möchten Sie das Feld')}{' '}
            <strong>{deleteTarget?.label}</strong>{' '}
            {t('customFields.deleteConfirmEnd', 'wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.')}
          </p>
          <div className="flex justify-end gap-2">
            <Button variant="secondary" onClick={() => setDeleteTarget(null)}>
              {t('common.cancel', 'Abbrechen')}
            </Button>
            <Button variant="danger" onClick={confirmDelete} isLoading={deleteMutation.isPending}>
              <Trash2 className="w-4 h-4 mr-1" />
              {t('common.delete', 'Löschen')}
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}