<!-- Script tag (simplest) -->
<script src="ark-meta-tags.js"></script>

<!-- Or as ES module -->
<script type="module">
  import ArkMetaTags from './ark-meta-tags.js';
</script>

// CommonJS / Node
const ArkMetaTags = require('./ark-meta-tags');

// 1. Mount
const widget = new ArkMetaTags('#my-div', {
  onChange: data => console.log(data),
});

// 2. Collect structured JSON
const meta = widget.collectData();
// → { court: [{value:'…',note:'…'}], phone: [{values:[…]}] }

// 3. Restore from saved data
widget.loadData(savedMeta);

// 4. Other methods
widget.addTag('court');   // programmatic add
widget.reset();           // clear all
widget.destroy();         // unmount

[
  // text
  { key: 'witness', label: 'Witness', icon: `…`,
    type: 'text', ph: 'Witness name…' },

  // textarea
  { key: 'note', label: 'Internal Note', icon: `…`,
    type: 'textarea', ph: 'Off-record notes…' },

  // select (opts required)
  { key: 'status', label: 'Case Status', icon: `…`,
    type: 'select',
    opts: ['Select…', 'Under investigation', 'FIR registered'] },

  // chiplist — multiple values per instance
  { key: 'phone', label: 'Phone', icon: `…`,
    type: 'chiplist', ph: 'Type number, press Enter…' },

  // keyvalue — field name : value
  { key: 'custom', label: 'Custom Tag', icon: `…`,
    type: 'keyvalue', phKey: 'Field name…', phVal: 'Value…' },

  // dateNote — date picker + always-visible note row
  { key: 'followup', label: 'Follow-up Date', icon: `…`,
    type: 'dateNote', ph: 'What to follow up on…' },
]

// hasNote — appends an "Action / note" textarea row
{ key: 'fir', label: 'FIR No.', icon: `…`,
  type: 'text', ph: 'FIR No. 000/2025…',
  hasNote: true }
// → { value: "FIR No. 047/2025", note: "IPC 302, 307" }

// hasDate — appends a date picker sub-row
{ key: 'officer', label: 'Officer', icon: `…`,
  type: 'text', ph: 'Name, rank…',
  hasDate: true,
  hasNote: true }
// → { value: "SP Rajesh Kumar", date: "2025-05-13", note: "Present at scene" }

{
  key: 'court', label: 'Court / Hearing',
  icon: `<line x1="12" y1="1" x2="12" y2="23"/>…`,
  fields: [
    { name: 'court',   type: 'text',     ph: 'Court name…'         },
    { name: 'date',    type: 'date',     label: 'Hearing date'       },
    { name: 'judge',   type: 'text',     ph: 'Presiding judge…',
                                          label: 'Judge'              },
    { name: 'outcome', type: 'note',     ph: 'What happened…'       },
    { name: 'links',   type: 'chiplist', ph: 'Paste URL, Enter…'    },
    { name: 'verdict', type: 'select',
      opts: ['Select…', 'Pending', 'Convicted', 'Acquitted'] },
  ],
}

// collectData() entry shape:
// { court:'…', date:'2025-05-13', judge:'…', outcome:'…',
//   links:['https://…'], verdict:'Pending' }

const widget = new ArkMetaTags('#host', {
  tagDefs: [
    // Entirely new tag (appended to strip)
    {
      key: 'journalist', label: 'Journalist',
      icon: `<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4z"/>`,
      type: 'text', ph: 'Reporter name & outlet…',
    },
    // Override built-in 'court' with multi-field definition
    {
      key: 'court',
      fields: [
        { name: 'court',  type: 'text', ph: 'Court name…'     },
        { name: 'date',   type: 'date', label: 'Hearing date'  },
        { name: 'note',   type: 'note', ph: 'What happened…'  },
      ],
    },
  ],
  // replaceTagDefs: false,  ← default; set true to skip built-ins
});

const widget = new ArkMetaTags('#host', {
  replaceTagDefs: true,   // ignore all 16 built-in tags
  tagDefs: [
    { key: 'sku',      label: 'SKU',       icon: `…`, type: 'text'     },
    { key: 'colour',   label: 'Colour',    icon: `…`, type: 'chiplist' },
    { key: 'expiry',   label: 'Expiry',    icon: `…`, type: 'dateNote' },
  ],
});

new ArkMetaTags('#host', {
  tagDefs      : [],             // extend / replace built-in tags
  replaceTagDefs: false,         // true = use tagDefs only
  onChange     : meta => {},     // structural-change callback
  sectionTitle : 'Add details', // section-rule label
  hint         : 'Tap to add',  // italic hint below title
  showRule     : true,           // show/hide ornamental divider
  injectStyles : true,           // auto-inject library CSS
});

const w = new ArkMetaTags('#host', { /* options */ });

// Read all entries
const data = w.collectData();
// → { court:[{value,note}], phone:[{values:[…]}], … }

// Restore (clear first, then fill)
w.loadData(data);

// Programmatic add
w.addTag('court');    // adds one instance, same as clicking tag chip

// Clear everything
w.reset();

// Unmount (empties container)
w.destroy();

// Static
console.log(ArkMetaTags.version);          // '1.0.0'
console.log(ArkMetaTags.defaultTagDefs);   // [ {key,label,…}, … ]

const host = document.getElementById('meta-host');
const w    = new ArkMetaTags(host, {
  onChange(data) {
    // Fires on every add / remove / reset
    console.log('onChange:', data);
  },
});

// Or listen via DOM events:

host.addEventListener('ark-meta:add', e => {
  console.log('Added:', e.detail.key, 'iid:', e.detail.iid);
  // e.detail.instance → the ArkMetaTags object
});

host.addEventListener('ark-meta:remove', e => {
  console.log('Removed:', e.detail.key, 'iid:', e.detail.iid);
});

host.addEventListener('ark-meta:change', e => {
  // e.detail.data = full collectData() output
  saveToServer(e.detail.data);
});

// Generate and inspect
const singleCase = ArkTestData.generateCase();
const metaOnly   = ArkTestData.generateMeta();
const tenCases   = ArkTestData.generateCases(10);

// Load random data into any ArkMetaTags widget
widget.loadData(ArkTestData.generateMeta());

// Seed localStorage (used by cases-list.html)
ArkTestData.seedLocalStorage(20);       // append 20
ArkTestData.seedLocalStorage(5, true);  // replace with 5
ArkTestData.clearLocalStorage();

// Console report
ArkTestData.consoleReport(tenCases);

// Use corpus for custom generators
const city  = ArkTestData.rng.pick(ArkTestData.corpus.CITIES);
const phone = ArkTestData.rng.phone();
const name  = ArkTestData.rng.name();

// Integration test: generate → loadData → collectData → verify shapes
function integrationTest(widget) {
  const meta = ArkTestData.generateMeta();
  widget.loadData(meta);                    // fill the widget
  const out  = widget.collectData();         // read it back

  // court entries must have value and note
  if (out.court) {
    out.court.forEach(e => {
      assert('court has value', 'value' in e);
      assert('court has note',  'note'  in e);
    });
  }
  // phone must have values array
  if (out.phone) {
    assert('phone values is array', Array.isArray(out.phone[0].values));
  }
  // custom must have key + value
  if (out.custom) {
    out.custom.forEach(e => {
      assert('custom has key',   'key'   in e);
      assert('custom has value', 'value' in e);
    });
  }
  // followup must have date + note
  if (out.followup) {
    out.followup.forEach(e => {
      assert('followup has date', typeof e.date === 'string');
      assert('followup has note', typeof e.note === 'string');
    });
  }
  // round-trip: loadData then reset should give empty
  widget.reset();
  const empty = widget.collectData();
  assert('reset gives empty object', Object.keys(empty).length === 0);
}