/* global React */
// ============================================
// Intake view — clerk uploads & registers a new doc
// ============================================

function IntakeView() {
  const { addDoc, toast, setActiveView, openDoc, docs } = useStore();

  // Generate next doc number
  const nextNum = useMemo(() => {
    const nums = docs.map(d => {
      const m = d.docNumber.match(/^68-(\d+)$/);
      return m ? parseInt(m[1]) : 0;
    });
    const next = Math.max(...nums, 0) + 1;
    return `68-${String(next).padStart(3, '0')}`;
  }, [docs]);

  const [form, setForm] = useState({
    docNumber: nextNum,
    refNumber: '',
    receivedDate: new Date().toISOString().slice(0, 10),
    docDate: new Date(Date.now() - 2 * 86400000).toISOString().slice(0, 10),
    subject: '',
    from: '',
    fromShort: '',
    urgency: 'normal',
    clerkNote: 'เรียน ท่าน ผอ. โปรดพิจารณาเกษียณหนังสือเพื่อมอบหมายผู้รับผิดชอบดำเนินการต่อไป',
  });
  const [file, setFile] = useState(null);
  const [dragOver, setDragOver] = useState(false);
  const [customOrg, setCustomOrg] = useState(false); // true = พิมพ์ชื่อหน่วยงานเอง
  const [attachments, setAttachments] = useState([]); // เอกสารแนบเพิ่มเติม (ไม่บังคับ)

  const addAttachments = (fileList) => {
    const arr = Array.from(fileList || []);
    if (arr.length) setAttachments(prev => [...prev, ...arr]);
  };
  const removeAttachment = (i) => setAttachments(prev => prev.filter((_, idx) => idx !== i));
  const fileExt = (name) => ((name || '').split('.').pop() || 'FILE').toUpperCase().slice(0, 4);

  const fromOptions = [
    { full: 'สำนักงานเขตพื้นที่การศึกษาประถมศึกษาบุรีรัมย์ เขต 1', short: 'สพป.บุรีรัมย์ เขต 1' },
    { full: 'สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน', short: 'สพฐ.' },
    { full: 'เทศบาลตำบลปราสาท', short: 'ทต.ปราสาท' },
    { full: 'โรงพยาบาลส่งเสริมสุขภาพตำบลปราสาท', short: 'รพ.สต.ปราสาท' },
    { full: 'อำเภอบ้านด่าน จังหวัดบุรีรัมย์', short: 'อ.บ้านด่าน' },
  ];

  const update = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.subject || !form.from) {
      toast('กรอกข้อมูลให้ครบ — เรื่อง และหน่วยงานต้นทาง', 'amber');
      return;
    }
    if (!file) {
      toast('กรุณาอัปโหลด PDF ก่อน', 'amber');
      return;
    }
    const id = `d_${Date.now()}`;
    const doc = {
      id,
      docNumber: form.docNumber,
      refNumber: form.refNumber || 'ศธ -',
      receivedDate: new Date(form.receivedDate).toISOString(),
      docDate: new Date(form.docDate).toISOString(),
      subject: form.subject,
      from: form.from,
      fromShort: form.fromShort || form.from.slice(0, 16),
      urgency: form.urgency,
      clerkNote: form.clerkNote,
      directorNote: '',
      status: 'pending_director',
      assignedTo: [],
      dueDate: null,
      createdAt: new Date().toISOString(),
    };
    addDoc(doc, file, attachments);
    toast(`✓ ออกเลขรับ ${form.docNumber} และส่งให้ ผอ. แล้ว`);
    setTimeout(() => {
      openDoc(id);
      setActiveView('inbox');
    }, 200);
  };

  const handleFile = (f) => {
    if (!f) return;
    if (!/pdf/i.test(f.type) && !/\.pdf$/i.test(f.name)) {
      toast('รองรับเฉพาะไฟล์ PDF เท่านั้น', 'amber');
      return;
    }
    setFile(f);
  };

  const onDrop = (e) => {
    e.preventDefault();
    setDragOver(false);
    handleFile(e.dataTransfer.files[0]);
  };

  return React.createElement('div', { className: 'page', style: { maxWidth: 980 } },
    React.createElement('div', { className: 'page__head' },
      React.createElement('div', { className: 'page__title' },
        React.createElement('h1', null, 'ออกเลขรับใหม่'),
        React.createElement('p', null, 'อัปโหลด PDF หนังสือที่ได้รับ จากนั้นกรอกข้อมูลและออกเลขรับเพื่อส่งให้ ผอ. เกษียณ'),
      ),
    ),

    React.createElement('form', { onSubmit, className: 'intake-grid' },

      // Left: form
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },

        // 1) File upload
        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card__head' },
            React.createElement('h3', null, '1. อัปโหลดไฟล์ PDF'),
            React.createElement('span', { style: { fontSize: 12, color: 'var(--ink-3)' } }, 'รองรับสูงสุด 25 MB'),
          ),
          React.createElement('div', { className: 'card__body' },
            !file
              ? React.createElement('label', {
                className: `dropzone ${dragOver ? 'dragover' : ''}`,
                onDragOver: (e) => { e.preventDefault(); setDragOver(true); },
                onDragLeave: () => setDragOver(false),
                onDrop,
              },
                React.createElement('div', { className: 'dropzone__icon' }, '📄'),
                React.createElement('div', { className: 'dropzone__title' }, 'ลากไฟล์ PDF มาวางที่นี่'),
                React.createElement('div', { className: 'dropzone__hint' }, 'หรือคลิกเพื่อเลือกไฟล์จากเครื่อง'),
                React.createElement('input', {
                  type: 'file', accept: 'application/pdf,.pdf',
                  style: { display: 'none' },
                  onChange: e => handleFile(e.target.files[0]),
                }),
              )
              : React.createElement('div', { className: 'uploaded-file' },
                React.createElement('div', { className: 'ico' }, 'PDF'),
                React.createElement('div', { className: 'meta' },
                  React.createElement('div', { className: 'name' }, file.name),
                  React.createElement('div', { className: 'size' }, (file.size / 1024).toFixed(1) + ' KB · ', formatThaiDate(new Date().toISOString())),
                ),
                React.createElement('button', { type: 'button', className: 'btn btn--ghost btn--sm', onClick: () => setFile(null) },
                  React.createElement(Icon, { name: 'x', size: 13 }),
                  'ลบ'
                ),
              ),

            // เอกสารแนบเพิ่มเติม (ไม่บังคับ)
            React.createElement('div', { style: { marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--line)' } },
              React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 } },
                React.createElement('div', { style: { fontSize: 13.5, fontWeight: 600 } }, 'เอกสารแนบเพิ่มเติม ',
                  React.createElement('span', { style: { fontSize: 12, color: 'var(--ink-3)', fontWeight: 400 } }, '(ไม่บังคับ)')),
                React.createElement('label', { className: 'btn btn--ghost btn--sm', style: { cursor: 'pointer' } },
                  React.createElement(Icon, { name: 'plus', size: 13 }), 'เพิ่มไฟล์แนบ',
                  React.createElement('input', { type: 'file', multiple: true, style: { display: 'none' }, onChange: e => { addAttachments(e.target.files); e.target.value = ''; } }),
                ),
              ),
              attachments.length === 0
                ? React.createElement('div', { className: 'hint' }, 'แนบไฟล์ประกอบได้ เช่น สิ่งที่ส่งมาด้วย/เอกสารแนบท้าย (PDF, รูปภาพ, Word ฯลฯ) — มีหรือไม่มีก็ได้')
                : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
                  attachments.map((f, i) => React.createElement('div', { key: i, className: 'uploaded-file', style: { padding: '8px 12px' } },
                    React.createElement('div', { className: 'ico', style: { width: 30, height: 38, fontSize: 9 } }, fileExt(f.name)),
                    React.createElement('div', { className: 'meta' },
                      React.createElement('div', { className: 'name', style: { fontSize: 13 } }, f.name),
                      React.createElement('div', { className: 'size' }, (f.size / 1024).toFixed(1) + ' KB'),
                    ),
                    React.createElement('button', { type: 'button', className: 'btn btn--ghost btn--sm', onClick: () => removeAttachment(i) },
                      React.createElement(Icon, { name: 'x', size: 12 })),
                  )),
                ),
            ),
          )
        ),

        // 2) Details
        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card__head' },
            React.createElement('h3', null, '2. รายละเอียดหนังสือ'),
          ),
          React.createElement('div', { className: 'card__body' },
            React.createElement('div', { className: 'form-grid' },
              React.createElement('div', { className: 'field-row' },
                React.createElement('label', null, 'เลขรับ', React.createElement('span', { className: 'req' }, '*')),
                React.createElement('input', {
                  className: 'input mono',
                  value: form.docNumber,
                  onChange: e => update('docNumber', e.target.value),
                  placeholder: '68-001',
                }),
                React.createElement('div', { className: 'hint' }, 'รองรับเลขที่กำหนดเอง เช่น 67-001, ศธ 04218/001'),
              ),
              React.createElement('div', { className: 'field-row' },
                React.createElement('label', null, 'เลขที่หนังสือ (ของต้นทาง)'),
                React.createElement('input', {
                  className: 'input mono',
                  value: form.refNumber,
                  onChange: e => update('refNumber', e.target.value),
                  placeholder: 'ศธ 04218/ว 1247',
                }),
              ),
              React.createElement('div', { className: 'field-row' },
                React.createElement('label', null, 'วันที่รับ', React.createElement('span', { className: 'req' }, '*')),
                React.createElement('input', {
                  className: 'input',
                  type: 'date',
                  value: form.receivedDate,
                  onChange: e => update('receivedDate', e.target.value),
                }),
              ),
              React.createElement('div', { className: 'field-row' },
                React.createElement('label', null, 'ลงวันที่ (ของต้นทาง)'),
                React.createElement('input', {
                  className: 'input',
                  type: 'date',
                  value: form.docDate,
                  onChange: e => update('docDate', e.target.value),
                }),
              ),

              React.createElement('div', { className: 'field-row col-2' },
                React.createElement('label', null, 'เรื่อง', React.createElement('span', { className: 'req' }, '*')),
                React.createElement('input', {
                  className: 'input',
                  value: form.subject,
                  onChange: e => update('subject', e.target.value),
                  placeholder: 'เช่น การจัดสรรงบประมาณรายจ่ายประจำปีงบประมาณ พ.ศ. 2568',
                }),
              ),

              React.createElement('div', { className: 'field-row col-2' },
                React.createElement('label', null, 'หน่วยงานต้นทาง', React.createElement('span', { className: 'req' }, '*')),
                React.createElement('select', {
                  className: 'input',
                  value: customOrg ? '__other__' : form.from,
                  onChange: e => {
                    const v = e.target.value;
                    if (v === '__other__') { setCustomOrg(true); update('from', ''); update('fromShort', ''); return; }
                    setCustomOrg(false);
                    const opt = fromOptions.find(o => o.full === v);
                    update('from', v);
                    update('fromShort', opt ? opt.short : '');
                  },
                },
                  React.createElement('option', { value: '' }, '— เลือกหน่วยงาน —'),
                  fromOptions.map(o => React.createElement('option', { key: o.full, value: o.full }, o.full)),
                  React.createElement('option', { value: '__other__' }, 'อื่นๆ (พิมพ์เอง)'),
                ),
                customOrg ? React.createElement('input', {
                  className: 'input',
                  style: { marginTop: 8 },
                  placeholder: 'พิมพ์ชื่อหน่วยงานต้นทาง',
                  value: form.from,
                  autoFocus: true,
                  onChange: e => update('from', e.target.value),
                }) : null,
              ),

              React.createElement('div', { className: 'field-row col-2' },
                React.createElement('label', null, 'ความเร่งด่วน'),
                React.createElement('div', { className: 'urgency-toggle', style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 } },
                  URGENCY_ORDER.map(key => {
                    const sub = {
                      normal: 'จัดส่ง ผอ. ตามลำดับเข้าระบบ',
                      express: 'เร่งจัดส่งให้ ผอ.',
                      urgent: 'แจ้งเตือน ผอ. ทันที',
                      most_urgent: 'แจ้งเตือน ผอ. ทันที (สูงสุด)',
                    }[key];
                    const icon = key === 'most_urgent' ? '‼️ ' : key === 'urgent' ? '🔥 ' : key === 'express' ? '⚡ ' : '';
                    return React.createElement('button', {
                      key,
                      type: 'button',
                      className: key === 'normal' ? 'opt' : 'opt amber',
                      'aria-pressed': form.urgency === key,
                      onClick: () => update('urgency', key),
                    },
                      React.createElement('div', { className: 't' }, icon + URGENCY[key].label),
                      React.createElement('div', { className: 's' }, sub),
                    );
                  })
                ),
              ),

              React.createElement('div', { className: 'field-row col-2' },
                React.createElement('label', null, 'ข้อความเสนอ ผอ. (clerk_note)'),
                React.createElement('textarea', {
                  className: 'input',
                  rows: 3,
                  value: form.clerkNote,
                  onChange: e => update('clerkNote', e.target.value),
                }),
                React.createElement('div', { className: 'hint' }, 'จะแสดงเป็นข้อความนำเสนอบนหน้าจอ ผอ. — แยกจากบันทึกของ ผอ. เอง'),
              ),
            )
          )
        ),
      ),

      // Right: preview/summary
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card__head' },
            React.createElement('h3', null, 'สรุป'),
          ),
          React.createElement('div', { className: 'card__body' },
            React.createElement('div', { className: 'meta-list' },
              React.createElement('div', { className: 'meta-row' },
                React.createElement('span', { className: 'k' }, 'เลขรับ'),
                React.createElement('span', { className: 'v mono' }, form.docNumber || '—'),
              ),
              React.createElement('div', { className: 'meta-row' },
                React.createElement('span', { className: 'k' }, 'เลขที่หนังสือ'),
                React.createElement('span', { className: 'v mono' }, form.refNumber || '—'),
              ),
              React.createElement('div', { className: 'meta-row' },
                React.createElement('span', { className: 'k' }, 'วันที่รับ'),
                React.createElement('span', { className: 'v' }, formatThaiDate(form.receivedDate)),
              ),
              React.createElement('div', { className: 'meta-row' },
                React.createElement('span', { className: 'k' }, 'จาก'),
                React.createElement('span', { className: 'v' }, form.fromShort || '—'),
              ),
              React.createElement('div', { className: 'meta-row' },
                React.createElement('span', { className: 'k' }, 'ด่วน'),
                React.createElement('span', { className: 'v' }, (isUrgent(form.urgency) ? '🔥 ' : '') + (URGENCY[form.urgency] || URGENCY.normal).label),
              ),
              React.createElement('div', { className: 'meta-row' },
                React.createElement('span', { className: 'k' }, 'ไฟล์'),
                React.createElement('span', { className: 'v' }, file ? file.name : '—'),
              ),
            ),
            React.createElement('div', { className: 'divider' }),
            React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-3)' } },
              'หลังออกเลขรับ ระบบจะ:',
              React.createElement('ul', { style: { paddingLeft: 18, marginTop: 6, lineHeight: 1.6 } },
                React.createElement('li', null, 'เปลี่ยนสถานะเป็น ', React.createElement('strong', null, 'รอ ผอ. เกษียณ')),
                React.createElement('li', null, 'แจ้งเตือน ผอ. ผ่าน Telegram + อีเมล'),
                React.createElement('li', null, 'บันทึก audit log อัตโนมัติ'),
              ),
            ),
          ),
          React.createElement('div', {
            style: {
              padding: 16, borderTop: '1px solid var(--line)',
              display: 'flex', gap: 8,
            }
          },
            React.createElement('button', {
              type: 'button',
              className: 'btn',
              style: { flex: 1 },
              onClick: () => setActiveView('inbox'),
            }, 'ยกเลิก'),
            React.createElement('button', {
              type: 'submit',
              className: 'btn btn--primary',
              style: { flex: 2 },
            },
              React.createElement(Icon, { name: 'send', size: 14 }),
              'ออกเลข + ส่ง ผอ.'
            ),
          ),
        ),

        // Process hint
        React.createElement('div', { className: 'card' },
          React.createElement('div', { className: 'card__head' },
            React.createElement('h3', null, 'ขั้นตอนต่อไป'),
          ),
          React.createElement('div', { className: 'card__body' },
            React.createElement(Stepper, { status: 'pending_director' }),
            React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-3)', marginTop: 8, lineHeight: 1.5 } },
              'ขั้นถัดไป: ผอ. จะเปิดอ่าน PDF บนไอแพด → เซ็นด้วย Apple Pencil → เกษียณและมอบหมายครูผู้รับผิดชอบ'
            ),
          )
        )
      )
    )
  );
}

Object.assign(window, { IntakeView });