'use client';

import { useState } from 'react';
import { useApp } from '@/lib/context';
import { resolveKey } from '@/lib/localization';
import type { ChartConfig } from '@/lib/types';

type DraftChart = Omit<ChartConfig, 'id'>;

interface Props {
  initial?: ChartConfig;
  onSave:  (draft: DraftChart) => void;
  onClose: () => void;
}

const inputCls =
  'w-full bg-gray-800 border border-gray-600 rounded px-3 py-1.5 text-white text-sm focus:outline-none focus:border-indigo-500';

/**
 * Normalizes a comma-separated list of user tokens (localized names or raw keys)
 * to raw item_keys. Unknown tokens are kept as-is.
 */
function normalizeList(raw: string, reverseMap: Map<string, string>): string[] | null {
  const arr = raw.split(',').map(x => x.trim()).filter(Boolean);
  if (arr.length === 0) return null;
  return arr.map(t => resolveKey(t, reverseMap));
}

export default function ChartEditor({ initial, onSave, onClose }: Props) {
  const { reverseMap } = useApp();

  const [title,       setTitle]       = useState(initial?.title ?? '');
  const [chartType,   setChartType]   = useState<ChartConfig['chart_type']>(initial?.chart_type ?? 'signals');
  const [vizType,     setVizType]     = useState<ChartConfig['viz_type']>(initial?.viz_type ?? 'line');
  const [signalType,  setSignalType]  = useState<ChartConfig['signal_type']>(initial?.signal_type ?? 'both');
  const [combinators, setCombinators] = useState((initial?.filter_combinators ?? []).join(', '));
  const [whitelist,   setWhitelist]   = useState((initial?.filter_items ?? []).join(', '));
  const [blacklist,   setBlacklist]   = useState((initial?.filter_items_exclude ?? []).join(', '));
  const [useRegex,    setUseRegex]    = useState(initial?.filter_items_regex ?? false);
  const [orderBy,     setOrderBy]     = useState<ChartConfig['order_by']>(initial?.order_by ?? 'time');
  const [seriesLimit, setSeriesLimit] = useState(initial?.series_limit ?? 20);
  const [yMin,        setYMin]        = useState(initial?.y_min?.toString() ?? '');
  const [yMax,        setYMax]        = useState(initial?.y_max?.toString() ?? '');
  const [yScale,      setYScale]      = useState<ChartConfig['y_scale']>(initial?.y_scale ?? 'linear');
  const [width,       setWidth]       = useState(initial?.width  ?? 2);
  const [height,      setHeight]      = useState(initial?.height ?? 4);

  function splitCombinators(): string[] | null {
    const arr = combinators.split(',').map(x => x.trim()).filter(Boolean);
    return arr.length > 0 ? arr : null;
  }

  function handleSave() {
    if (!title.trim()) return;

    // Regex mode: store pattern exactly as typed — server expands via matchKeys at query time.
    // Non-regex mode: resolve each comma-token (localized name or raw key) to raw key.
    const filter_items         = useRegex
      ? (whitelist.trim() ? [whitelist.trim()] : null)
      : normalizeList(whitelist, reverseMap);
    const filter_items_exclude = useRegex
      ? (blacklist.trim() ? [blacklist.trim()] : null)
      : normalizeList(blacklist, reverseMap);

    onSave({
      title:                title.trim(),
      chart_type:           chartType,
      viz_type:             chartType === 'divider' ? 'line' : vizType,
      signal_type:          signalType,
      pos_x:                initial?.pos_x ?? 0,
      pos_y:                initial?.pos_y ?? 0,
      width, height,
      filter_combinators:   chartType === 'divider' ? null : splitCombinators(),
      filter_items:         chartType === 'divider' ? null : filter_items,
      filter_items_exclude: chartType === 'divider' ? null : filter_items_exclude,
      filter_items_regex:   useRegex,
      order_by:             orderBy,
      series_limit:         seriesLimit,
      y_min:                yMin !== '' ? parseFloat(yMin) : null,
      y_max:                yMax !== '' ? parseFloat(yMax) : null,
      y_scale:              yScale,
    });
  }

  const isSignals = chartType === 'signals';
  const isDivider = chartType === 'divider';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
      <div
        className="bg-gray-900 border border-gray-700 rounded-lg p-6 w-full max-w-md shadow-xl overflow-y-auto max-h-[90vh]"
        onClick={e => e.stopPropagation()}
      >
        <h2 className="text-lg font-semibold text-white mb-4">
          {initial ? 'Edit Chart' : 'New Chart'}
        </h2>

        <label className="block text-sm text-gray-400 mb-1">Title</label>
        <input value={title} onChange={e => setTitle(e.target.value)} className={`${inputCls} mb-3`} />

        <label className="block text-sm text-gray-400 mb-1">Chart Type</label>
        <select value={chartType} onChange={e => setChartType(e.target.value as ChartConfig['chart_type'])} className={`${inputCls} mb-3`}>
          <option value="signals">Signals</option>
          <option value="ups">UPS / Game Tick Rate</option>
          <option value="divider">Divider / Section Label</option>
        </select>

        {!isDivider && <>
          <label className="block text-sm text-gray-400 mb-1">Visualization</label>
          <select value={vizType} onChange={e => setVizType(e.target.value as ChartConfig['viz_type'])} className={`${inputCls} mb-3`}>
            <option value="line">Line Chart</option>
            <option value="table">Table</option>
          </select>
        </>}

        {isSignals && <>
          <label className="block text-sm text-gray-400 mb-1">Signal</label>
          <select value={signalType} onChange={e => setSignalType(e.target.value as ChartConfig['signal_type'])} className={`${inputCls} mb-3`}>
            <option value="both">Both (green + red)</option>
            <option value="green">Green only</option>
            <option value="red">Red only</option>
          </select>

          <label className="block text-sm text-gray-400 mb-1">Sort series by</label>
          <select value={orderBy} onChange={e => setOrderBy(e.target.value as ChartConfig['order_by'])} className={`${inputCls} mb-3`}>
            <option value="time">Time (no sort)</option>
            <option value="value_asc">Latest lowest values</option>
            <option value="value_desc">Latest highest values</option>
            <option value="delta_asc">Biggest decrease (last 10 min)</option>
            <option value="delta_desc">Biggest increase (last 10 min)</option>
          </select>

          <label className="block text-sm text-gray-400 mb-1">Max series (lines)</label>
          <input type="number" min={1} max={200} value={seriesLimit}
            onChange={e => setSeriesLimit(Number(e.target.value))}
            className={`${inputCls} mb-3`} />

          <label className="block text-sm text-gray-400 mb-1">Combinators (comma-separated, empty = all)</label>
          <input value={combinators} onChange={e => setCombinators(e.target.value)}
            placeholder="nauvis, nauvis-orbit" className={`${inputCls} mb-3`} />

          <div className="flex items-center gap-2 mb-2">
            <label className="text-sm text-gray-400 flex-1">Item filters</label>
            <label className="flex items-center gap-1.5 text-xs text-gray-400 cursor-pointer">
              <input type="checkbox" checked={useRegex} onChange={e => setUseRegex(e.target.checked)}
                className="accent-indigo-500" />
              Use regex
            </label>
          </div>
          <input value={whitelist} onChange={e => setWhitelist(e.target.value)}
            placeholder={useRegex ? 'wissen.*|Iron Plate' : 'Iron Plate, copper-plate'}
            className={`${inputCls} mb-1`} />
          <p className="text-xs text-gray-500 mb-2">Whitelist — localized names or item keys accepted (empty = all)</p>
          <input value={blacklist} onChange={e => setBlacklist(e.target.value)}
            placeholder={useRegex ? 'Holz|stone' : 'Wood, stone'}
            className={`${inputCls} mb-1`} />
          <p className="text-xs text-gray-500 mb-3">Blacklist — localized names or item keys accepted</p>
        </>}

        {!isDivider && <>
          <div className="flex gap-3 mb-3">
            <div className="flex-1">
              <label className="block text-sm text-gray-400 mb-1">Y Min (empty = auto)</label>
              <input type="number" value={yMin} onChange={e => setYMin(e.target.value)}
                placeholder="auto" className={inputCls} />
            </div>
            <div className="flex-1">
              <label className="block text-sm text-gray-400 mb-1">Y Max (empty = auto)</label>
              <input type="number" value={yMax} onChange={e => setYMax(e.target.value)}
                placeholder="auto" className={inputCls} />
            </div>
          </div>

          <label className="block text-sm text-gray-400 mb-1">Y Scale</label>
          <select value={yScale} onChange={e => setYScale(e.target.value as ChartConfig['y_scale'])} className={`${inputCls} mb-3`}>
            <option value="linear">Linear</option>
            <option value="log">Symmetric Log (arcsinh)</option>
          </select>
        </>}

        <div className="flex gap-3 mb-4">
          <div className="flex-1">
            <label className="block text-sm text-gray-400 mb-1">Width (1–6 cols)</label>
            <input type="number" min={1} max={6} value={width}
              onChange={e => setWidth(Number(e.target.value))} className={inputCls} />
          </div>
          <div className="flex-1">
            <label className="block text-sm text-gray-400 mb-1">Height (rows)</label>
            <input type="number" min={2} max={20} value={height}
              onChange={e => setHeight(Number(e.target.value))} className={inputCls} />
          </div>
        </div>

        <div className="flex justify-end gap-2">
          <button onClick={onClose}    className="px-4 py-1.5 text-sm text-gray-400 hover:text-white rounded hover:bg-gray-700">Cancel</button>
          <button onClick={handleSave} className="px-4 py-1.5 text-sm bg-indigo-600 hover:bg-indigo-500 text-white rounded">Save</button>
        </div>
      </div>
    </div>
  );
}