import { ArrowDown, ArrowUp, Plus, Trash2 } from 'lucide-react';
import React from 'react';

import { canonicalJsonString, jsonValuesEqual } from '../../../domain/convergentSync/json';
import type { JsonValue } from '../../../domain/convergentSync/types';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';

type RestrictedSchema = {
  type?: string;
  const?: unknown;
  enum?: unknown[];
  minimum?: number;
  maximum?: number;
  minLength?: number;
  maxLength?: number;
  minItems?: number;
  maxItems?: number;
  items?: RestrictedSchema;
  properties?: Record<string, RestrictedSchema>;
  required?: string[];
};

function asSchema(value: unknown): RestrictedSchema {
  return value && typeof value === 'object' && !Array.isArray(value) ? value as RestrictedSchema : {};
}

export function createPluginStructuredDefaultValue(schema: RestrictedSchema): unknown {
  if (schema.const !== undefined) return structuredClone(schema.const);
  if (schema.enum?.length) return structuredClone(schema.enum[0]);
  if (schema.type === 'boolean') return false;
  if (schema.type === 'number' || schema.type === 'integer') {
    if (schema.type === 'integer') {
      return schema.minimum !== undefined
        ? Math.ceil(schema.minimum)
        : Math.min(0, Math.floor(schema.maximum ?? 0));
    }
    return schema.minimum ?? Math.min(0, schema.maximum ?? 0);
  }
  if (schema.type === 'array') {
    return Array.from(
      { length: schema.minItems ?? 0 },
      () => createPluginStructuredDefaultValue(asSchema(schema.items)),
    );
  }
  if (schema.type === 'null') return null;
  if (schema.type === 'object') {
    const required = new Set(schema.required ?? []);
    return Object.fromEntries(Object.entries(schema.properties ?? {})
      .filter(([key]) => required.has(key))
      .map(([key, child]) => [key, createPluginStructuredDefaultValue(child)]));
  }
  return ''.padEnd(schema.minLength ?? 0, 'x');
}

function StructuredValueInput({
  schema,
  value,
  disabled,
  label,
  onChange,
  onCommit,
  sortable = false,
  labels,
}: {
  schema: RestrictedSchema;
  value: unknown;
  disabled: boolean;
  label: string;
  onChange(value: unknown): void;
  onCommit(value: unknown): void;
  sortable?: boolean;
  labels: { add: string; remove: string; moveUp(index: number): string; moveDown(index: number): string };
}) {
  if (schema.const !== undefined) {
    return <code className="block rounded bg-muted/40 px-2 py-1.5 text-xs">{JSON.stringify(schema.const)}</code>;
  }
  if (schema.enum?.length) {
    const selectedIndex = schema.enum.findIndex((candidate) => (
      jsonValuesEqual(candidate as JsonValue, value as JsonValue)
    ));
    return (
      <select
        aria-label={label}
        value={String(Math.max(0, selectedIndex))}
        disabled={disabled}
        onChange={(event) => {
          const selected = schema.enum?.[Number(event.target.value)];
          onChange(selected);
          onCommit(selected);
        }}
        className="h-9 w-full rounded-md border border-input bg-background px-2 text-sm"
      >
        {schema.enum.map((candidate, index) => (
          <option key={`${index}:${JSON.stringify(candidate)}`} value={String(index)}>
            {typeof candidate === 'string' ? candidate : canonicalJsonString(candidate as JsonValue)}
          </option>
        ))}
      </select>
    );
  }
  if (schema.type === 'null') {
    return <code className="block rounded bg-muted/40 px-2 py-1.5 text-xs">null</code>;
  }
  if (schema.type === 'boolean') {
    return (
      <input
        aria-label={label}
        type="checkbox"
        checked={value === true}
        disabled={disabled}
        onChange={(event) => {
          onChange(event.target.checked);
          onCommit(event.target.checked);
        }}
        className="h-4 w-4 accent-primary"
      />
    );
  }
  if (schema.type === 'object') {
    const record = value && typeof value === 'object' && !Array.isArray(value)
      ? value as Record<string, unknown>
      : {};
    const required = new Set(schema.required ?? []);
    return (
      <div className="space-y-2 rounded-md border border-border/60 p-2">
        {Object.entries(schema.properties ?? {}).map(([key, child]) => {
          const present = Object.hasOwn(record, key);
          if (!required.has(key) && !present) {
            return (
              <div key={key} className="flex items-center justify-between gap-2 text-xs">
                <span className="font-medium text-muted-foreground">{key}</span>
                <Button type="button" variant="outline" size="sm" disabled={disabled} onClick={() => {
                  const next = { ...record, [key]: createPluginStructuredDefaultValue(child) };
                  onChange(next);
                  onCommit(next);
                }} aria-label={`${labels.add}: ${key}`}><Plus size={13} className="mr-2" />{labels.add}</Button>
              </div>
            );
          }
          return (
          <div key={key} className="block space-y-1 text-xs">
            <span className="font-medium text-muted-foreground">{key}</span>
            <div className="flex items-start gap-1">
              <div className="min-w-0 flex-1">
                <StructuredValueInput
                  schema={child}
                  value={record[key]}
                  disabled={disabled}
                  label={`${label} ${key}`}
                  labels={labels}
                  onChange={(next) => onChange({ ...record, [key]: next })}
                  onCommit={(next) => onCommit({ ...record, [key]: next })}
                />
              </div>
              {!required.has(key) && <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-destructive" disabled={disabled} onClick={() => {
                const next = { ...record };
                delete next[key];
                onChange(next);
                onCommit(next);
              }} aria-label={`${labels.remove}: ${key}`}><Trash2 size={13} /></Button>}
            </div>
          </div>
          );
        })}
      </div>
    );
  }
  if (schema.type === 'array') {
    const items = Array.isArray(value) ? value : [];
    const itemSchema = asSchema(schema.items);
    const commitItems = (next: unknown[]) => {
      onChange(next);
      onCommit(next);
    };
    return (
      <div className="space-y-2 rounded-md border border-border/60 p-2">
        {items.map((item, index) => (
          <div key={index} className="flex items-start gap-2">
            <div className="min-w-0 flex-1">
              <StructuredValueInput
                schema={itemSchema}
                value={item}
                disabled={disabled}
                label={`${label} ${index + 1}`}
                labels={labels}
                onChange={(nextItem) => {
                  const next = [...items];
                  next[index] = nextItem;
                  onChange(next);
                }}
                onCommit={(nextItem) => {
                  const next = [...items];
                  next[index] = nextItem;
                  onCommit(next);
                }}
              />
            </div>
            <div className="flex shrink-0 items-center gap-1">
              {sortable && <Button type="button" variant="ghost" size="icon" className="h-7 w-7" disabled={disabled || index === 0} onClick={() => {
                const next = [...items];
                const [moved] = next.splice(index, 1);
                next.splice(index - 1, 0, moved);
                commitItems(next);
              }} aria-label={labels.moveUp(index)}><ArrowUp size={13} /></Button>}
              {sortable && <Button type="button" variant="ghost" size="icon" className="h-7 w-7" disabled={disabled || index === items.length - 1} onClick={() => {
                const next = [...items];
                const [moved] = next.splice(index, 1);
                next.splice(index + 1, 0, moved);
                commitItems(next);
              }} aria-label={labels.moveDown(index)}><ArrowDown size={13} /></Button>}
              <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-destructive" disabled={disabled || items.length <= (schema.minItems ?? 0)} onClick={() => commitItems(items.filter((_item, itemIndex) => itemIndex !== index))} aria-label={labels.remove}><Trash2 size={13} /></Button>
            </div>
          </div>
        ))}
        <Button type="button" variant="outline" size="sm" disabled={disabled || items.length >= (schema.maxItems ?? Number.POSITIVE_INFINITY)} onClick={() => commitItems([...items, createPluginStructuredDefaultValue(itemSchema)])}>
          <Plus size={13} className="mr-2" />{labels.add}
        </Button>
      </div>
    );
  }
  const numeric = schema.type === 'number' || schema.type === 'integer';
  return (
    <Input
      aria-label={label}
      type={numeric ? 'number' : 'text'}
      value={numeric ? Number(value ?? 0) : String(value ?? '')}
      min={schema.minimum}
      max={schema.maximum}
      minLength={schema.minLength}
      maxLength={schema.maxLength}
      step={schema.type === 'integer' ? 1 : undefined}
      disabled={disabled}
      onChange={(event) => onChange(numeric ? Number(event.target.value) : event.target.value)}
      onBlur={(event) => onCommit(numeric ? Number(event.currentTarget.value) : event.currentTarget.value)}
      className="min-w-28"
    />
  );
}

export function PluginStructuredSettingEditor({
  setting,
  value,
  disabled,
  onChange,
  onCommit,
  labels,
}: {
  setting: NetcattyPluginSettingContribution;
  value: unknown;
  disabled: boolean;
  onChange(value: unknown[]): void;
  onCommit(value: unknown[]): void;
  labels: { add: string; remove: string; moveUp(index: number): string; moveDown(index: number): string };
}) {
  const root = asSchema(setting.valueSchema);
  const itemSchema = asSchema(root.items);
  const items = Array.isArray(value) ? value : [];
  const properties = itemSchema.type === 'object' && !itemSchema.enum?.length && itemSchema.const === undefined
    ? Object.entries(itemSchema.properties ?? {})
    : [];
  const updateItem = (index: number, nextItem: unknown, commit: boolean) => {
    const next = [...items];
    next[index] = nextItem;
    onChange(next);
    if (commit) onCommit(next);
  };
  const move = (from: number, to: number) => {
    if (to < 0 || to >= items.length) return;
    const next = [...items];
    const [item] = next.splice(from, 1);
    next.splice(to, 0, item);
    onChange(next);
    onCommit(next);
  };
  const remove = (index: number) => {
    const next = items.filter((_item, itemIndex) => itemIndex !== index);
    onChange(next);
    onCommit(next);
  };
  const add = () => {
    const next = [...items, createPluginStructuredDefaultValue(itemSchema)];
    onChange(next);
    onCommit(next);
  };

  return (
    <div className="max-w-2xl space-y-2">
      {properties.length > 0 && (
        <div className="grid gap-2 px-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
          style={{ gridTemplateColumns: `repeat(${properties.length}, minmax(7rem, 1fr)) auto` }}>
          {properties.map(([key]) => <span key={key}>{key}</span>)}
          <span className="sr-only">Actions</span>
        </div>
      )}
      {items.map((item, index) => {
        const objectItem = item && typeof item === 'object' && !Array.isArray(item) ? item as Record<string, unknown> : {};
        const required = new Set(itemSchema.required ?? []);
        return (
          <div
            key={`${setting.id}:${index}`}
            className="grid items-center gap-2 rounded-md border border-border/70 bg-muted/10 p-2"
            style={{ gridTemplateColumns: properties.length ? `repeat(${properties.length}, minmax(7rem, 1fr)) auto` : 'minmax(0, 1fr) auto' }}
          >
            {properties.length ? properties.map(([key, schema]) => {
              const present = Object.hasOwn(objectItem, key);
              if (!required.has(key) && !present) {
                return <Button key={key} type="button" variant="outline" size="sm" disabled={disabled} onClick={() => updateItem(index, {
                  ...objectItem,
                  [key]: createPluginStructuredDefaultValue(schema),
                }, true)} aria-label={`${labels.add}: ${key}`}><Plus size={13} className="mr-2" />{labels.add}</Button>;
              }
              return (
                <div key={key} className="flex min-w-0 items-start gap-1">
                  <div className="min-w-0 flex-1">
                    <StructuredValueInput
                      schema={schema}
                      value={objectItem[key]}
                      disabled={disabled}
                      label={`${setting.label} ${key} ${index + 1}`}
                      labels={labels}
                      onChange={(next) => updateItem(index, { ...objectItem, [key]: next }, false)}
                      onCommit={(next) => updateItem(index, { ...objectItem, [key]: next }, true)}
                    />
                  </div>
                  {!required.has(key) && <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-destructive" disabled={disabled} onClick={() => {
                    const next = { ...objectItem };
                    delete next[key];
                    updateItem(index, next, true);
                  }} aria-label={`${labels.remove}: ${key}`}><Trash2 size={13} /></Button>}
                </div>
              );
            }) : (
              <StructuredValueInput
                schema={itemSchema}
                value={item}
                disabled={disabled}
                label={`${setting.label} ${index + 1}`}
                labels={labels}
                sortable={setting.sortable}
                onChange={(next) => updateItem(index, next, false)}
                onCommit={(next) => updateItem(index, next, true)}
              />
            )}
            <div className="flex items-center justify-end gap-1">
              {setting.sortable && (
                <>
                  <Button type="button" variant="ghost" size="icon" className="h-7 w-7" disabled={disabled || index === 0} onClick={() => move(index, index - 1)} aria-label={labels.moveUp(index)}><ArrowUp size={13} /></Button>
                  <Button type="button" variant="ghost" size="icon" className="h-7 w-7" disabled={disabled || index === items.length - 1} onClick={() => move(index, index + 1)} aria-label={labels.moveDown(index)}><ArrowDown size={13} /></Button>
                </>
              )}
              <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-destructive" disabled={disabled || items.length <= (root.minItems ?? 0)} onClick={() => remove(index)} aria-label={labels.remove}><Trash2 size={13} /></Button>
            </div>
          </div>
        );
      })}
      <Button type="button" variant="outline" size="sm" disabled={disabled || items.length >= (root.maxItems ?? Number.POSITIVE_INFINITY)} onClick={add}>
        <Plus size={13} className="mr-2" />{labels.add}
      </Button>
    </div>
  );
}