<script lang="ts">
  import EmailText from "../../../../components/EmailText.svelte";
  import type { CompanyData } from "../types";
  import { formatPhone } from "../types";

  export let company: CompanyData | null;
</script>

{#if !company?.cw_Data?.allContacts || company.cw_Data.allContacts.length === 0}
  <div class="tab-empty">
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.5"
      class="tab-empty-icon"
    >
      <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M23 21v-2a4 4 0 00-3-3.87" />
      <path d="M16 3.13a4 4 0 010 7.75" />
    </svg>
    <p>No contacts found</p>
  </div>
{:else}
  {@const activeContacts = company.cw_Data.allContacts.filter(
    (c) => !c.inactive,
  )}
  {@const inactiveContacts = company.cw_Data.allContacts.filter(
    (c) => c.inactive,
  )}

  <!-- Active contacts -->
  {#if activeContacts.length > 0}
    <div class="contacts-section">
      <div class="contacts-section-header">
        <h3 class="contacts-section-title">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="var(--text-muted)"
            stroke-width="2"
            width="16"
            height="16"
          >
            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <path d="M23 21v-2a4 4 0 00-3-3.87" />
            <path d="M16 3.13a4 4 0 010 7.75" />
          </svg>
          Active
        </h3>
        <span class="contacts-section-count">{activeContacts.length}</span>
      </div>
      <div class="contacts-grid">
        {#each activeContacts as contact (contact.cwId ?? `${contact.firstName}-${contact.lastName}`)}
          <div class="contact-card">
            <div class="contact-card-header">
              <div class="contact-avatar">
                <span class="contact-initials">
                  {contact.firstName?.[0] ?? ""}{contact.lastName?.[0] ?? ""}
                </span>
              </div>
              <div class="contact-card-info">
                <div class="contact-name">
                  {[contact.firstName, contact.lastName]
                    .filter(Boolean)
                    .join(" ")}
                </div>
                {#if contact.title}
                  <div class="contact-title">{contact.title}</div>
                {/if}
              </div>
            </div>
            <div class="contact-card-details">
              {#if contact.email}
                <div class="contact-detail-row">
                  <EmailText email={contact.email} />
                </div>
              {/if}
              {#if contact.phone}
                <div class="contact-detail-row">
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="var(--text-secondary)"
                    stroke-width="2"
                    width="13"
                    height="13"
                    style="min-width:13px;min-height:13px;"
                  >
                    <path
                      d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
                    />
                  </svg>
                  <span>{formatPhone(contact.phone)}</span>
                </div>
              {/if}
            </div>
          </div>
        {/each}
      </div>
    </div>
  {/if}

  <!-- Inactive contacts -->
  {#if inactiveContacts.length > 0}
    <div class="contacts-section contacts-section-inactive">
      <div class="contacts-section-header">
        <h3 class="contacts-section-title">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="var(--text-muted)"
            stroke-width="2"
            width="16"
            height="16"
          >
            <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
            <circle cx="9" cy="7" r="4" />
            <line x1="23" y1="13" x2="17" y2="13" />
          </svg>
          Inactive
        </h3>
        <span class="contacts-section-count inactive"
          >{inactiveContacts.length}</span
        >
      </div>
      <div class="contacts-grid">
        {#each inactiveContacts as contact (contact.cwId ?? `${contact.firstName}-${contact.lastName}`)}
          <div class="contact-card contact-inactive">
            <div class="contact-card-header">
              <div class="contact-avatar contact-avatar-inactive">
                <span class="contact-initials">
                  {contact.firstName?.[0] ?? ""}{contact.lastName?.[0] ?? ""}
                </span>
              </div>
              <div class="contact-card-info">
                <div class="contact-name">
                  {[contact.firstName, contact.lastName]
                    .filter(Boolean)
                    .join(" ")}
                  <span class="contact-inactive-badge">Inactive</span>
                </div>
                {#if contact.title}
                  <div class="contact-title">{contact.title}</div>
                {/if}
              </div>
            </div>
            <div class="contact-card-details">
              {#if contact.email}
                <div class="contact-detail-row">
                  <EmailText email={contact.email} />
                </div>
              {/if}
              {#if contact.phone}
                <div class="contact-detail-row">
                  <svg
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="var(--text-secondary)"
                    stroke-width="2"
                    width="13"
                    height="13"
                    style="min-width:13px;min-height:13px;"
                  >
                    <path
                      d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
                    />
                  </svg>
                  <span>{formatPhone(contact.phone)}</span>
                </div>
              {/if}
            </div>
          </div>
        {/each}
      </div>
    </div>
  {/if}
{/if}
