/* 業務OS — Human-step artifact preview modals */
const { useEffect } = React;

const ARTIFACT_SYSTEM = {
  outlook: { name: 'Outlook', icon: 'mail', color: 'var(--info)', bg: 'rgba(46,125,214,.12)' },
  excel: { name: 'Excel', icon: 'file-spreadsheet', color: '#217346', bg: 'rgba(33,115,70,.1)' },
  salesforce: { name: 'Salesforce', icon: 'database', color: 'var(--success)', bg: 'rgba(34,139,34,.1)' },
  document: { name: 'ドキュメント', icon: 'file-text', color: 'var(--stage-s0)', bg: 'rgba(91,95,199,.1)' },
  teams: { name: 'Teams', icon: 'users', color: '#6264A7', bg: 'rgba(98,100,167,.1)' },
};

function ArtifactEmailBody({ data }) {
  return (
    <div style={{ fontSize: 12, color: 'var(--text-1)', lineHeight: 1.65 }}>
      {data.draft && (
        <span style={{
          display: 'inline-block', fontSize: 9, fontWeight: 600, padding: '2px 8px', borderRadius: 3,
          background: 'var(--warning-bg)', color: 'var(--warning)', marginBottom: 12,
        }}>下書き</span>
      )}
      <div style={{ marginBottom: 8 }}>
        <div style={{ fontSize: 10, color: 'var(--text-3)', marginBottom: 2 }}>差出人</div>
        <div style={{ fontWeight: 500 }}>{data.from}</div>
      </div>
      <div style={{ marginBottom: 8 }}>
        <div style={{ fontSize: 10, color: 'var(--text-3)', marginBottom: 2 }}>宛先</div>
        <div>{data.to}</div>
        {data.cc && <div style={{ fontSize: 10, color: 'var(--text-3)', marginTop: 2 }}>Cc: {data.cc}</div>}
      </div>
      <div style={{ marginBottom: 12, paddingBottom: 12, borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ fontSize: 10, color: 'var(--text-3)', marginBottom: 2 }}>件名</div>
        <div style={{ fontWeight: 600, color: 'var(--text-0)' }}>{data.subject}</div>
      </div>
      <div style={{ whiteSpace: 'pre-wrap' }}>{data.body}</div>
    </div>
  );
}

function ArtifactSpreadsheetBody({ data }) {
  return (
    <div style={{ overflowX: 'auto' }}>
      <div style={{ fontSize: 10, color: 'var(--text-3)', marginBottom: 8, fontFamily: 'var(--font-mono)' }}>
        シート: {data.sheetName}
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 11 }}>
        <thead>
          <tr>
            {data.headers.map((h, i) => (
              <th key={i} style={{
                padding: '6px 10px', textAlign: 'left', fontWeight: 600, fontSize: 10,
                background: '#217346', color: '#fff', border: '1px solid #1a5c38',
              }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.rows.map((row, ri) => (
            <tr key={ri} style={{ background: ri === data.rows.length - 1 ? 'rgba(33,115,70,.08)' : ri % 2 ? 'var(--bg-3)' : 'var(--surface)' }}>
              {row.map((cell, ci) => (
                <td key={ci} style={{
                  padding: '6px 10px', border: '1px solid var(--border-subtle)',
                  fontWeight: ri === data.rows.length - 1 && ci >= 3 ? 600 : 400,
                  fontFamily: ci >= 2 ? 'var(--font-mono)' : 'inherit',
                  fontSize: ci >= 2 ? 10 : 11,
                }}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function ArtifactSalesforceTableBody({ data }) {
  return (
    <div style={{ overflowX: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 11 }}>
        <thead>
          <tr>
            {data.columns.map((col, i) => (
              <th key={i} style={{
                padding: '7px 10px', textAlign: 'left', fontSize: 9, fontWeight: 600,
                letterSpacing: '.04em', textTransform: 'uppercase',
                color: 'var(--text-3)', background: 'var(--bg-3)', borderBottom: '2px solid var(--success)',
              }}>{col}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.rows.map((row, ri) => (
            <tr key={ri} style={{
              background: row.highlight ? 'rgba(34,139,34,.06)' : 'transparent',
              borderLeft: row.highlight ? '3px solid var(--success)' : '3px solid transparent',
            }}>
              <td style={{ padding: '8px 10px', borderBottom: '1px solid var(--border-subtle)', fontWeight: 600 }}>{row.client}</td>
              <td style={{ padding: '8px 10px', borderBottom: '1px solid var(--border-subtle)' }}>{row.project}</td>
              <td style={{ padding: '8px 10px', borderBottom: '1px solid var(--border-subtle)', fontFamily: 'var(--font-mono)', fontSize: 10 }}>
                <span style={{ color: 'var(--text-3)' }}>{row.stageFrom}</span>
                <span style={{ margin: '0 4px', color: 'var(--success)' }}>→</span>
                <span style={{ fontWeight: 600, color: 'var(--success)' }}>{row.stageTo}</span>
              </td>
              <td style={{ padding: '8px 10px', borderBottom: '1px solid var(--border-subtle)', fontFamily: 'var(--font-mono)', fontSize: 10 }}>{row.prob}</td>
              <td style={{ padding: '8px 10px', borderBottom: '1px solid var(--border-subtle)', fontSize: 10 }}>{row.nextAction}</td>
              <td style={{ padding: '8px 10px', borderBottom: '1px solid var(--border-subtle)', fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-3)' }}>{row.updated}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function ArtifactSalesforceRecordBody({ data }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
      {data.fields.map((f, i) => (
        <div key={i} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16,
          padding: '10px 0', borderBottom: i < data.fields.length - 1 ? '1px solid var(--border-subtle)' : 'none',
        }}>
          <span style={{ fontSize: 10, color: 'var(--text-3)', flexShrink: 0, minWidth: 100 }}>{f.label}</span>
          <span style={{
            fontSize: 12, fontWeight: f.alert ? 600 : 500, textAlign: 'right',
            color: f.alert ? 'var(--danger)' : 'var(--text-0)',
            fontFamily: f.label.includes('金額') || f.label.includes('確度') ? 'var(--font-mono)' : 'inherit',
          }}>{f.value}</span>
        </div>
      ))}
    </div>
  );
}

function ArtifactDocumentBody({ data }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {data.sections.map((sec, si) => (
        <div key={si}>
          <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--text-2)', marginBottom: 8 }}>
            {sec.heading}
          </div>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 11, color: 'var(--text-1)', lineHeight: 1.7 }}>
            {sec.lines.map((line, li) => (
              <li key={li} style={{ marginBottom: 4 }}>{line}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

function ArtifactModalBody({ preview }) {
  if (!preview) return null;
  switch (preview.type) {
    case 'email': return <ArtifactEmailBody data={preview} />;
    case 'spreadsheet': return <ArtifactSpreadsheetBody data={preview} />;
    case 'salesforce_table': return <ArtifactSalesforceTableBody data={preview} />;
    case 'salesforce_record': return <ArtifactSalesforceRecordBody data={preview} />;
    case 'document': return <ArtifactDocumentBody data={preview} />;
    default: return <div style={{ fontSize: 11, color: 'var(--text-3)' }}>プレビューを表示できません</div>;
  }
}

function ArtifactModal({ artifactId, artifactMeta, onClose }) {
  const previews = window.GYOMU.artifactPreviews || {};
  const preview = artifactId ? previews[artifactId] : null;
  const systemKey = artifactMeta && artifactMeta.system;
  const sys = ARTIFACT_SYSTEM[systemKey] || ARTIFACT_SYSTEM.document;

  useEffect(() => {
    if (!artifactId) return undefined;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [artifactId, onClose]);

  if (!artifactId || !preview) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 10000,
        background: 'rgba(0,0,0,.45)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24,
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          width: '100%', maxWidth: preview.type === 'spreadsheet' ? 720 : 560,
          maxHeight: '85vh', display: 'flex', flexDirection: 'column',
          background: 'var(--surface)', borderRadius: 8,
          boxShadow: '0 12px 40px rgba(0,0,0,.2)', border: '1px solid var(--border)',
          overflow: 'hidden',
        }}
      >
        <div style={{
          padding: '12px 16px', borderBottom: '1px solid var(--border-subtle)',
          background: sys.bg, display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <Icon name={sys.icon} size={18} style={{ color: sys.color }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 10, fontWeight: 600, color: sys.color, letterSpacing: '.04em' }}>{sys.name}</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {preview.title}
            </div>
          </div>
          <div
            onClick={onClose}
            style={{ cursor: 'pointer', padding: 4, borderRadius: 4, color: 'var(--text-3)' }}
            onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-3)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
          >
            <Icon name="x" size={18} />
          </div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: '16px 20px' }}>
          <ArtifactModalBody preview={preview} />
        </div>
        <div style={{
          padding: '10px 16px', borderTop: '1px solid var(--border-subtle)',
          display: 'flex', justifyContent: 'flex-end', gap: 8, background: 'var(--bg-3)',
        }}>
          <Btn small onClick={onClose}>閉じる</Btn>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 10, fontWeight: 600,
            color: sys.color, cursor: 'pointer', padding: '4px 10px', borderRadius: 4,
            border: '1px solid ' + sys.color, background: 'var(--surface)',
          }}>
            <Icon name="external-link" size={11} />
            {preview.openLabel || (sys.name + ' で開く')}
          </span>
        </div>
      </div>
    </div>
  );
}

window.ArtifactModal = ArtifactModal;
window.ARTIFACT_SYSTEM = ARTIFACT_SYSTEM;