import { InventoryTemplateConfig } from '../helpers/inventoryImportTemplates';

type Props = {
  config: InventoryTemplateConfig;
};

const InventoryImportGuidance = ({ config }: Props) => {
  const exampleCsvHeader = config.columns.join(',');
  const exampleCsvRow = config.columns
    .map((column) => config.exampleRow.find((entry) => entry.column === column)?.value || '')
    .join(',');

  return (
    <div className='mb-4 rounded-2xl border border-dashed border-slate-300 px-4 py-4 text-sm text-slate-600 dark:border-white/10 dark:text-slate-300'>
      <p className='font-semibold'>Use the import template for this workflow</p>
      <p className='mt-1'>{config.workflowHint}</p>
      <p className='mt-1'>{config.referenceHint}</p>
      <p className='mt-2'>
        <span className='font-semibold'>Allowed columns:</span> {config.columns.join(', ')}
      </p>
      <p className='mt-1'>
        <span className='font-semibold'>Required relationship columns:</span>{' '}
        {config.requiredColumns.length ? config.requiredColumns.join(', ') : 'None'}
      </p>

      {config.exampleReferences.length > 0 && (
        <div className='mt-3'>
          <p className='font-semibold'>Reference examples</p>
          <ul className='mt-2 space-y-1'>
            {config.exampleReferences.map((example) => (
              <li key={example.column} className='leading-5'>
                <span className='font-semibold'>{example.column}:</span>{' '}
                <code className='rounded bg-slate-100 px-1 py-0.5 text-xs text-slate-800 dark:bg-slate-900 dark:text-slate-100'>
                  {example.value}
                </code>
                {example.note ? <span className='ml-1'>{example.note}</span> : null}
              </li>
            ))}
          </ul>
        </div>
      )}

      <div className='mt-3'>
        <p className='font-semibold'>Example row</p>
        <p className='mt-1 text-xs text-slate-500 dark:text-slate-400'>
          Replace these example values with real records from your workspace before uploading.
        </p>
        <pre className='mt-2 overflow-x-auto rounded-xl bg-slate-100 p-3 text-xs leading-5 text-slate-800 dark:bg-slate-900 dark:text-slate-100'>
          {`${exampleCsvHeader}
${exampleCsvRow}`}
        </pre>
      </div>
    </div>
  );
};

export default InventoryImportGuidance;
