<script>
  import { onMount } from 'svelte';
  import { createFamily, listMyFamilies, listPendingInvites, acceptInvite, activeFamilyId } from './family.js';
  import { currentUser, signOut } from './auth.js';

  let families = $state([]);
  let invites = $state([]);
  let newFamilyName = $state('');
  let searchQuery = $state('');
  let loading = $state(true);
  let error = $state('');

  async function refresh() {
    loading = true;
    try {
      families = await listMyFamilies();
      invites = await listPendingInvites();
    } catch (e) {
      error = e.message;
    } finally {
      loading = false;
    }
  }

  onMount(refresh);

  async function handleCreate() {
    if (!newFamilyName) return;
    try {
      await createFamily(newFamilyName);
      newFamilyName = '';
      await refresh();
    } catch (e) { error = e.message; }
  }

  async function handleAccept(inv) {
    try {
      await acceptInvite(inv.membershipId);
      await refresh();
      activeFamilyId.set(inv.familyId);
    } catch (e) { error = e.message; }
  }

  function selectFamily(id) {
    activeFamilyId.set(id);
  }

  const isAgentForMultiple = $derived(families.filter(f => f.role === 'agent').length > 1);
  const filteredFamilies = $derived(families.filter(f => f.name.toLowerCase().includes(searchQuery.toLowerCase())));
</script>

<div class="switcher-screen">
  <div class="header-brand">
    <div class="brand-line brand-line-first">Nur</div>
    <div class="brand-line brand-line-second">Falah</div>
  </div>
  <span class="header-tagline">ESTATE &amp; WAQF SUITE</span>
  <div class="header-divider"></div>

  <div class="user-row">
    <span>Signed in as {currentUser()?.email}</span>
    <button class="signout-btn" onclick={signOut}>Sign out</button>
  </div>

  {#if error}<p class="error-text">{error}</p>{/if}

  {#if loading}
    <p class="loading">Loading your families…</p>
  {:else}
    <div class="section">
      <h3>Start your own family estate</h3>
      <p class="hint">If you're the head of family setting this up for the first time, create your family here. You can invite an estate agent to help manage it once it's set up.</p>
      <label class="field"><span>Family name</span><input type="text" bind:value={newFamilyName} placeholder="e.g. The Ismail Family" /></label>
      <button class="btn-primary" onclick={handleCreate}>Create family</button>
    </div>

    {#if invites.length}
      <div class="section">
        <h3>Pending invitations</h3>
        {#each invites as inv}
          <div class="invite-row card-layout">
            <div class="card-info">
              <span class="card-title">{inv.familyName}</span>
              <span class="card-meta">Role: <strong>{inv.role}</strong></span>
            </div>
            <button class="btn-small" onclick={() => handleAccept(inv)}>Accept</button>
          </div>
        {/each}
      </div>
    {/if}

    {#if families.length}
      <div class="section">
        <div class="section-header">
          <h3>{isAgentForMultiple ? 'Your assigned families' : 'Your families'}</h3>
          <input type="text" class="search-input" bind:value={searchQuery} placeholder="Search families..." />
        </div>
        <div class="cards-grid">
          {#each filteredFamilies as f}
            <button class="family-card" onclick={() => selectFamily(f.id)}>
              <div class="card-top">
                <span class="card-title">{f.name}</span>
                <span class="role-badge" class:owner={f.role === 'owner'}>{f.role}</span>
              </div>
              <div class="card-bottom">
                <span class="status-indicator">Active</span>
                <span class="action-hint">Manage estate &rarr;</span>
              </div>
            </button>
          {/each}
          {#if filteredFamilies.length === 0}
            <p class="empty-state">No families found matching "{searchQuery}"</p>
          {/if}
        </div>
      </div>
    {/if}
  {/if}
</div>

<style>
  .switcher-screen { max-width: 440px; margin: 0 auto; padding: 24px 16px; }
  .header-brand { display: flex; justify-content: center; gap: 8px; }
  .brand-line { font-family: 'DM Serif Display', serif; font-size: 30px; }
  .brand-line-first { color: #E8E4DC; }
  .brand-line-second { color: #C9A84C; }
  .header-tagline { display: block; text-align: center; font-size: 10px; letter-spacing: 2px; color: #8A8478; }
  .header-divider { height: 2px; width: 40px; background: #C9A84C; margin: 10px auto 24px; border-radius: 2px; }
  .user-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #8A8478; margin-bottom: 20px; }
  .signout-btn { background: none; border: none; color: #C9A84C; cursor: pointer; font-size: 12px; }
  .loading { text-align: center; color: #8A8478; font-size: 13px; }
  .section { margin-bottom: 24px; }
  .section h3 { font-size: 14px; color: #C9A84C; margin-bottom: 10px; }
  .hint { font-size: 11.5px; color: #8A8478; line-height: 1.5; margin-bottom: 12px; }
  .invite-row { display: flex; justify-content: space-between; align-items: center; background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.25); border-radius: 10px; padding: 12px; margin-bottom: 8px; font-size: 13px; color: #E8E4DC; }
  .btn-small { background: #C9A84C; color: #070A0D; border: none; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
  
  .section-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .search-input { background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.2); border-radius: 8px; padding: 8px 12px; color: #E8E4DC; font-size: 13px; width: 100%; outline: none; transition: border-color 0.2s; }
  .search-input:focus { border-color: #C9A84C; }
  
  .cards-grid { display: flex; flex-direction: column; gap: 10px; }
  .family-card { width: 100%; display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; font-size: 14px; color: #E8E4DC; cursor: pointer; text-align: left; transition: all 0.2s; }
  .family-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(201,168,76,0.3); transform: translateY(-1px); }
  .card-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
  .card-bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 11px; color: #8A8478; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; }
  .card-title { font-weight: 600; font-size: 15px; }
  .status-indicator { display: flex; align-items: center; gap: 4px; }
  .status-indicator::before { content: ''; width: 6px; height: 6px; background: #2ECC71; border-radius: 50%; }
  .action-hint { color: #C9A84C; opacity: 0; transition: opacity 0.2s; }
  .family-card:hover .action-hint { opacity: 1; }
  
  .empty-state { text-align: center; color: #8A8478; font-size: 13px; padding: 20px 0; font-style: italic; }

  .role-badge { font-size: 10px; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.1); color: #B8B2A6; }
  .role-badge.owner { background: rgba(201,168,76,0.15); color: #C9A84C; }
  .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
  .field span { font-size: 12px; color: #B8B2A6; }
  .field input { background: rgba(255,255,255,0.05); border: 1px solid rgba(201,168,76,0.2); border-radius: 8px; padding: 10px 12px; color: #E8E4DC; font-size: 14px; width: 100%; }
  .btn-primary { width: 100%; padding: 12px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; background: #C9A84C; color: #070A0D; transition: opacity 0.2s; }
  .btn-primary:hover { opacity: 0.9; }
  .error-text { color: #EF4444; font-size: 12.5px; margin-bottom: 12px; }
</style>
