import ProfileManager from './lib/components/ProfileManager.svelte';

    <ProfileManager {digraphs} metadata={sessionMetadata} />

<script>

  import { aggregateDigraphs } from '../aggregation';

  import { saveProfile, loadProfiles, deleteProfile, exportProfile, importProfile } from '../storage';

  import { createEventDispatcher } from 'svelte';

  export let digraphs = [];

  export let metadata = null;

  const dispatch = createEventDispatcher();

  let profiles = loadProfiles();

  let profileName = '';

  let importError = '';

  let fileInput;

  function refreshProfiles() {

    profiles = loadProfiles();

  }

  function handleSave() {

    const aggregations = aggregateDigraphs(digraphs);

    const name = profileName.trim() || `Session - ${new Date().toLocaleDateString()}`;

    const profile = {

      id: crypto.randomUUID(),

      name,

      createdAt: new Date().toISOString(),

      digraphCount: digraphs.length,

      aggregations,

      metadata: { ...metadata },

    };

    saveProfile(profile);

    profileName = '';

    refreshProfiles();

    dispatch('saved');

  }

  function handleDelete(id) {

    deleteProfile(id);

    refreshProfiles();

  }

  function handleExport(profile) {

    exportProfile(profile);

  }

  async function handleImport(e) {

    importError = '';

    const file = e.target.files?.[0];

    if (!file) return;

    try {

      const profile = await importProfile(file);

      saveProfile(profile);

      refreshProfiles();

    } catch (err) {

      importError = err.message;

    }

    // Reset file input so the same file can be re-imported

    if (fileInput) fileInput.value = '';

  }

  function formatDate(iso) {

    return new Date(iso).toLocaleDateString(undefined, {

      month: 'short',

      day: 'numeric',

      year: 'numeric',

      hour: '2-digit',

      minute: '2-digit',

    });

  }

</script>

<div class="profile-manager">

  <div class="save-section">

    <div class="save-row">

      <input

        type="text"

        bind:value={profileName}

        placeholder="profile name"

        class="name-input"

      />

      <button

        on:click={handleSave}

        disabled={digraphs.length === 0}

        class="save-btn"

      >

        save profile

      </button>

    </div>

    {#if digraphs.length === 0}

      <span class="hint">capture some digraphs first</span>

    {/if}

  </div>

  <div class="profiles-section">

    <div class="section-header">

      <span class="section-title">saved profiles ({profiles.length})</span>

      <button class="import-btn" on:click={() => fileInput.click()}>

        import

      </button>

      <input

        type="file"

        accept=".json"

        bind:this={fileInput}

        on:change={handleImport}

        class="hidden-input"

      />

    </div>

    {#if importError}

      <span class="error">{importError}</span>

    {/if}

    {#if profiles.length === 0}

      <div class="empty-profiles">

        <span>no saved profiles</span>

      </div>

    {:else}

      <div class="profiles-list">

        {#each profiles as profile (profile.id)}

          <div class="profile-row">

            <div class="profile-info">

              <span class="profile-name">{profile.name}</span>

              <span class="profile-meta">

                {formatDate(profile.createdAt)} · {profile.aggregations.length} pairs · {profile.digraphCount} digraphs

              </span>

            </div>

            <div class="profile-actions">

              <button class="action-btn" on:click={() => handleExport(profile)}>

                export

              </button>

              <button class="action-btn delete-btn" on:click={() => handleDelete(profile.id)}>

                delete

              </button>

            </div>

          </div>

        {/each}

      </div>

    {/if}

  </div>

</div>

<style>

  .profile-manager {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

  }

  .save-section {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

  }

  .save-row {

    display: flex;

    gap: 0.5rem;

  }

  .name-input {

    flex: 1;

    font-size: 12px;

    padding: 6px 8px;

  }

  .save-btn {

    font-size: 12px;

    padding: 6px 12px;

    white-space: nowrap;

  }

  .save-btn:disabled {

    opacity: 0.3;

    cursor: not-allowed;

  }

  .hint {

    font-size: 11px;

    color: #555;

  }

  .section-header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

  }

  .section-title {

    font-size: 12px;

    color: #888;

    flex: 1;

  }

  .import-btn {

    font-size: 11px;

    padding: 3px 8px;

  }

  .hidden-input {

    display: none;

  }

  .error {

    font-size: 11px;

    color: #ff6b6b;

  }

  .empty-profiles {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 2rem;

    border: 1px dashed #333;

    font-size: 12px;

    color: #555;

  }

  .profiles-list {

    display: flex;

    flex-direction: column;

    border: 1px solid #333;

  }

  .profile-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.6rem 0.75rem;

    border-bottom: 1px solid #333;

    gap: 0.75rem;

  }

  .profile-row:last-child {

    border-bottom: none;

  }

  .profile-info {

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

    min-width: 0;

  }

  .profile-name {

    font-size: 13px;

    font-weight: 700;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .profile-meta {

    font-size: 10px;

    color: #888;

  }

  .profile-actions {

    display: flex;

    gap: 0.35rem;

    flex-shrink: 0;

  }

  .action-btn {

    font-size: 11px;

    padding: 3px 8px;

  }

  .delete-btn {

    border-color: #555;

    color: #888;

  }

  .delete-btn:hover {

    border-color: #ff6b6b;

    color: #ff6b6b;

    opacity: 1;

  }

  @media (max-width: 480px) {

    .profile-row {

      flex-direction: column;

      align-items: flex-start;

      gap: 0.5rem;

    }

    .profile-actions {

      align-self: flex-end;

    }

  }

</style>

import type { Profile } from './types';

const STORAGE_KEY = 'kd_profiles';

export function loadProfiles(): Profile[] {

  try {

    const raw = localStorage.getItem(STORAGE_KEY);

    if (!raw) return [];

    const parsed = JSON.parse(raw);

    if (!Array.isArray(parsed)) return [];

    return parsed.filter(

      (p: any) =>

        p &&

        typeof p.id === 'string' &&

        typeof p.name === 'string' &&

        Array.isArray(p.aggregations),

    );

  } catch {

    return [];

  }

}

export function saveProfile(profile: Profile): void {

  const profiles = loadProfiles();

  profiles.push(profile);

  localStorage.setItem(STORAGE_KEY, JSON.stringify(profiles));

}

export function deleteProfile(id: string): void {

  const profiles = loadProfiles().filter((p) => p.id !== id);

  localStorage.setItem(STORAGE_KEY, JSON.stringify(profiles));

}

export function exportProfile(profile: Profile): void {

  const json = JSON.stringify(profile, null, 2);

  const blob = new Blob([json], { type: 'application/json' });

  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');

  a.href = url;

  a.download = `${profile.name.replace(/[^a-z0-9_-]/gi, '_')}.json`;

  a.click();

  URL.revokeObjectURL(url);

}

export function importProfile(file: File): Promise<Profile> {

  return new Promise((resolve, reject) => {

    const reader = new FileReader();

    reader.onload = () => {

      try {

        const profile = JSON.parse(reader.result as string);

        if (

          !profile ||

          typeof profile.name !== 'string' ||

          !Array.isArray(profile.aggregations)

        ) {

          reject(new Error('Invalid profile format'));

          return;

        }

        // Assign a new ID to avoid collisions

        profile.id = crypto.randomUUID();

        resolve(profile as Profile);

      } catch {

        reject(new Error('Failed to parse profile JSON'));

      }

    };

    reader.onerror = () => reject(new Error('Failed to read file'));

    reader.readAsText(file);

  });

}