import { Input, Tooltip } from 'antd';
import type { DocumentType, StatementHeaderOut } from '../../types/api';
import { type HeaderFieldKey, headerFields } from './headerFields';
import { formTitle, formatReportDate } from './reviewView';

export type HeaderDraft = Partial<Record<HeaderFieldKey, string>>;

type Props = {
	header: StatementHeaderOut;
	documentType: DocumentType;
	editing: boolean;
	draft: HeaderDraft;
	onDraftChange: (field: HeaderFieldKey, text: string) => void;
};

const ATTENTION_BG = '#fff7e6';
const MODIFIED_BG = '#e6f4ff';
const PLACEHOLDER: Record<HeaderFieldKey, string> = { inn: 'ИНН', report_date: 'ГГГГ-ММ-ДД', units: 'тыс. руб.' };
const cell = { border: '1px solid #d0d5dd', padding: '4px 10px' };

function fieldBackground(modified: boolean, attention: boolean): string | undefined {
	if (modified) return MODIFIED_BG;
	return attention ? ATTENTION_BG : undefined;
}

/**
 * Шапка формы как в старом АРМ (PDFResultViewer): справа компактная таблица ИНН / Дата отчёта / Единица измерения —
 * ровно то, что распознавание извлекает надёжно; дальше заголовок формы. Реквизиты бумажной формы из макета [41]
 * (ОКПО, ОКОПФ, ОКФС, адрес) распознавание не отдаёт (arm-scan-gateway#15) — пустые рамки не рисуем.
 */
export function StatementHeaderBlock({ header, documentType, editing, draft, onDraftChange }: Props) {
	const reportDate = formatReportDate(header.report_date.value);
	return (
		<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
			<table style={{ alignSelf: 'flex-end', borderCollapse: 'collapse', fontSize: 13 }}>
				<tbody>
					{headerFields(header).map((r) => (
						<tr key={r.field}>
							<td style={{ ...cell, color: '#475467' }}>{r.label}</td>
							<td
								style={{
									...cell,
									fontWeight: 600,
									minWidth: 160,
									background: fieldBackground(r.modified, r.attention),
								}}>
								{editing ? (
									<Input
										size='small'
										placeholder={PLACEHOLDER[r.field]}
										value={draft[r.field] ?? r.raw ?? ''}
										onChange={(e) => onDraftChange(r.field, e.target.value)}
									/>
								) : (
									<Tooltip title={r.tip}>{r.text}</Tooltip>
								)}
							</td>
						</tr>
					))}
				</tbody>
			</table>
			<div style={{ textAlign: 'center' }}>
				<div style={{ fontSize: 18, fontWeight: 600 }}>{formTitle(documentType)}</div>
				{reportDate && <div style={{ fontWeight: 500 }}>на {reportDate}</div>}
			</div>
		</div>
	);
}