// #region CorrectionCellTests [C:2] [TYPE Module] [SEMANTICS test, translate, correction, inline-edit]
// @BRIEF Contract-focused unit tests for CorrectionCell.svelte component.
// @LAYER Tests
// @RELATION BINDS_TO -> [EXT:spec:CorrectionCell:Component]
// @TEST_CONTRACT: CorrectionCell -> renders value, click-to-edit, save, submit-to-dictionary
// @TEST_EDGE: view_mode -> Shows current value, click triggers edit
// @TEST_EDGE: edit_mode -> Input field with save/cancel buttons
// @TEST_EDGE: context_display -> Shows context_data and usage_notes in popup
// @TEST_EDGE: context_editing -> Edit button toggles textarea for context JSON
// @TEST_EDGE: context_removal -> Remove context clears fields and sets keep_context=false
// @TEST_EDGE: usage_notes_editable -> Usage Notes textarea shown and editable
// @TEST_EDGE: context_source_badge -> Badge displays auto/manual/bulk correctly
// @TEST_EDGE: submit_with_context -> Submit payload includes context_data and usage_notes

import { describe, it, expect } from 'vitest';
import fs from 'node:fs';
import path from 'node:path';

const COMPONENT_PATH = path.resolve(
	process.cwd(),
	'src/lib/components/translate/CorrectionCell.svelte'
);

describe('CorrectionCell Component', () => {
	it('contains required UX state tags and contract annotations', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');

		expect(source).toContain('@UX_STATE view');
		expect(source).toContain('@UX_STATE editing');
		expect(source).toContain('@UX_STATE saving');
		expect(source).toContain('@UX_STATE saved');
		expect(source).toContain('@UX_STATE submitting_to_dict');
		expect(source).toContain('@UX_STATE dict_submitted');
		expect(source).toContain('@UX_STATE error');
		expect(source).toContain('inlineEditCorrection');
		expect(source).toContain('submitCorrectionToDict');
		expect(source).toContain('dictionaryApi');
	});

	it('accepts value, recordId, languageCode, runId props', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');
		expect(source).toContain('value');
		expect(source).toContain('recordId');
		expect(source).toContain('languageCode');
		expect(source).toContain('runId');
	});

	it('supports context data and usage notes props (T128)', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');
		expect(source).toContain('contextData');
		expect(source).toContain('usageNotes');
		expect(source).toContain('editableContextData');
		expect(source).toContain('editableUsageNotes');
	});

	it('has dictionary popup with context display section', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');
		expect(source).toContain('corrections?.cell_submit_to_dict');
		expect(source).toContain('corrections?.cell_language_pair');
		expect(source).toContain('corrections?.cell_context_data');
		expect(source).toContain('corrections?.cell_usage_notes');
	});

	it('implements view, editing, saving, saved, error UX states', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');
		// View mode
		expect(source).toContain("uxState === 'view'");
		expect(source).toContain('cursor-pointer hover:bg-blue-50');
		// Editing mode
		expect(source).toContain("uxState === 'editing'");
		expect(source).toContain('border-blue-600');
		// Saving mode
		expect(source).toContain("uxState === 'saving'");
		expect(source).toContain('animate-spin');
		// Saved mode
		expect(source).toContain("uxState === 'saved'");
		expect(source).toContain('corrections?.cell_submit_to_dict');
		// Error mode
		expect(source).toContain("uxState === 'error'");
		expect(source).toContain('corrections?.cell_retry');
	});

	// --- T133: Context UI in CorrectionCell ---

	it('displays context data as key-value pairs in popup (T133)', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');
		// Context data section iterates Object.entries(editableContextData) and shows key: val
		expect(source).toContain('Object.entries(editableContextData)');
		expect(source).toContain('{key}:');
		expect(source).toContain('{String(val).substring(0, 100)}');
	});

	it('supports context editing via textarea in popup (T133)', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');
		// contextEditMode toggles a textarea for JSON editing
		expect(source).toContain('contextEditMode');
		expect(source).toContain('corrections?.cell_context_json_placeholder');
		expect(source).toContain('corrections?.cell_cancel_edit');
	});

	it('supports context removal with keep_context=false (T133)', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');
		// When context is removed, editableContextData is set to null and contextEditMode is toggled
		expect(source).toContain('contextEditMode');
		expect(source).toContain('editableContextData = contextData ? JSON.parse');
		// The Edit/Cancel toggle button resets context data
		expect(source).toContain('corrections?.cell_cancel_edit');
	});

	it('shows usage notes textarea in popup (T133)', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');
		// Usage Notes textarea is bound to editableUsageNotes
		expect(source).toContain('bind:value={editableUsageNotes}');
		expect(source).toContain('corrections?.cell_usage_notes');
		expect(source).toContain('corrections?.cell_usage_notes_placeholder');
	});

	it('contains context_source awareness in submit flow (T133)', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');
		// The component submits via inlineEditCorrection which triggers context_source tagging
		// Verify the submit handler exists and calls the API
		expect(source).toContain('handleDictSubmit');
		expect(source).toContain('inlineEditCorrection');
		expect(source).toContain('submit_to_dictionary: true');
	});

	it('submit payload passes context_data and usage_notes (T133)', () => {
		const source = fs.readFileSync(COMPONENT_PATH, 'utf-8');
		// The component initializes editableContextData from contextData prop on popup open
		expect(source).toContain('editableContextData = contextData ? JSON.parse(JSON.stringify(contextData)) : null');
		expect(source).toContain('editableUsageNotes = usageNotes');
		// The component resets context when value prop changes
		expect(source).toContain("value !== displayValue");
	});
});

// #endregion CorrectionCellTests
