---
// DCAgentStep — D.C. Registered Agent for FCC filings.
// The FCC requires a D.C. agent for service of process (Form 499-A
// Block 2-B, Lines 209-213). Carrier must either use ours ($99/yr
// via NWRA) or provide their own agent's info.
---

<div class="pw-step">
  <h2>D.C. Registered Agent</h2>
  <p class="pw-help">
    The FCC requires every filer to designate a registered agent in the
    District of Columbia for service of process. This is listed on your
    Form 499-A (Lines 209-213). You can use our agent service or provide
    your own.
  </p>

  <div class="pw-dc-options">
    <label class="pw-dc-option" id="pw-dc-ours">
      <input type="radio" name="pw_dc_agent_choice" value="ours" checked />
      <div class="pw-dc-card">
        <strong>Use our D.C. agent — $99/yr</strong>
        <span class="pw-dc-rec">Recommended</span>
        <p>Northwest Registered Agent Service Inc.<br/>
        1717 N Street NW STE 1, Washington, DC 20036</p>
        <p class="pw-dc-note">Included at no extra charge with the New Carrier Bundle.
        Annual renewal billed separately ($99/yr).</p>
      </div>
    </label>

    <label class="pw-dc-option" id="pw-dc-own">
      <input type="radio" name="pw_dc_agent_choice" value="own" />
      <div class="pw-dc-card">
        <strong>I have my own D.C. agent</strong>
        <p>Provide your agent's name and address below.</p>
      </div>
    </label>
  </div>

  <!-- Own agent fields (hidden unless "own" selected) -->
  <div id="pw-dc-own-fields" class="pw-dc-own-fields" hidden>
    <div class="pw-dc-grid">
      <div>
        <label for="pw-dc-company">Agent company name *</label>
        <input type="text" id="pw-dc-company" placeholder="e.g. CSC Global" />
      </div>
      <div>
        <label for="pw-dc-street">Street address *</label>
        <input type="text" id="pw-dc-street" placeholder="e.g. 1015 15th Street NW Suite 1000" />
      </div>
      <div>
        <label for="pw-dc-city">City</label>
        <input type="text" id="pw-dc-city" value="Washington" readonly />
      </div>
      <div class="pw-dc-row">
        <div>
          <label for="pw-dc-state">State</label>
          <input type="text" id="pw-dc-state" value="DC" readonly />
        </div>
        <div>
          <label for="pw-dc-zip">ZIP *</label>
          <input type="text" id="pw-dc-zip" maxlength="10" placeholder="20001" />
        </div>
      </div>
      <div>
        <label for="pw-dc-phone">Agent phone</label>
        <input type="tel" id="pw-dc-phone" placeholder="(202) 555-1234" />
      </div>
    </div>
  </div>

  <div id="pw-dc-err" class="pw-err" hidden></div>
</div>

<style>
  .pw-step h2 { margin: 0 0 0.5rem; color: #1a2744; }
  .pw-help { color: #64748b; font-size: 0.9rem; margin-bottom: 1rem; }
  .pw-dc-options { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
  .pw-dc-option { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; }
  .pw-dc-option input { margin-top: 0.35rem; }
  .pw-dc-card {
    flex: 1; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; border-radius: 8px;
    transition: border-color 0.15s;
  }
  .pw-dc-option:has(input:checked) .pw-dc-card { border-color: #2563eb; background: #eff6ff; }
  .pw-dc-card strong { display: block; color: #1a2744; font-size: 0.9rem; }
  .pw-dc-card p { margin: 0.3rem 0 0; font-size: 0.82rem; color: #64748b; }
  .pw-dc-rec { display: inline-block; font-size: 0.7rem; background: #059669; color: #fff; padding: 1px 6px; border-radius: 4px; margin-left: 0.4rem; vertical-align: middle; }
  .pw-dc-note { font-size: 0.78rem !important; color: #047857 !important; font-style: italic; }
  .pw-dc-own-fields { margin-top: 0.75rem; }
  .pw-dc-grid { display: flex; flex-direction: column; gap: 0.6rem; }
  .pw-dc-grid label { display: block; font-size: 0.8rem; color: #475569; margin-bottom: 0.15rem; }
  .pw-dc-grid input { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.9rem; }
  .pw-dc-grid input[readonly] { background: #f1f5f9; color: #64748b; }
  .pw-dc-row { display: flex; gap: 0.6rem; }
  .pw-dc-row > div { flex: 1; }
  .pw-err { color: #b91c1c; margin-top: 0.75rem; font-size: 0.9rem; }
</style>

<script>
  const radios = document.querySelectorAll<HTMLInputElement>('input[name="pw_dc_agent_choice"]');
  const ownFields = document.getElementById("pw-dc-own-fields") as HTMLElement;
  const err = document.getElementById("pw-dc-err") as HTMLDivElement;

  function syncVisibility() {
    const choice = (document.querySelector<HTMLInputElement>('input[name="pw_dc_agent_choice"]:checked'))?.value;
    ownFields.hidden = choice !== "own";
  }
  radios.forEach(r => r.addEventListener("change", syncVisibility));

  // Prefill from wizard state
  window.addEventListener("pw:step-shown", (evt: any) => {
    if (evt.detail.step !== "dc_agent") return;
    const s = (window as any).PWIntake.get();
    const dc = s.intake_data?.dc_agent || {};
    if (dc.choice === "own") {
      (document.querySelector<HTMLInputElement>('input[value="own"]'))!.checked = true;
      syncVisibility();
      const g = (id: string) => document.getElementById(id) as HTMLInputElement;
      if (dc.company) g("pw-dc-company").value = dc.company;
      if (dc.street) g("pw-dc-street").value = dc.street;
      if (dc.zip) g("pw-dc-zip").value = dc.zip;
      if (dc.phone) g("pw-dc-phone").value = dc.phone;
    }
  });

  // Persist on Next
  window.addEventListener("pw:step-next", (evt: any) => {
    const PW = (window as any).PWIntake;
    if (PW.steps[PW.get().step_index] !== "dc_agent") return;
    err.hidden = true;

    const choice = (document.querySelector<HTMLInputElement>('input[name="pw_dc_agent_choice"]:checked'))?.value;

    if (choice === "ours") {
      PW.patchIntakeData({
        dc_agent: {
          choice: "ours",
          company: "Northwest Registered Agent Service Inc.",
          street: "1717 N Street NW STE 1",
          city: "Washington",
          state: "DC",
          zip: "20036",
          phone: "509-768-2249",
        },
      });
    } else {
      const g = (id: string) => (document.getElementById(id) as HTMLInputElement).value.trim();
      const company = g("pw-dc-company");
      const street = g("pw-dc-street");
      const zip = g("pw-dc-zip");

      if (!company || !street || !zip) {
        err.textContent = "Agent company name, street address, and ZIP are required.";
        err.hidden = false;
        evt.preventDefault();
        return;
      }

      PW.patchIntakeData({
        dc_agent: {
          choice: "own",
          company,
          street,
          city: "Washington",
          state: "DC",
          zip,
          phone: g("pw-dc-phone"),
        },
      });
    }
  });
</script>