'use client';

import { useState, useEffect, useRef } from 'react';
import { useApp } from '@/lib/context';
import { fetchAlerts, createAlert, updateAlert, deleteAlert } from '@/lib/api';
import { resolveName, resolveKey } from '@/lib/localization';
import type { AlertConfig } from '@/lib/types';

interface Props {
  open: boolean;
  onClose: () => void;
}

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

interface AlertFormState {
  itemKey: string;
  itemKeyIsRegex: boolean;
  combinator: string;
  signalType: 'green' | 'red';
  condition: 'above' | 'below';
  threshold: string;
}

function emptyForm(): AlertFormState {
  return {
    itemKey: '',
    itemKeyIsRegex: false,
    combinator: '',
    signalType: 'green',
    condition: 'below',
    threshold: '0',
  };
}

function alertToForm(a: AlertConfig): AlertFormState {
  return {
    itemKey: a.item_key,
    itemKeyIsRegex: a.item_key_is_regex,
    combinator: a.combinator ?? '',
    signalType: a.signal_type,
    condition: a.condition,
    threshold: String(a.threshold),
  };
}

function Tooltip({ text }: { text: string }) {
  return (
    <span className="relative group inline-flex items-center cursor-default">
      <span className="text-gray-500 hover:text-gray-300 text-xs select-none">ⓘ</span>
      <span className="pointer-events-none absolute left-5 top-0 z-50 w-48 rounded bg-gray-700 px-2 py-1 text-xs text-gray-200 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg">
        {text}
      </span>
    </span>
  );
}

function AlertForm({
  value,
  onChange,
  onSubmit,
  onCancel,
  submitLabel,
}: {
  value: AlertFormState;
  onChange: (s: AlertFormState) => void;
  onSubmit: () => void;
  onCancel?: () => void;
  submitLabel: string;
}) {
  return (
    <div className="space-y-2">
      <input
        value={value.itemKey}
        onChange={(e) => onChange({ ...value, itemKey: e.target.value })}
        placeholder={value.itemKeyIsRegex ? 'iron-.*|Iron Plate' : 'Iron Plate or item-key'}
        className={inputCls}
      />
      <label className="flex items-center gap-1.5 text-xs text-gray-400 cursor-pointer">
        <input
          type="checkbox"
          checked={value.itemKeyIsRegex}
          onChange={(e) => onChange({ ...value, itemKeyIsRegex: e.target.checked })}
          className="accent-indigo-500"
        />
        Item key is regex
      </label>
      <input
        value={value.combinator}
        onChange={(e) => onChange({ ...value, combinator: e.target.value })}
        placeholder="combinator (empty = all)"
        className={inputCls}
      />
      <div className="flex gap-2">
        <select
          value={value.signalType}
          onChange={(e) => onChange({ ...value, signalType: e.target.value as 'green' | 'red' })}
          className={selectCls}
        >
          <option value="green">Green</option>
          <option value="red">Red</option>
        </select>
        <select
          value={value.condition}
          onChange={(e) => onChange({ ...value, condition: e.target.value as 'above' | 'below' })}
          className={selectCls}
        >
          <option value="below">Below</option>
          <option value="above">Above</option>
        </select>
      </div>
      <input
        type="number"
        value={value.threshold}
        onChange={(e) => onChange({ ...value, threshold: e.target.value })}
        placeholder="threshold"
        className={inputCls}
      />
      <div className="flex gap-2">
        <button
          onClick={onSubmit}
          className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded py-1.5"
        >
          {submitLabel}
        </button>
        {onCancel && (
          <button
            onClick={onCancel}
            className="px-3 py-1.5 text-sm text-gray-400 hover:text-white rounded hover:bg-gray-700"
          >
            Cancel
          </button>
        )}
      </div>
    </div>
  );
}

export default function AlertPanel({ open, onClose }: Props) {
  const { triggeredAlerts, refreshAlerts, localeMap, reverseMap } = useApp();
  const [alerts, setAlerts] = useState<AlertConfig[]>([]);
  const [newForm, setNewForm] = useState<AlertFormState>(emptyForm());
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editForm, setEditForm] = useState<AlertFormState>(emptyForm());
  const prevTriggeredCount = useRef(0);

  useEffect(() => {
    if (open) fetchAlerts().then(setAlerts);
  }, [open]);

  useEffect(() => {
    if (triggeredAlerts.length > prevTriggeredCount.current) {
      try {
        const ctx = new AudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.frequency.value = 880;
        gain.gain.setValueAtTime(0.3, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.4);
        osc.start();
        osc.stop(ctx.currentTime + 0.4);
      } catch {
        /* AudioContext blocked */
      }
    }
    prevTriggeredCount.current = triggeredAlerts.length;
  }, [triggeredAlerts.length]);

  /** Resolves item key input — skips resolution for regex mode. */
  function normalizeItemKey(form: AlertFormState): string {
    if (form.itemKeyIsRegex) return form.itemKey.trim();
    return resolveKey(form.itemKey.trim(), reverseMap);
  }

  async function handleCreate() {
    if (!newForm.itemKey.trim()) return;
    const created = await createAlert({
      item_key: normalizeItemKey(newForm),
      item_key_is_regex: newForm.itemKeyIsRegex,
      combinator: newForm.combinator.trim() || null,
      signal_type: newForm.signalType,
      condition: newForm.condition,
      threshold: parseInt(newForm.threshold, 10),
    });
    setAlerts((a) => [created, ...a]);
    setNewForm(emptyForm());
    await refreshAlerts();
  }

  async function handleEdit(id: string) {
    if (!editForm.itemKey.trim()) return;
    const updated = await updateAlert(id, {
      item_key: normalizeItemKey(editForm),
      item_key_is_regex: editForm.itemKeyIsRegex,
      combinator: editForm.combinator.trim() || null,
      signal_type: editForm.signalType,
      condition: editForm.condition,
      threshold: parseInt(editForm.threshold, 10),
    });
    setAlerts((a) => a.map((x) => (x.id === id ? updated : x)));
    setEditingId(null);
    await refreshAlerts();
  }

  async function handleDelete(id: string) {
    await deleteAlert(id);
    setAlerts((a) => a.filter((x) => x.id !== id));
    await refreshAlerts();
  }

  function startEdit(alert: AlertConfig) {
    setEditingId(alert.id);
    setEditForm(alertToForm(alert));
  }

  return (
    <div
      className={`fixed top-0 right-0 h-full w-80 bg-gray-900 border-l border-gray-700 shadow-xl z-40 transform transition-transform duration-200 ${open ? 'translate-x-0' : 'translate-x-full'}`}
    >
      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700">
        <span className="font-semibold text-white">Alerts</span>
        <button onClick={onClose} className="text-gray-400 hover:text-white">
          ✕
        </button>
      </div>

      {triggeredAlerts.length > 0 && (
        <div className="px-4 py-2 bg-red-900/40 border-b border-red-800">
          <p className="text-red-300 text-xs font-semibold mb-1">
            🔴 TRIGGERED ({triggeredAlerts.length})
          </p>
          {triggeredAlerts.map((a, i) => (
            <div key={i} className="text-xs text-red-200 flex items-center gap-1 flex-wrap">
              <span>{resolveName(a.matched_item_key, localeMap)}</span>
              <span className="text-red-400">({a.combinator_match})</span>
              <span>[{a.signal_type}]</span>
              <span>
                = {a.current_value} {a.condition} {a.threshold}
              </span>
              {a.item_key_is_regex && a.matched_item_key !== a.item_key && (
                <Tooltip text={`Matched by regex: /${a.item_key}/`} />
              )}
            </div>
          ))}
        </div>
      )}

      <div className="p-4 border-b border-gray-700 space-y-2">
        <p className="text-xs text-gray-400 font-semibold uppercase">New Alert</p>
        <AlertForm
          value={newForm}
          onChange={setNewForm}
          onSubmit={handleCreate}
          submitLabel="Add Alert"
        />
      </div>

      <div className="overflow-y-auto flex-1 p-4 space-y-2">
        {alerts.length === 0 && <p className="text-gray-500 text-sm">No alerts configured.</p>}
        {alerts.map((a) => (
          <div key={a.id} className="bg-gray-800 rounded p-2 text-xs text-gray-300">
            {editingId === a.id ? (
              <AlertForm
                value={editForm}
                onChange={setEditForm}
                onSubmit={() => handleEdit(a.id)}
                onCancel={() => setEditingId(null)}
                submitLabel="Save"
              />
            ) : (
              <div className="flex justify-between items-start">
                <div>
                  <span className="font-medium text-white">
                    {resolveName(a.item_key, localeMap)}
                  </span>
                  {a.item_key_is_regex && <Tooltip text={`Regex pattern: /${a.item_key}/`} />}
                  {a.combinator && <span className="text-gray-400"> @ {a.combinator}</span>}
                  <br />
                  <span className={a.signal_type === 'green' ? 'text-green-400' : 'text-red-400'}>
                    [{a.signal_type}]
                  </span>{' '}
                  {a.condition} {a.threshold}
                </div>
                <div className="flex gap-1 ml-2 shrink-0">
                  <button
                    onClick={() => startEdit(a)}
                    className="text-gray-500 hover:text-indigo-400"
                  >
                    ✏️
                  </button>
                  <button
                    onClick={() => handleDelete(a.id)}
                    className="text-gray-500 hover:text-red-400"
                  >
                    ✕
                  </button>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}