/// <reference types="chrome-types" />
// or for @types/chrome:
/// <reference types="chrome" />

// This should compile without errors
chrome.runtime.onInstalled.addListener((details) => {
  // 'details' is typed as chrome.runtime.InstalledDetails
  console.log(`Installed: ${details.reason}`);
});

// This should produce a type error
chrome.runtime.onInstalled.addListener((details) => {
  details.nonExistentProperty; // Error: Property does not exist
});

// src/shared/messages.ts

/** All possible message types in the extension */
export type MessageType =
  | 'FETCH_DATA'
  | 'UPDATE_SETTINGS'
  | 'CONTENT_EXTRACTED'
  | 'TAB_ACTIVATED'
  | 'BADGE_UPDATE';

/** Base message shape */
interface BaseMessage<T extends MessageType, P = void> {
  type: T;
  payload: P;
  timestamp: number;
}

/** Message payloads by type */
export type FetchDataMessage = BaseMessage<'FETCH_DATA', {
  url: string;
  options?: RequestInit;
}>;

export type UpdateSettingsMessage = BaseMessage<'UPDATE_SETTINGS', {
  theme: 'light' | 'dark';
  notifications: boolean;
}>;

export type ContentExtractedMessage = BaseMessage<'CONTENT_EXTRACTED', {
  title: string;
  text: string;
  url: string;
}>;

export type TabActivatedMessage = BaseMessage<'TAB_ACTIVATED', {
  tabId: number;
  windowId: number;
}>;

export type BadgeUpdateMessage = BaseMessage<'BADGE_UPDATE', {
  count: number;
  color?: string;
}>;

/** Union of all messages */
export type ExtensionMessage =
  | FetchDataMessage
  | UpdateSettingsMessage
  | ContentExtractedMessage
  | TabActivatedMessage
  | BadgeUpdateMessage;

/** Response types mapped to message types */
export type MessageResponseMap = {
  FETCH_DATA: { data: unknown; status: number };
  UPDATE_SETTINGS: { success: boolean };
  CONTENT_EXTRACTED: { saved: boolean; id: string };
  TAB_ACTIVATED: void;
  BADGE_UPDATE: void;
};

// src/shared/storage.ts

/** Shape of data in chrome.storage.local */
export interface LocalStorageSchema {
  settings: {
    theme: 'light' | 'dark';
    notifications: boolean;
    language: string;
  };
  cache: {
    lastFetch: number;
    data: Record<string, unknown>;
  };
  history: Array<{
    url: string;
    visitedAt: number;
    title: string;
  }>;
}

/** Shape of data in chrome.storage.sync */
export interface SyncStorageSchema {
  preferences: {
    fontSize: number;
    showBadge: boolean;
  };
  savedItems: string[];
}

// Before: messy relative imports
import { ExtensionMessage } from '../../../shared/messages';
import { LocalStorageSchema } from '../../../shared/storage';

// After: clean alias imports
import { ExtensionMessage } from '@shared/messages';
import { LocalStorageSchema } from '@shared/storage';

// vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@shared': resolve(__dirname, 'src/shared'),
      '@background': resolve(__dirname, 'src/background'),
      '@content': resolve(__dirname, 'src/content'),
      '@popup': resolve(__dirname, 'src/popup'),
    },
  },
});

// src/types/chrome-extensions.d.ts

/**
 * Ambient declarations for Chrome APIs not yet in published types.
 * Remove entries as official types catch up.
 */

declare namespace chrome.sidePanel {
  interface SidePanelOptions {
    tabId?: number;
    path?: string;
    enabled?: boolean;
  }

  function setOptions(options: SidePanelOptions): Promise<void>;
  function getOptions(options: { tabId?: number }): Promise<SidePanelOptions>;
  function open(options: { tabId?: number; windowId?: number }): Promise<void>;
  function setPanelBehavior(
    behavior: { openPanelOnActionClick: boolean }
  ): Promise<void>;
}

declare namespace chrome.readingList {
  interface ReadingListEntry {
    url: string;
    title: string;
    hasBeenRead: boolean;
    lastUpdateTime: number;
    creationTime: number;
  }

  function addEntry(entry: {
    url: string;
    title: string;
    hasBeenRead?: boolean;
  }): Promise<void>;
  function removeEntry(info: { url: string }): Promise<void>;
  function query(info: Partial<ReadingListEntry>): Promise<ReadingListEntry[]>;
  function updateEntry(info: {
    url: string;
    title?: string;
    hasBeenRead?: boolean;
  }): Promise<void>;
}

// Without strictNullChecks -- silent bug
const tab = await chrome.tabs.get(tabId);
console.log(tab.url.length); // Runtime crash if tab.url is undefined

// With strictNullChecks -- caught at compile time
const tab = await chrome.tabs.get(tabId);
console.log(tab.url?.length); // Must handle undefined

const data = await chrome.storage.local.get('settings');
// Without: data['settings'] is typed as any
// With: data['settings'] is typed as unknown | undefined -- must check

// With exactOptionalPropertyTypes
interface NotificationOptions {
  title: string;
  iconUrl?: string; // means "string if present", NOT "string | undefined"
}

// Error: undefined is not assignable
const opts: NotificationOptions = { title: 'Hi', iconUrl: undefined };

// Correct: omit the property
const opts: NotificationOptions = { title: 'Hi' };

// vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    // Output to dist/ for loading as unpacked extension
    outDir: 'dist',
    emptyOutDir: true,

    rollupOptions: {
      input: {
        // Each entry point becomes a separate bundle
        background: resolve(__dirname, 'src/background/service-worker.ts'),
        content: resolve(__dirname, 'src/content/injector.ts'),
        popup: resolve(__dirname, 'src/popup/popup.html'),
        options: resolve(__dirname, 'src/options/options.html'),
      },
      output: {
        // Predictable file names (no hashes) for manifest.json references
        entryFileNames: '[name]/index.js',
        chunkFileNames: 'shared/[name].js',
        assetFileNames: 'assets/[name].[ext]',
      },
    },

    // No minification during development for easier debugging
    minify: process.env.NODE_ENV === 'production',
    sourcemap: process.env.NODE_ENV !== 'production' ? 'inline' : false,

    // Target Chrome's V8 directly
    target: 'esnext',
  },

  resolve: {
    alias: {
      '@shared': resolve(__dirname, 'src/shared'),
      '@background': resolve(__dirname, 'src/background'),
      '@content': resolve(__dirname, 'src/content'),
      '@popup': resolve(__dirname, 'src/popup'),
    },
  },
});

// vite.config.ts with CRXJS
import { defineConfig } from 'vite';
import { crx } from '@crxjs/vite-plugin';
import manifest from './manifest.json';

export default defineConfig({
  plugins: [crx({ manifest })],
  build: {
    target: 'esnext',
  },
});

// Wrong: DOM not available in service worker
document.getElementById('app'); // Error with WebWorker lib

// Right: use message passing to have content script interact with DOM
chrome.tabs.sendMessage(tabId, { type: 'GET_ELEMENT' });

// Wrong
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  fetchData().then((data) => sendResponse(data));
  // Implicitly returns void, but Chrome expects true for async
});

// Right
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  fetchData().then((data) => sendResponse(data));
  return true; // Keep the message channel open
});

// Wrong
const reason: string = 'install';
if (details.reason === reason) { } // Works but loses type narrowing

// Right
const reason: chrome.runtime.OnInstalledReason = 'install';
if (details.reason === reason) { } // Proper literal type

// Old callback style (still works but types may conflict)
chrome.storage.local.get(['key'], (result) => { });

// Modern async/await style
const result = await chrome.storage.local.get(['key']);

import type { ExtensionMessage, MessageType } from '@shared/messages';

function isMessageType<T extends MessageType>(
  message: ExtensionMessage,
  type: T
): message is Extract<ExtensionMessage, { type: T }> {
  return message.type === type;
}

// Usage in message listener
chrome.runtime.onMessage.addListener((message: ExtensionMessage, sender, sendResponse) => {
  if (isMessageType(message, 'FETCH_DATA')) {
    // message.payload is typed as { url: string; options?: RequestInit }
    fetch(message.payload.url, message.payload.options)
      .then((res) => res.json())
      .then((data) => sendResponse({ data, status: 200 }));
    return true;
  }

  if (isMessageType(message, 'UPDATE_SETTINGS')) {
    // message.payload is typed as { theme: 'light' | 'dark'; notifications: boolean }
    applySettings(message.payload);
    sendResponse({ success: true });
  }
});

function handleMessage(message: ExtensionMessage): void {
  switch (message.type) {
    case 'FETCH_DATA':
      handleFetchData(message.payload);
      break;
    case 'UPDATE_SETTINGS':
      handleUpdateSettings(message.payload);
      break;
    case 'CONTENT_EXTRACTED':
      handleContentExtracted(message.payload);
      break;
    case 'TAB_ACTIVATED':
      handleTabActivated(message.payload);
      break;
    case 'BADGE_UPDATE':
      handleBadgeUpdate(message.payload);
      break;
    default:
      // If you add a new MessageType but forget to handle it here,
      // TypeScript will report an error on this line
      const _exhaustive: never = message;
      throw new Error(`Unhandled message type: ${(_exhaustive as ExtensionMessage).type}`);
  }
}

function isValidExtensionMessage(value: unknown): value is ExtensionMessage {
  if (typeof value !== 'object' || value === null) return false;
  const obj = value as Record<string, unknown>;

  if (typeof obj.type !== 'string') return false;
  if (typeof obj.timestamp !== 'number') return false;

  const validTypes: MessageType[] = [
    'FETCH_DATA', 'UPDATE_SETTINGS', 'CONTENT_EXTRACTED',
    'TAB_ACTIVATED', 'BADGE_UPDATE',
  ];

  return validTypes.includes(obj.type as MessageType);
}

// src/shared/typed-storage.ts
import type { LocalStorageSchema, SyncStorageSchema } from './storage';

type StorageArea = 'local' | 'sync';
type SchemaFor<A extends StorageArea> = A extends 'local'
  ? LocalStorageSchema
  : SyncStorageSchema;

class TypedStorage<A extends StorageArea> {
  private area: chrome.storage.StorageArea;

  constructor(area: A) {
    this.area = area === 'local' ? chrome.storage.local : chrome.storage.sync;
  }

  async get<K extends keyof SchemaFor<A>>(
    key: K
  ): Promise<SchemaFor<A>[K] | undefined> {
    const result = await this.area.get(key as string);
    return result[key as string] as SchemaFor<A>[K] | undefined;
  }

  async set<K extends keyof SchemaFor<A>>(
    key: K,
    value: SchemaFor<A>[K]
  ): Promise<void> {
    await this.area.set({ [key as string]: value });
  }

  async remove<K extends keyof SchemaFor<A>>(key: K): Promise<void> {
    await this.area.remove(key as string);
  }

  onChange<K extends keyof SchemaFor<A>>(
    key: K,
    callback: (newValue: SchemaFor<A>[K], oldValue: SchemaFor<A>[K]) => void
  ): void {
    chrome.storage.onChanged.addListener((changes, areaName) => {
      if (areaName !== (this.area === chrome.storage.local ? 'local' : 'sync')) {
        return;
      }
      const change = changes[key as string];
      if (change) {
        callback(
          change.newValue as SchemaFor<A>[K],
          change.oldValue as SchemaFor<A>[K]
        );
      }
    });
  }
}

// Export typed instances
export const localStorage = new TypedStorage('local');
export const syncStorage = new TypedStorage('sync');

import { localStorage } from '@shared/typed-storage';

// Fully typed -- key must be keyof LocalStorageSchema, value matches
await localStorage.set('settings', {
  theme: 'dark',
  notifications: true,
  language: 'en',
});

// Type error: 'invalid' is not a valid key
await localStorage.get('invalid');

// Type error: wrong value shape
await localStorage.set('settings', { wrong: true });

// src/shared/typed-messaging.ts
import type {
  ExtensionMessage,
  MessageType,
  MessageResponseMap,
} from './messages';

/** Send a typed message and get a typed response */
export async function sendMessage<T extends MessageType>(
  message: Extract<ExtensionMessage, { type: T }>
): Promise<MessageResponseMap[T]> {
  return chrome.runtime.sendMessage(message);
}

/** Send a typed message to a specific tab */
export async function sendTabMessage<T extends MessageType>(
  tabId: number,
  message: Extract<ExtensionMessage, { type: T }>
): Promise<MessageResponseMap[T]> {
  return chrome.tabs.sendMessage(tabId, message);
}

/** Helper to create a properly typed message */
export function createMessage<T extends MessageType>(
  type: T,
  payload: Extract<ExtensionMessage, { type: T }>['payload']
): Extract<ExtensionMessage, { type: T }> {
  return {
    type,
    payload,
    timestamp: Date.now(),
  } as Extract<ExtensionMessage, { type: T }>;
}

import { sendMessage, createMessage } from '@shared/typed-messaging';

// Type-safe message creation and sending
const message = createMessage('FETCH_DATA', {
  url: 'https://api.example.com/data',
});

const response = await sendMessage(message);
// response is typed as { data: unknown; status: number }

// Type error: wrong payload for this message type
const bad = createMessage('FETCH_DATA', { theme: 'dark' });

// src/shared/typed-events.ts

type EventMap = {
  settingsChanged: { key: string; value: unknown };
  dataFetched: { url: string; data: unknown };
  error: { code: string; message: string };
};

class TypedEventEmitter {
  private listeners = new Map<string, Set<Function>>();

  on<K extends keyof EventMap>(
    event: K,
    handler: (data: EventMap[K]) => void
  ): () => void {
    const handlers = this.listeners.get(event as string) ?? new Set();
    handlers.add(handler);
    this.listeners.set(event as string, handlers);

    // Return unsubscribe function
    return () => handlers.delete(handler);
  }

  emit<K extends keyof EventMap>(event: K, data: EventMap[K]): void {
    const handlers = this.listeners.get(event as string);
    if (handlers) {
      handlers.forEach((handler) => handler(data));
    }
  }
}

export const events = new TypedEventEmitter();