{% extends "base.html" %}
{% block title %}DoIP Client – DoIP Server{% endblock %}

{% block content %}
<h1 class="text-xl font-bold text-amber-400 mb-6">DoIP Client Tester</h1>

<div x-data="doipClient()" class="grid grid-cols-2 gap-6">

  <div class="col-span-2 -mt-2 mb-2 text-[11px] text-gray-500">
    Global DoIP protocol version:
    <span class="text-gray-300 font-mono" x-text="gatewayProtocolHex()"></span>
    — configured on the
    <a href="/" class="text-amber-400 hover:underline">Dashboard</a> (Edit Gateway) and used
    by the server for all TCP/UDP/UDS messages and as this client's default.
  </div>

  <!-- Request form -->
  <div class="bg-gray-800 border border-gray-700 rounded p-5 space-y-4">
    <h2 class="font-bold text-gray-300 mb-2">Request</h2>

    <!-- Mode toggle -->
    <div class="flex gap-2 text-xs">
      <button type="button"
              @click="setMode('named')"
              :class="mode === 'named' ? 'bg-amber-600 text-white' : 'bg-gray-700 text-gray-300'"
              class="px-3 py-1 rounded font-bold">
        By name
      </button>
      <button type="button"
              @click="setMode('raw')"
              :class="mode === 'raw' ? 'bg-amber-600 text-white' : 'bg-gray-700 text-gray-300'"
              class="px-3 py-1 rounded font-bold">
        Raw
      </button>
      <button type="button"
              @click="setMode('udp')"
              :class="mode === 'udp' ? 'bg-amber-600 text-white' : 'bg-gray-700 text-gray-300'"
              class="px-3 py-1 rounded font-bold">
        UDP
      </button>
    </div>

    <label class="flex flex-col gap-1 text-xs">
      Host
      <input x-model="form.host" type="text" placeholder="localhost, 127.0.0.1, or ::1"
             class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white"/>
    </label>
    <label class="flex flex-col gap-1 text-xs">
      Port
      <input x-model.number="form.port" type="number"
             class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white"/>
    </label>
    <label class="flex flex-col gap-1 text-xs">
      Timeout (s)
      <input x-model.number="form.timeout" type="number" step="0.5"
             class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white"/>
    </label>

    <!-- Named mode: ECU + service pickers -->
    <template x-if="mode === 'named'">
      <div class="space-y-4 border-t border-gray-700 pt-4">
        <label class="flex items-center gap-2 text-xs">
          <input type="checkbox" x-model="functional" @change="onFunctionalToggle()"/>
          Send as functional (broadcast)
        </label>

        <template x-if="!functional">
          <div class="space-y-4">
            <label class="flex flex-col gap-1 text-xs">
              ECU
              <select x-model.number="selectedEcuAddress"
                      @change="onEcuChange()"
                      class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white">
                <option value="">— Select ECU —</option>
                <template x-for="ecu in ecus" :key="ecu.target_address">
                  <option :value="ecu.target_address"
                          x-text="`${ecu.name} (${ecu.target_address_hex})`"></option>
                </template>
              </select>
            </label>

            <label class="flex flex-col gap-1 text-xs">
              Service
              <select x-model="selectedServiceName"
                      @change="onServiceChange()"
                      @focus="loadServicesIfNeeded()"
                      :disabled="!selectedEcuAddress"
                      class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white disabled:opacity-50">
                <option value="">— Select service —</option>
                <template x-for="svc in services" :key="svc.name">
                  <option :value="svc.name" x-text="svc.name"></option>
                </template>
              </select>
            </label>

            <div class="text-[10px] text-gray-500 space-y-1" x-show="selectedEcuAddress && selectedServiceName">
              <div>Target: <span class="text-gray-300" x-text="'0x' + form.target_address.toString(16).toUpperCase().padStart(4, '0')"></span></div>
              <div>Source: <span class="text-gray-300" x-text="'0x' + form.source_address.toString(16).toUpperCase().padStart(4, '0')"></span></div>
              <div>UDS: <span class="text-gray-300 font-mono" x-text="form.uds_message"></span></div>
            </div>

            <button type="button"
                    @click="createServiceForEcu()"
                    :disabled="!selectedEcuAddress"
                    class="text-xs px-3 py-1 bg-green-700 hover:bg-green-600 disabled:opacity-50 rounded">
              + New service for this ECU
            </button>
          </div>
        </template>

        <template x-if="functional">
          <div class="space-y-4">
            <label class="flex flex-col gap-1 text-xs">
              Functional group
              <select x-model.number="selectedFunctionalAddress"
                      @change="onFunctionalGroupChange()"
                      class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white">
                <option value="">— Select functional address —</option>
                <template x-for="group in functionalGroups" :key="group.functional_address">
                  <option :value="group.functional_address"
                          x-text="`${group.functional_address_hex} (${group.ecus.length} ECUs)`"></option>
                </template>
              </select>
            </label>

            <label class="flex flex-col gap-1 text-xs">
              Service
              <select x-model="selectedFunctionalServiceName"
                      @change="onFunctionalServiceChange()"
                      :disabled="selectedFunctionalAddress === ''"
                      class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white disabled:opacity-50">
                <option value="">— Select service —</option>
                <template x-for="svc in currentFunctionalServices()" :key="svc.name">
                  <option :value="svc.name" x-text="svc.name"></option>
                </template>
              </select>
            </label>

            <div class="text-[10px] text-gray-500 space-y-1" x-show="selectedFunctionalAddress !== '' && selectedFunctionalServiceName">
              <div>Functional target: <span class="text-gray-300" x-text="'0x' + form.target_address.toString(16).toUpperCase().padStart(4, '0')"></span></div>
              <div>Source: <span class="text-gray-300" x-text="'0x' + form.source_address.toString(16).toUpperCase().padStart(4, '0')"></span></div>
              <div>UDS: <span class="text-gray-300 font-mono" x-text="form.uds_message"></span></div>
              <div>Broadcasts to:
                <span class="text-gray-300" x-text="(currentFunctionalGroup()?.ecus || []).map(e => e.name).join(', ')"></span>
              </div>
            </div>

            <div class="text-xs text-gray-500" x-show="selectedFunctionalAddress !== '' && currentFunctionalServices().length === 0">
              No functional-capable services found for this group.
            </div>
          </div>
        </template>
      </div>
    </template>

    <!-- Raw mode: explicit addresses and hex -->
    <template x-if="mode === 'raw'">
      <div class="space-y-4 border-t border-gray-700 pt-4">
        <label class="flex flex-col gap-1 text-xs">
          Source Address (decimal)
          <input x-model.number="form.source_address" type="number"
                 class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white"/>
        </label>
        <label class="flex flex-col gap-1 text-xs">
          Target Address (decimal)
          <input x-model.number="form.target_address" type="number"
                 class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white"/>
        </label>
        <label class="flex flex-col gap-1 text-xs">
          UDS Message (hex, without 0x)
          <input x-model="form.uds_message" type="text" placeholder="22F190"
                 class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white uppercase"/>
        </label>
      </div>
    </template>

    <!-- UDP mode: vehicle identification / entity status / power mode -->
    <template x-if="mode === 'udp'">
      <div class="space-y-4 border-t border-gray-700 pt-4">
        <label class="flex items-center gap-2 text-xs">
          <input type="checkbox" x-model="udpRaw"/>
          Raw UDP message
        </label>

        <template x-if="!udpRaw">
          <div class="space-y-4">
            <label class="flex flex-col gap-1 text-xs">
              UDP Message
              <select x-model="udpMessageType"
                      class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white">
                <option value="vehicle_identification">Vehicle Identification (0x0001)</option>
                <option value="entity_status">Entity Status (0x4001)</option>
                <option value="power_mode">Power Mode Information (0x4003)</option>
              </select>
            </label>
            <p class="text-[10px] text-gray-500">
              Sent over UDP to <span class="text-gray-300" x-text="form.host + ':' + form.port"></span>
              using the gateway's configured protocol version.
            </p>
          </div>
        </template>

        <template x-if="udpRaw">
          <div class="space-y-4">
            <div class="grid grid-cols-2 gap-3">
              <label class="flex flex-col gap-1 text-xs">
                Protocol Version (hex)
                <input x-model="udpRawForm.version" type="text"
                       :placeholder="'auto (' + (gatewayProtocol.version ?? 0x02).toString(16).toUpperCase().padStart(2,'0') + ')'"
                       class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white uppercase"/>
              </label>
              <label class="flex flex-col gap-1 text-xs">
                Inverse Version (hex)
                <input x-model="udpRawForm.inverse_version" type="text"
                       :placeholder="'auto (' + (gatewayProtocol.inverse_version ?? 0xFD).toString(16).toUpperCase().padStart(2,'0') + ')'"
                       class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white uppercase"/>
              </label>
            </div>
            <label class="flex flex-col gap-1 text-xs">
              Payload Type (hex)
              <input x-model="udpRawForm.payload_type" type="text" placeholder="0001"
                     class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white uppercase"/>
            </label>
            <label class="flex flex-col gap-1 text-xs">
              Payload (hex, optional)
              <input x-model="udpRawForm.payload_hex" type="text" placeholder=""
                     class="bg-gray-900 border border-gray-600 rounded px-2 py-1 text-white uppercase"/>
            </label>
            <p class="text-[10px] text-gray-500">
              Leave version fields blank to use the gateway's configured protocol version.
            </p>
          </div>
        </template>
      </div>
    </template>

    <button @click="send()"
            :disabled="busy || !canSend()"
            class="w-full py-2 bg-amber-600 hover:bg-amber-500 disabled:opacity-50 rounded font-bold">
      <span x-text="busy ? 'Sending…' : 'Send'"></span>
    </button>
  </div>

  <!-- Response / log panel -->
  <div class="flex flex-col gap-4">
    <div class="bg-gray-800 border border-gray-700 rounded p-4">
      <h2 class="font-bold text-gray-300 mb-2">Response</h2>
      <template x-if="mode === 'udp'">
        <div>
          <template x-if="done && udpResponse">
            <div class="space-y-1 text-sm">
              <template x-for="(val, key) in udpResponse" :key="key">
                <template x-if="key !== 'parsed'">
                  <div>
                    <span class="text-gray-500" x-text="key + ':'"></span>
                    <span class="text-green-400 font-mono ml-1" x-text="formatUdpValue(val)"></span>
                  </div>
                </template>
              </template>
              <template x-if="udpResponse.parsed">
                <div class="mt-2 pt-2 border-t border-gray-700 space-y-1">
                  <div class="text-gray-500 text-[10px] uppercase tracking-wide">Decoded payload</div>
                  <template x-for="(val, key) in udpResponse.parsed" :key="key">
                    <div>
                      <span class="text-gray-500" x-text="key + ':'"></span>
                      <span class="text-green-400 font-mono ml-1" x-text="formatUdpValue(val)"></span>
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </template>
          <div x-show="done && !udpResponse" class="text-red-400 text-base">FAILED — no response</div>
          <div x-show="!done" class="text-gray-500">—</div>
        </div>
      </template>
      <template x-if="mode !== 'udp'">
        <div>
          <template x-if="done && responses.length > 0">
            <div class="space-y-1">
              <template x-for="(r, i) in responses" :key="i">
                <div :class="ok ? 'text-green-400' : 'text-red-400'" class="text-base break-all">
                  <span x-show="responses.length > 1 && r.ecu_address_hex"
                        class="text-gray-500 text-xs mr-1" x-text="r.ecu_address_hex + ':'"></span>
                  <span x-text="r.response"></span>
                </div>
              </template>
            </div>
          </template>
          <div x-show="done && responses.length === 0" class="text-red-400 text-base">FAILED — no response</div>
          <div x-show="!done" class="text-gray-500">—</div>
        </div>
      </template>
    </div>

    <div class="bg-gray-900 border border-gray-700 rounded p-4 flex-1 overflow-y-auto max-h-96">
      <h2 class="font-bold text-gray-300 mb-2">Event Log</h2>
      <div class="space-y-1 text-xs">
        <template x-for="(entry, i) in log" :key="i">
          <div class="flex gap-2">
            <span class="text-gray-600 w-20 shrink-0" x-text="new Date(entry.ts).toISOString().substr(11,12)"></span>
            <span :class="entry.event === 'error' ? 'text-red-400' : entry.event === 'got_response' ? 'text-green-400' : 'text-gray-300'"
                  x-text="entry.event + (entry.detail ? ': ' + entry.detail : '')"></span>
          </div>
        </template>
        <div x-show="log.length === 0" class="text-gray-600">No events yet.</div>
      </div>
    </div>

    <button @click="clearLog()"
            class="text-xs px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded self-start">
      Clear log
    </button>
  </div>
</div>

<script>
function doipClient() {
  return {
    mode: 'named',
    form: {
      host: 'localhost',
      port: 13400,
      source_address: 0x0E00,
      target_address: 1,
      uds_message: '22F190',
      timeout: 5.0,
    },
    ecus: [],
    services: [],
    selectedEcuAddress: '',
    selectedServiceName: '',
    functional: false,
    functionalGroups: [],
    selectedFunctionalAddress: '',
    selectedFunctionalServiceName: '',
    udpMessageType: 'vehicle_identification',
    udpRaw: false,
    udpRawForm: {
      version: '',
      inverse_version: '',
      payload_type: '0001',
      payload_hex: '',
    },
    udpResponse: null,
    gatewayProtocol: {},
    log: [],
    responses: [],
    done: false,
    ok: false,
    busy: false,
    ws: null,

    async init() {
      window.__onServiceSaved = (address) => {
        if (Number(address) === Number(this.selectedEcuAddress)) {
          this.loadServices(true);
        }
      };
      await this.loadEcus();
      await this.loadGatewayProtocol();
    },

    async loadGatewayProtocol() {
      try {
        const res = await fetch('/api/gateway');
        if (!res.ok) throw new Error(res.statusText);
        const data = await res.json();
        this.gatewayProtocol = data.protocol || {};
      } catch (e) {
        console.error('Failed to load gateway protocol config', e);
      }
    },

    gatewayProtocolHex() {
      const { version, inverse_version } = this.gatewayProtocol;
      if (typeof version !== 'number' || typeof inverse_version !== 'number') return '—';
      const fmt = (v) => '0x' + v.toString(16).toUpperCase().padStart(2, '0');
      return `${fmt(version)} / ${fmt(inverse_version)}`;
    },

    setMode(m) {
      this.mode = m;
      if (m === 'named' && this.ecus.length === 0) {
        this.loadEcus();
      }
    },

    async loadEcus() {
      try {
        const res = await fetch('/api/ecus');
        if (!res.ok) throw new Error(res.statusText);
        this.ecus = await res.json();
      } catch (e) {
        console.error('Failed to load ECUs', e);
      }
    },

    async onEcuChange() {
      this.selectedServiceName = '';
      this.services = [];
      if (!this.selectedEcuAddress) return;
      const ecu = this.ecus.find(e => e.target_address === Number(this.selectedEcuAddress));
      if (ecu) {
        this.form.target_address = ecu.target_address;
        if (ecu.tester_addresses && ecu.tester_addresses.length) {
          this.form.source_address = ecu.tester_addresses[0];
        }
      }
      await this.loadServices();
    },

    loadServicesIfNeeded() {
      if (this.selectedEcuAddress && this.services.length === 0) {
        this.loadServices();
      }
    },

    async loadServices(force) {
      if (!this.selectedEcuAddress) return;
      if (!force && this.services.length > 0) return;
      try {
        const res = await fetch(`/api/ecus/${this.selectedEcuAddress}/services`);
        if (!res.ok) throw new Error(res.statusText);
        this.services = await res.json();
        if (this.selectedServiceName) {
          this.onServiceChange();
        }
      } catch (e) {
        console.error('Failed to load services', e);
      }
    },

    onServiceChange() {
      const svc = this.services.find(s => s.name === this.selectedServiceName);
      if (!svc) return;
      const ecu = this.ecus.find(e => e.target_address === Number(this.selectedEcuAddress));
      if (ecu) {
        this.form.target_address = ecu.target_address;
        if (ecu.tester_addresses && ecu.tester_addresses.length) {
          this.form.source_address = ecu.tester_addresses[0];
        }
      }
      let req = svc.request || '';
      req = String(req).replace(/^0x/i, '').replace(/\s/g, '');
      this.form.uds_message = req.toUpperCase();
    },

    createServiceForEcu() {
      if (!this.selectedEcuAddress) return;
      newService(Number(this.selectedEcuAddress));
    },

    onFunctionalToggle() {
      this.selectedFunctionalAddress = '';
      this.selectedFunctionalServiceName = '';
      if (this.functional && this.functionalGroups.length === 0) {
        this.loadFunctionalGroups();
      }
    },

    async loadFunctionalGroups() {
      try {
        const res = await fetch('/api/ecus/functional-addresses');
        if (!res.ok) throw new Error(res.statusText);
        this.functionalGroups = await res.json();
      } catch (e) {
        console.error('Failed to load functional addresses', e);
      }
    },

    currentFunctionalGroup() {
      return this.functionalGroups.find(g => g.functional_address === Number(this.selectedFunctionalAddress));
    },

    currentFunctionalServices() {
      const group = this.currentFunctionalGroup();
      return group ? group.services : [];
    },

    onFunctionalGroupChange() {
      this.selectedFunctionalServiceName = '';
      const group = this.currentFunctionalGroup();
      if (!group) return;
      this.form.target_address = group.functional_address;
      const firstEcu = group.ecus[0];
      if (firstEcu && firstEcu.tester_addresses && firstEcu.tester_addresses.length) {
        this.form.source_address = firstEcu.tester_addresses[0];
      }
    },

    onFunctionalServiceChange() {
      const svc = this.currentFunctionalServices().find(s => s.name === this.selectedFunctionalServiceName);
      if (!svc) return;
      let req = svc.request || '';
      req = String(req).replace(/^0x/i, '').replace(/\s/g, '');
      this.form.uds_message = req.toUpperCase();
    },

    canSend() {
      if (this.mode === 'named') {
        if (this.functional) {
          return this.selectedFunctionalAddress !== '' && this.selectedFunctionalServiceName && this.form.uds_message;
        }
        return this.selectedEcuAddress && this.selectedServiceName && this.form.uds_message;
      }
      if (this.mode === 'udp') {
        if (this.udpRaw) {
          return /^[0-9a-fA-F]{1,4}$/.test(this.udpRawForm.payload_type);
        }
        return !!this.udpMessageType;
      }
      return this.form.target_address != null && this.form.uds_message;
    },

    send() {
      if (this.mode === 'udp') {
        if (this.udpRaw) {
          this.sendUdpRaw();
        } else {
          this.sendUdp();
        }
        return;
      }

      this.responses = [];
      this.done = false;
      this.busy = true;

      if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
        const proto = location.protocol === 'https:' ? 'wss' : 'ws';
        this.ws = new WebSocket(`${proto}://${location.host}/api/client/ws`);
        this.ws.onmessage = (evt) => this._onMessage(JSON.parse(evt.data));
        this.ws.onopen = () => this.ws.send(JSON.stringify(this.form));
      } else {
        this.ws.send(JSON.stringify(this.form));
      }
    },

    async sendUdp() {
      this.udpResponse = null;
      this.done = false;
      this.busy = true;
      try {
        const res = await fetch('/api/client/send-udp', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            host: this.form.host,
            port: this.form.port,
            message_type: this.udpMessageType,
            timeout: this.form.timeout,
          }),
        });
        const result = await res.json();
        this.log.push(...result.log);
        this.ok = result.ok;
        this.udpResponse = result.response;
      } catch (e) {
        this.log.push({ ts: Date.now(), event: 'error', detail: String(e) });
        this.ok = false;
        this.udpResponse = null;
      } finally {
        this.done = true;
        this.busy = false;
      }
    },

    async sendUdpRaw() {
      this.udpResponse = null;
      this.done = false;
      this.busy = true;
      try {
        const body = {
          host: this.form.host,
          port: this.form.port,
          payload_type: parseInt(this.udpRawForm.payload_type, 16),
          payload_hex: this.udpRawForm.payload_hex || '',
          timeout: this.form.timeout,
        };
        if (this.udpRawForm.version !== '') {
          body.version = parseInt(this.udpRawForm.version, 16);
        }
        if (this.udpRawForm.inverse_version !== '') {
          body.inverse_version = parseInt(this.udpRawForm.inverse_version, 16);
        }
        const res = await fetch('/api/client/send-udp-raw', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
        });
        const result = await res.json();
        this.log.push(...result.log);
        this.ok = result.ok;
        this.udpResponse = result.response;
      } catch (e) {
        this.log.push({ ts: Date.now(), event: 'error', detail: String(e) });
        this.ok = false;
        this.udpResponse = null;
      } finally {
        this.done = true;
        this.busy = false;
      }
    },

    formatUdpValue(val) {
      if (typeof val === 'number') {
        return `${val} (0x${val.toString(16).toUpperCase().padStart(2, '0')})`;
      }
      return val;
    },

    _onMessage(msg) {
      if (msg.event === 'done') {
        this.ok = msg.ok;
        this.responses = msg.responses && msg.responses.length
          ? msg.responses
          : (msg.response ? [{ ecu_address_hex: null, response: msg.response }] : []);
        this.done = true;
        this.busy = false;
      } else {
        this.log.push(msg);
      }
    },

    clearLog() {
      this.log = [];
      this.responses = [];
      this.udpResponse = null;
      this.done = false;
    },
  };
}
</script>
{% endblock %}