// Administrator view — schedule org-wide meetings & broadcast announcements to DLs.

function AdminView({ currentUser }) {
  const [tab, setTab] = useState('schedule');
  const [meetings, setMeetings] = useState(window.ADMIN_MEETINGS);
  const [broadcasts, setBroadcasts] = useState(window.ADMIN_BROADCASTS);
  const [modal, setModal] = useState(null); // 'new-meeting' | 'new-broadcast' | null

  const addMeeting = (m) => setMeetings([{ ...m, id: 'm' + Date.now() }, ...meetings]);
  const addBroadcast = (b) => setBroadcasts([{ ...b, id: 'b' + Date.now(), sentAt: 'เพิ่งส่ง' }, ...broadcasts]);

  return (
    <div className="space-y-5">
      <SectionHead
        eyebrow="Module · Administrator"
        title="ตั้งกิจกรรม & Broadcast ไป DL"
        sub="สร้าง Meeting / Event แล้ว push ไปขึ้น Calendar ของทุกคน · ส่ง Broadcast ผ่าน LINE OA"
        right={
          <div className="flex items-center gap-2">
            <Pill color="#10B981" tint="#E7F8F1" size="xs" icon={<Icon name="shield" className="w-3 h-3" />}>Admin Mode</Pill>
            <Btn variant="brand" size="sm" icon={<Icon name="plus" />} onClick={() => setModal('new-meeting')}>กิจกรรมใหม่</Btn>
            <Btn variant="primary" size="sm" icon={<Icon name="megaphone" className="w-3.5 h-3.5" />} onClick={() => setModal('new-broadcast')}>Broadcast</Btn>
          </div>
        }
      />

      {/* KPIs */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        {[
          { label: 'Active DLs',       value: ABO_LIST.filter(a => a.active).length, color: '#10B981', icon: 'users' },
          { label: 'Meetings สัปดาห์นี้', value: meetings.length,                       color: '#2F5DE5', icon: 'calendar' },
          { label: 'Broadcast เดือนนี้', value: broadcasts.length,                     color: '#F59E0B', icon: 'megaphone' },
          { label: 'Avg Open Rate',     value: '92%',                                  color: '#7C3AED', icon: 'eye' },
        ].map(k => (
          <Card key={k.label} pad={false}>
            <div className="p-4">
              <div className="flex items-center gap-2 text-[11px] text-ink-500 mb-1.5">
                <div className="w-6 h-6 rounded-md flex items-center justify-center" style={{ background: k.color + '20', color: k.color }}>
                  <Icon name={k.icon} className="w-3 h-3" />
                </div>
                <span>{k.label}</span>
              </div>
              <div className="text-2xl font-semibold num text-ink-900">{k.value}</div>
            </div>
          </Card>
        ))}
      </div>

      <Tabs variant="underline" active={tab} onChange={setTab} tabs={[
        { id: 'schedule', label: 'กิจกรรม / Meeting',       icon: <Icon name="calendar"  className="w-3.5 h-3.5" /> },
        { id: 'broadcast', label: 'Broadcast History',       icon: <Icon name="megaphone" className="w-3.5 h-3.5" /> },
        { id: 'audience', label: 'จัดกลุ่ม Audience',         icon: <Icon name="users"     className="w-3.5 h-3.5" /> },
      ]} />

      {tab === 'schedule'  && <ScheduleList meetings={meetings} onDelete={(id) => setMeetings(meetings.filter(m => m.id !== id))} />}
      {tab === 'broadcast' && <BroadcastList broadcasts={broadcasts} />}
      {tab === 'audience'  && <AudienceList />}

      <Modal open={modal === 'new-meeting'} onClose={() => setModal(null)} title="กิจกรรม / Meeting ใหม่" size="lg" footer={
        <div className="flex items-center justify-end gap-2">
          <Btn variant="ghost" size="sm" onClick={() => setModal(null)}>ยกเลิก</Btn>
          <Btn variant="brand" size="sm" icon={<Icon name="bolt" className="w-3.5 h-3.5" />} onClick={() => { addMeeting({ day: 'จันทร์', time: '20:00-22:00', title: 'New Meeting', type: 'meeting', recurring: false, channels: ['line', 'calendar'], reach: 14 }); setModal(null); }}>
            สร้าง + Push เข้า Calendar
          </Btn>
        </div>
      }>
        <NewMeetingForm />
      </Modal>

      <Modal open={modal === 'new-broadcast'} onClose={() => setModal(null)} title="Broadcast ใหม่" size="lg" footer={
        <div className="flex items-center justify-end gap-2">
          <Btn variant="ghost" size="sm" onClick={() => setModal(null)}>บันทึก Draft</Btn>
          <Btn variant="primary" size="sm" icon={<Icon name="megaphone" className="w-3.5 h-3.5" />} onClick={() => { addBroadcast({ subject: 'ประกาศใหม่', channels: ['line'], audience: 'all DLs', sent: 14, opened: 0 }); setModal(null); }}>
            ส่งทันที
          </Btn>
        </div>
      }>
        <NewBroadcastForm />
      </Modal>
    </div>
  );
}

function ScheduleList({ meetings, onDelete }) {
  return (
    <Card pad={false}>
      <div className="px-5 pt-4 pb-3 border-b border-ink-100 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <h3 className="text-sm font-semibold text-ink-800">กิจกรรมประจำสัปดาห์</h3>
          <span className="text-[11px] text-ink-400">· จะถูก push ไปขึ้น Calendar ของ DL ที่อยู่ใน Audience</span>
        </div>
        <Pill color="#06C755" tint="#E7F8F1" size="xs" icon={<span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />}>LINE OA · Connected</Pill>
      </div>
      <div className="divide-y divide-ink-100">
        {meetings.map(m => (
          <div key={m.id} className="flex items-center gap-4 p-4 hover:bg-ink-50/40">
            <div className="w-16 text-center flex-shrink-0">
              <div className="text-xs font-semibold text-ink-500 uppercase">{m.day.slice(0, 2)}</div>
              <div className="text-[10px] text-ink-400 num">{m.time.split('-')[0]}</div>
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <span className="text-sm font-semibold text-ink-900 truncate">{m.title}</span>
                {m.recurring && <Pill color="#2F5DE5" tint="#EEF4FF" size="xs"><Icon name="refresh" className="w-2.5 h-2.5" /> ทุกสัปดาห์</Pill>}
              </div>
              <div className="text-[11px] text-ink-500 num mt-0.5">{m.day} · {m.time} · ส่งถึง {m.reach} คน</div>
            </div>
            <div className="flex items-center gap-1">
              {m.channels.includes('line') && <Pill color="#06C755" tint="#E7F8F1" size="xs">LINE</Pill>}
              {m.channels.includes('calendar') && <Pill color="#2F5DE5" tint="#EEF4FF" size="xs">Cal</Pill>}
            </div>
            <div className="flex items-center gap-1">
              <button className="w-8 h-8 rounded-lg hover:bg-ink-100 text-ink-500 flex items-center justify-center"><Icon name="settings" className="w-3.5 h-3.5" /></button>
              <button onClick={() => onDelete(m.id)} className="w-8 h-8 rounded-lg hover:bg-rose-50 text-rose-500 flex items-center justify-center"><Icon name="x" className="w-3.5 h-3.5" /></button>
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}

function BroadcastList({ broadcasts }) {
  return (
    <Card pad={false}>
      <div className="divide-y divide-ink-100">
        {broadcasts.map(b => (
          <div key={b.id} className="p-4 flex items-start gap-3">
            <div className="w-9 h-9 rounded-lg bg-amber-100 text-amber-700 flex items-center justify-center flex-shrink-0">
              <Icon name="megaphone" className="w-4 h-4" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <div className="text-sm font-semibold text-ink-900">{b.subject}</div>
                  <div className="text-[11px] text-ink-500 mt-0.5">{b.audience} · ส่งเมื่อ {b.sentAt}</div>
                </div>
                <div className="text-right flex-shrink-0">
                  <div className="text-[11px] num text-ink-700 font-semibold">{b.opened}/{b.sent}</div>
                  <div className="text-[10px] text-ink-400">opened</div>
                </div>
              </div>
              <div className="mt-2 flex items-center gap-1.5">
                {b.channels.map(c => (
                  <Pill key={c} color={c === 'line' ? '#06C755' : '#2F5DE5'} tint={c === 'line' ? '#E7F8F1' : '#EEF4FF'} size="xs">
                    {c === 'line' ? 'LINE OA' : 'Calendar'}
                  </Pill>
                ))}
                <button className="ml-auto text-[11px] text-brand-600 hover:underline">ดูรายละเอียด →</button>
              </div>
              <Bar value={b.opened / b.sent} color="#10B981" height={3} className="mt-2" />
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}

function AudienceList() {
  const groups = [
    { name: 'All DLs',         count: ABO_LIST.length,                            color: '#2F5DE5', desc: 'ทุกคนในทีม' },
    { name: 'Active only',     count: ABO_LIST.filter(a => a.active).length,      color: '#10B981', desc: 'login ภายใน 30 วัน' },
    { name: 'BT + ABO',        count: ABO_LIST.filter(a => a.role !== 'Member').length, color: '#1B379F', desc: 'นักธุรกิจ' },
    { name: 'Focus 5',         count: ABO_LIST.filter(a => a.focus).length,       color: '#7C3AED', desc: 'DL ที่ pin focus' },
    { name: 'New (เดือนนี้)',  count: 3,                                          color: '#F59E0B', desc: 'เพิ่งเข้าระบบ' },
  ];
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
      {groups.map(g => (
        <Card key={g.name} pad={false} className="hover:shadow-lift transition-all cursor-pointer">
          <div className="p-4">
            <div className="flex items-center justify-between mb-2">
              <Pill color={g.color} tint={g.color + '20'} size="xs">{g.name}</Pill>
              <Icon name="users" className="w-4 h-4 text-ink-300" />
            </div>
            <div className="text-2xl font-semibold num text-ink-900">{g.count}</div>
            <div className="text-[11px] text-ink-500 mt-0.5">{g.desc}</div>
            <div className="mt-3 pt-3 border-t border-ink-100 flex items-center gap-2">
              <Btn variant="ghost" size="sm" icon={<Icon name="megaphone" className="w-3 h-3" />}>ส่ง Broadcast</Btn>
              <Btn variant="ghost" size="sm" icon={<Icon name="eye" className="w-3 h-3" />}>ดู</Btn>
            </div>
          </div>
        </Card>
      ))}
    </div>
  );
}

function NewMeetingForm() {
  const [recurring, setRecurring] = useState(true);
  const [ch, setCh] = useState({ line: true, calendar: true });
  return (
    <div className="space-y-3">
      <Field label="หัวข้อกิจกรรม"><input className="w-full h-10 px-3 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500" placeholder="เช่น Weekly Meeting" /></Field>
      <div className="grid grid-cols-2 gap-3">
        <Field label="วัน">
          <select className="w-full h-10 px-3 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500">
            {['จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์','อาทิตย์'].map(d => <option key={d}>{d}</option>)}
          </select>
        </Field>
        <Field label="เวลา"><input className="w-full h-10 px-3 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500" defaultValue="20:00-22:00" /></Field>
      </div>
      <Field label="ทำซ้ำ">
        <label className="flex items-center gap-2 text-sm text-ink-700">
          <input type="checkbox" checked={recurring} onChange={e => setRecurring(e.target.checked)} className="accent-brand-500" />
          <span>ทำซ้ำทุกสัปดาห์</span>
        </label>
      </Field>
      <Field label="ส่งถึง">
        <select className="w-full h-10 px-3 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500">
          <option>All DLs ({ABO_LIST.length} คน)</option>
          <option>Active only ({ABO_LIST.filter(a => a.active).length} คน)</option>
          <option>Focus 5 ({ABO_LIST.filter(a => a.focus).length} คน)</option>
          <option>BT + ABO เท่านั้น</option>
        </select>
      </Field>
      <Field label="ช่องทาง">
        <div className="flex items-center gap-2">
          <label className={`flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer ${ch.line ? 'border-emerald-300 bg-emerald-50' : 'border-ink-200'}`}>
            <input type="checkbox" checked={ch.line} onChange={e => setCh({ ...ch, line: e.target.checked })} className="accent-emerald-500" />
            <Icon name="line" className="w-4 h-4 text-emerald-600" /><span className="text-xs font-medium">LINE Push</span>
          </label>
          <label className={`flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer ${ch.calendar ? 'border-brand-300 bg-brand-50' : 'border-ink-200'}`}>
            <input type="checkbox" checked={ch.calendar} onChange={e => setCh({ ...ch, calendar: e.target.checked })} className="accent-brand-500" />
            <Icon name="calendar" className="w-4 h-4 text-brand-600" /><span className="text-xs font-medium">Push to Calendar</span>
          </label>
        </div>
      </Field>
    </div>
  );
}

function NewBroadcastForm() {
  return (
    <div className="space-y-3">
      <Field label="หัวข้อ"><input className="w-full h-10 px-3 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500" placeholder="Reminder: ..." /></Field>
      <Field label="ข้อความ"><textarea className="w-full px-3 py-2 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500" rows="4" placeholder="เนื้อหา broadcast ที่จะส่งทาง LINE OA" /></Field>
      <Field label="กลุ่มเป้าหมาย">
        <select className="w-full h-10 px-3 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500">
          <option>All DLs</option>
          <option>Active only</option>
          <option>Focus 5</option>
        </select>
      </Field>
      <div className="text-xs text-ink-500 bg-amber-50 border border-amber-100 rounded-lg p-3 flex items-start gap-2">
        <Icon name="info" className="w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" />
        <span>Broadcast จะส่งผ่าน LINE OA · ตรวจสอบ Audience และเนื้อหาก่อนยืนยัน — ไม่สามารถเรียกคืนได้</span>
      </div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <label className="text-[11px] uppercase tracking-wider font-semibold text-ink-500 mb-1.5 block">{label}</label>
      {children}
    </div>
  );
}

window.AdminView = AdminView;