// Email conversations and the existing durable outbound composer.
const { useState: useMailState, useEffect: useMailEffect, useRef: useMailRef } = React;

const MAIL_STATES = {
  pending: ["В очереди", "text-[rgb(var(--hd-warning-text))]"],
  sending: ["Отправляется", "text-[rgb(var(--hd-accent-text))]"],
  sent: ["Отправлено", "text-[rgb(var(--hd-success-text))]"],
  failed: ["Не отправлено", "text-[rgb(var(--hd-danger-text))]"],
  unknown: ["Требует проверки", "text-[rgb(var(--hd-amber-text))]"],
};

function EmailComposeScreen({ visible, showToast, currentOperator }) {
  const [config, setConfig] = useMailState(null);
  const [letters, setLetters] = useMailState([]);
  const [sender, setSender] = useMailState("");
  const [recipient, setRecipient] = useMailState("");
  const [subject, setSubject] = useMailState("");
  const [text, setText] = useMailState("");
  const [attachment, setAttachment] = useMailState(null);
  const [busy, setBusy] = useMailState(false);
  const [error, setError] = useMailState("");
  const [loadError, setLoadError] = useMailState("");
  const requestKey = useMailRef(null);
  const busyRef = useMailRef(false);
  const fileRef = useMailRef(null);
  const alive = useMailRef(true);

  useMailEffect(() => {
    alive.current = true;
    return () => { alive.current = false; };
  }, []);

  useMailEffect(() => {
    if (!visible) return;
    let cancelled = false;
    let loading = false;
    const refresh = async () => {
      if (loading) return;
      loading = true;
      try {
        const [settings, history] = await Promise.all([
          window.apiFetch("GET", "/api/email/settings", undefined, false, 10000),
          window.apiFetch("GET", "/api/email/outbox", undefined, false, 10000),
        ]);
        if (cancelled) return;
        setConfig(settings);
        setLetters(history);
        setSender(previous => previous || settings.senders.find(item => item.ready)?.address
          || settings.senders[0]?.address || "");
        setLoadError("");
      } catch {
        if (!cancelled) setLoadError("Не удалось загрузить почту. Повторим загрузку автоматически.");
      } finally { loading = false; }
    };
    refresh();
    const timer = setInterval(refresh, 5000);
    return () => { cancelled = true; clearInterval(timer); };
  }, [visible]);

  function change(setter, value) {
    setter(value);
    requestKey.current = null;
    setError("");
  }

  function selectFile(file) {
    if (file && file.size > (config?.max_attachment_bytes || 10 * 1024 * 1024)) {
      setError("Вложение — до 10 МБ");
      if (fileRef.current) fileRef.current.value = "";
      return;
    }
    change(setAttachment, file);
    if (!file && fileRef.current) fileRef.current.value = "";
  }

  async function submit(event) {
    event.preventDefault();
    if (busyRef.current) return;
    busyRef.current = true;
    setBusy(true);
    setError("");
    try {
      // Reuse after a timeout: the server deduplicates this operator/request.
      requestKey.current ||= crypto.randomUUID();
      const body = new FormData();
      for (const [key, value] of Object.entries({
        sender, recipient, subject, text, request_key: requestKey.current,
      })) body.append(key, value);
      if (attachment) body.append("attachment", attachment);
      const letter = await window.apiFetch("POST", "/api/email/outbox", body);
      if (!alive.current) return;
      setLetters(previous => [letter, ...previous.filter(item => item.id !== letter.id)].slice(0, 100));
      setRecipient(""); setSubject(""); setText(""); setAttachment(null);
      requestKey.current = null;
      if (fileRef.current) fileRef.current.value = "";
      showToast("Письмо поставлено в очередь");
    } catch (failure) {
      if (alive.current) setError(typeof failure.detail === "string" ? failure.detail
        : "Запрос не подтверждён. Повторите отправку без изменения письма — дубликат не создастся.");
    } finally {
      busyRef.current = false;
      if (alive.current) setBusy(false);
    }
  }

  async function retry(letter) {
    try {
      const updated = await window.apiFetch("POST", "/api/email/outbox/" + letter.id + "/retry");
      if (alive.current) {
        setLetters(previous => previous.map(item => item.id === updated.id ? updated : item));
        showToast("Отправка поставлена в очередь повторно");
      }
    } catch (failure) {
      showToast(typeof failure.detail === "string" ? failure.detail : "Не удалось повторить отправку", "error");
    }
  }

  const ready = config?.enabled && config.senders.some(item => item.address === sender && item.ready);
  const inputClass = "w-full bg-[rgb(var(--hd-canvas))] border border-[rgb(var(--hd-border))] rounded-lg px-3 py-2 text-sm text-[rgb(var(--hd-text))] focus:outline-none focus:border-[rgb(var(--hd-accent))] disabled:opacity-50";

  return (
    <div className="h-full overflow-y-auto scrollbar-thin p-4 md:p-6">
      <div className="max-w-6xl mx-auto">
        {loadError && <p role="alert" className="text-sm text-[rgb(var(--hd-danger-text))] mb-4">{loadError}</p>}
        {config && !ready && <p role="status" className="bg-[#f59e0b]/10 border border-[#f59e0b]/30 text-[rgb(var(--hd-review-pending))] rounded-lg p-3 mb-4 text-sm">
          {config.enabled ? "Выбранный адрес пока не подключён. Выберите другой адрес или обратитесь к администратору."
            : "Почта пока не подключена. Обратитесь к администратору."}
        </p>}
        <div className="grid lg:grid-cols-2 gap-5">
          <form onSubmit={submit} className="bg-[rgb(var(--hd-surface))] border border-[rgb(var(--hd-border))] rounded-xl p-4 space-y-4">
            <h2 className="font-medium">Новое письмо</h2>
            <label className="block text-xs text-[rgb(var(--hd-secondary))]">Отправитель
              <select required aria-label="Отправитель" value={sender} disabled={busy}
                onChange={event => change(setSender, event.target.value)} className={inputClass + " mt-1"}>
                {!config && <option value="">Загрузка…</option>}
                {config?.senders.map(item => <option key={item.address} value={item.address}>{item.address}</option>)}
              </select>
            </label>
            <label className="block text-xs text-[rgb(var(--hd-secondary))]">Получатель
              <input required type="email" maxLength={254} aria-label="Получатель" value={recipient}
                disabled={busy} onChange={event => change(setRecipient, event.target.value)}
                className={inputClass + " mt-1"} placeholder="client@example.com" />
            </label>
            <label className="block text-xs text-[rgb(var(--hd-secondary))]">Тема
              <input required maxLength={255} aria-label="Тема" value={subject} disabled={busy}
                onChange={event => change(setSubject, event.target.value)} className={inputClass + " mt-1"} />
            </label>
            <label className="block text-xs text-[rgb(var(--hd-secondary))]">Сообщение
              <textarea required rows={9} maxLength={20000} aria-label="Сообщение" value={text} disabled={busy}
                onChange={event => change(setText, event.target.value)} className={inputClass + " mt-1 resize-y"} />
            </label>
            <label className="block text-xs text-[rgb(var(--hd-secondary))]">Вложение · до 10 МБ
              <input ref={fileRef} type="file" aria-label="Вложение" disabled={busy}
                onChange={event => selectFile(event.target.files[0] || null)} className="block mt-2 text-xs max-w-full" />
            </label>
            {attachment && <div className="text-xs text-[rgb(var(--hd-secondary))] flex gap-2">
              <span className="truncate">{attachment.name}</span>
              <button type="button" disabled={busy} onClick={() => selectFile(null)} className="text-[rgb(var(--hd-accent-text))]">Убрать</button>
            </div>}
            {error && <p role="alert" className="text-sm text-[rgb(var(--hd-danger-text))]">{error}</p>}
            <button type="submit" disabled={busy || !ready || !recipient.trim() || !subject.trim() || !text.trim()}
              className="px-4 py-2 bg-[rgb(var(--hd-accent))] text-white rounded-lg text-sm font-medium disabled:opacity-40 disabled:cursor-not-allowed">
              {busy ? "Сохраняем…" : "Отправить письмо"}
            </button>
          </form>
          <section className="bg-[rgb(var(--hd-surface))] border border-[rgb(var(--hd-border))] rounded-xl p-4">
            <h2 className="font-medium mb-3">История отправок</h2>
            {!letters.length && <p className="text-sm text-[rgb(var(--hd-muted))]">Отправленных писем пока нет.</p>}
            <div className="space-y-3">
              {letters.map(letter => {
                const state = MAIL_STATES[letter.state] || ["Проверяем статус", "text-[rgb(var(--hd-secondary))]"];
                return <details key={letter.id} className="border border-[rgb(var(--hd-border))] rounded-lg p-3">
                  <summary className="cursor-pointer text-sm">
                    <span className={state[1] + " text-xs mr-2"}>{state[0]}</span>
                    <span className="break-words">{letter.subject}</span>
                    <span className="block text-xs text-[rgb(var(--hd-secondary))] mt-1 break-all">{letter.sender} → {letter.recipient}</span>
                    <span className="block text-[11px] text-[rgb(var(--hd-muted))] mt-1">
                      {new Date(letter.created_at).toLocaleString("ru-RU")} · {letter.operator_name}
                    </span>
                  </summary>
                  <p className="text-sm whitespace-pre-wrap break-words mt-3">{letter.body}</p>
                  {letter.attachment_name && <p className="text-xs text-[rgb(var(--hd-secondary))] mt-2">Вложение: {letter.attachment_name}</p>}
                  {letter.state === "sent" && <p className="text-xs text-[rgb(var(--hd-secondary))] mt-2">Принято почтовым сервером. Получение и прочтение клиентом не подтверждаются.</p>}
                  {letter.last_error && <p role="alert" className="text-xs text-[rgb(var(--hd-danger-text))] mt-2">{letter.last_error}</p>}
                  {letter.state === "failed" && config?.enabled
                    && (currentOperator?.role === "admin" || currentOperator?.id === letter.operator_id)
                    && <button type="button" onClick={() => retry(letter)} className="text-xs text-[rgb(var(--hd-accent-text))] mt-3">Повторить отправку</button>}
                </details>;
              })}
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

async function downloadMailAttachment(path, name) {
  const blob = await window.apiFetch("DOWNLOAD", path);
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url; link.download = name;
  document.body.appendChild(link); link.click(); link.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

const MAIL_FOLDERS = [['awaiting','Требуют ответа'],['unread','Непрочитанные'],['open','Открытые'],['closed','Закрытые'],['all','Вся почта']];

function EmailNavBadge() {
  const [count,setCount]=useMailState(0);
  useMailEffect(() => {
    const update=event => setCount(event.detail.unread || 0);
    window.addEventListener('mail:summary',update);
    return () => window.removeEventListener('mail:summary',update);
  },[]);
  return count>0 ? <span aria-label={`${count} непрочитанных писем`} className="rounded-full bg-[rgb(var(--hd-accent))] text-white text-[10px] min-w-[18px] px-1.5 leading-[18px] text-center">{count>99?'99+':count}</span> : null;
}

function EmailScreen({visible,showToast,currentOperator}) {
  const [tab,setTab]=useMailState('conversations');
  const [data,setData]=useMailState({items:[],counts:{},total:0,page:1,pages:1});
  const [selected,setSelected]=useMailState(null);
  const [view,setView]=useMailState(null);
  const [config,setConfig]=useMailState(null);
  const [health,setHealth]=useMailState(null);
  const [mailbox,setMailbox]=useMailState('');
  const [folder,setFolder]=useMailState('awaiting');
  const [scope,setScope]=useMailState('mine');
  const [operators,setOperators]=useMailState([]);
  const [transferTo,setTransferTo]=useMailState('');
  const [assigning,setAssigning]=useMailState(false);
  const assigningRef=useMailRef(false);
  const [query,setQuery]=useMailState('');
  const [search,setSearch]=useMailState('');
  const [page,setPage]=useMailState(1);
  const [revision,setRevision]=useMailState(0);
  const [error,setError]=useMailState('');
  const [loading,setLoading]=useMailState(true);
  const [busy,setBusy]=useMailState(false);
  const [drafts,setDrafts]=useMailState({});
  const [permission,setPermission]=useMailState(() => typeof Notification==='undefined'?'unsupported':Notification.permission);
  const [notices,setNotices]=useMailState(false);
  const busyRef=useMailRef(false), currentId=useMailRef(selected), cursor=useMailRef(null);
  const fileRef=useMailRef(null), bodyRef=useMailRef(null), searchRef=useMailRef(null);
  const visibleRef=useMailRef(visible), toastRef=useMailRef(showToast);
  const draftKey=`helpdesk-mail-drafts:${currentOperator?.id || 'operator'}`;
  currentId.current=selected;visibleRef.current=visible;toastRef.current=showToast;

  useMailEffect(() => {
    try {setDrafts(JSON.parse(sessionStorage.getItem(draftKey)||'{}'));} catch {setDrafts({});}
    try {setNotices(localStorage.getItem(`mail-notices:${currentOperator?.id}`)==='true');} catch {}
  },[draftKey]);

  useMailEffect(() => {
    const timer=setTimeout(() => {setSearch(query.trim());setPage(1);},250);
    return () => clearTimeout(timer);
  },[query]);

  // Always mounted: rare email must remain visible while operators work in Telegram.
  useMailEffect(() => {
    let cancelled=false,loading=false;
    cursor.current=null;
    async function poll() {
      if (loading) return;
      loading=true;
      try {
        const result=await window.apiFetch('GET','/api/email/summary',undefined,false,10000);
        if (cancelled) return;
        window.dispatchEvent(new CustomEvent('mail:summary',{detail:result}));
        if (cursor.current!==null && (result.notification_cursor ?? result.cursor)>cursor.current) {
          toastRef.current(result.notification_kind==='assigned'?'Вам назначено почтовое обращение':result.notification_kind==='released'?'Обращение возвращено в общую почтовую очередь':'Новое письмо в разделе «Почта»');
          setRevision(value=>value+1);
          if (notices && typeof Notification!=='undefined' && Notification.permission==='granted' && (!visibleRef.current || document.hidden)) {
            const notice=new Notification(result.notification_kind==='assigned'?'Вам назначено почтовое обращение':'Новое письмо в поддержку',{body:'Откройте «Почту», чтобы прочитать обращение.',tag:'helpdesk-email'});
            notice.onclick=() => {window.focus();window.dispatchEvent(new CustomEvent('mail:navigate'));notice.close();};
          }
        }
        cursor.current=result.cursor;
      } catch {} finally {loading=false;}
    }
    poll();const timer=setInterval(poll,10000);
    return () => {cancelled=true;clearInterval(timer);};
  },[notices,currentOperator?.id]);

  useMailEffect(() => {
    const open=()=>{setTab('conversations');setFolder('open');setScope('all');setPage(1);};
    window.addEventListener('mail:navigate',open);
    return ()=>window.removeEventListener('mail:navigate',open);
  },[]);

  useMailEffect(() => {
    if (!visible) return;
    let cancelled=false;
    async function settings() {
      try {
        const [c,h,ops]=await Promise.all([window.apiFetch('GET','/api/email/settings',undefined,false,10000),window.apiFetch('GET','/api/email/incoming-status',undefined,false,10000),window.apiFetch('GET','/api/operators',undefined,false,10000)]);
        if (!cancelled) {setConfig(c);setHealth(h);setOperators(ops);}
      } catch {if(!cancelled)setError('Не удалось проверить подключение почты.');}
    }
    settings();const timer=setInterval(settings,30000);
    return ()=>{cancelled=true;clearInterval(timer);};
  },[visible]);

  useMailEffect(() => {
    if (!visible || tab!=='conversations') return;
    let cancelled=false,loading=false;
    setLoading(true);
    async function refresh() {
      if(loading)return;loading=true;
      try {
        const params=new URLSearchParams({mailbox,folder,scope,q:search,page:String(page),limit:'50'});
        const result=await window.apiFetch('GET',`/api/email/workspace?${params}`,undefined,false,10000);
        if(!cancelled){setData(result);setError('');setLoading(false);}
      } catch {if(!cancelled){setError('Не удалось загрузить письма. Повторим автоматически.');setLoading(false);}}
      finally{loading=false;}
    }
    refresh();const timer=setInterval(refresh,10000);
    return ()=>{cancelled=true;clearInterval(timer);};
  },[visible,tab,mailbox,folder,scope,search,page,revision]);

  useMailEffect(() => {
    if(!visible || tab!=='conversations' || !selected)return;
    let cancelled=false,loading=false;
    async function refresh() {
      if(loading)return;loading=true;
      try {
        const result=await window.apiFetch('GET',`/api/email/threads/${selected}`,undefined,false,10000);
        if(cancelled || currentId.current!==selected)return;
        setView(result);
        if(result.thread.unread_count>0 && result.thread.assigned_operator_id===currentOperator?.id && !document.hidden) {
          await window.apiFetch('POST',`/api/email/threads/${selected}/read`,{version:result.thread.unread_version},false);
          if(!cancelled)setData(previous=>({...previous,items:previous.items.map(row=>row.id===selected && row.unread_version===result.thread.unread_version?{...row,unread_count:0}:row)}));
        }
      }catch{if(!cancelled)setError('Не удалось обновить переписку.');}
      finally{loading=false;}
    }
    refresh();const timer=setInterval(refresh,5000);
    const focus=()=>refresh();window.addEventListener('focus',focus);
    return ()=>{cancelled=true;clearInterval(timer);window.removeEventListener('focus',focus);};
  },[selected,visible,tab,revision,currentOperator?.id]);

  const draft=drafts[selected] || {text:'',file:null,requestKey:null};
  function saveDrafts(next) {
    setDrafts(next);
    try {
      const textOnly=Object.fromEntries(Object.entries(next).filter(([,d])=>d.text).map(([id,d])=>[id,{text:d.text,requestKey:d.requestKey || null}]));
      sessionStorage.setItem(draftKey,JSON.stringify(textOnly));
    } catch {}
  }
  function changeDraft(change) {saveDrafts({...drafts,[selected]:{...draft,...change,requestKey:null}});}
  async function reply(event) {
    event.preventDefault();if(busyRef.current || assigningRef.current || !selected || !draft.text.trim() || view?.thread.assigned_operator_id!==currentOperator?.id)return;
    const id=selected,requestKey=draft.requestKey || crypto.randomUUID();
    saveDrafts({...drafts,[id]:{...draft,requestKey}});busyRef.current=true;setBusy(true);
    try {
      const body=new FormData();body.append('text',draft.text);body.append('request_key',requestKey);
      if(draft.file)body.append('attachment',draft.file);
      await window.apiFetch('POST',`/api/email/threads/${id}/reply`,body);
      setDrafts(previous=>{const next={...previous};delete next[id];try{const saved=JSON.parse(sessionStorage.getItem(draftKey)||'{}');delete saved[id];sessionStorage.setItem(draftKey,JSON.stringify(saved));}catch{}return next;});
      if(fileRef.current)fileRef.current.value='';
      showToast('Ответ поставлен в очередь');setRevision(value=>value+1);
      if(currentId.current===id){const result=await window.apiFetch('GET',`/api/email/threads/${id}`);if(currentId.current===id)setView(result);}
    }catch(failure){showToast(typeof failure.detail==='string'?failure.detail:'Ответ не подтверждён. Повторите без изменения текста — дубликат не создастся.','error');}
    finally{busyRef.current=false;setBusy(false);}
  }
  async function toggleStatus() {
    if(!view || busyRef.current || assigningRef.current)return;
    const id=selected,status=view.thread.status==='closed'?'open':'closed';
    try{
      await window.apiFetch('POST',`/api/email/threads/${id}/status`,{status});setRevision(value=>value+1);
      if(currentId.current===id)setView(previous=>({...previous,thread:{...previous.thread,status}}));
    }catch{showToast('Не удалось изменить статус','error');}
  }
  async function assignTo(target) {
    if(!active || busyRef.current || assigningRef.current)return;
    const id=selected;assigningRef.current=true;setAssigning(true);
    try {
      const result=await window.apiFetch('POST',`/api/email/threads/${id}/assignment`,{operator_id:target,version:active.thread.assignment_version});
      if(currentId.current===id)setView(previous=>({...previous,thread:result}));
      setTransferTo('');setRevision(value=>value+1);
      showToast(target===currentOperator?.id?'Обращение закреплено за вами':target?'Обращение передано оператору':'Обращение возвращено в общую очередь');
    } catch(failure) {
      showToast(typeof failure.detail==='string'?failure.detail:'Не удалось изменить ответственного','error');
      setRevision(value=>value+1);
    } finally {assigningRef.current=false;setAssigning(false);}
  }
  async function toggleNotifications() {
    if(typeof Notification==='undefined')return;
    if(notices){setNotices(false);try{localStorage.setItem(`mail-notices:${currentOperator?.id}`,'false');}catch{}return;}
    const result=await Notification.requestPermission();setPermission(result);
    if(result==='granted'){setNotices(true);try{localStorage.setItem(`mail-notices:${currentOperator?.id}`,'true');}catch{}}
    else showToast('Уведомления заблокированы в настройках браузера','error');
  }
  const healthy=health?.enabled && health.agents.length>0 && health.agents.every(agent=>!agent.error_code && Date.now()-new Date(agent.last_seen).getTime()<120000);
  const active=view?.thread.id===selected?view:null;
  const mine=active?.thread.assigned_operator_id===currentOperator?.id;
  const canManage=mine || currentOperator?.role==='admin';
  const ready=mine && !assigning && config?.enabled && config.senders.some(row=>row.address===active?.thread.mailbox && row.ready);
  const inputClass='w-full bg-[rgb(var(--hd-canvas))] border border-[rgb(var(--hd-border))] rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-[rgb(var(--hd-accent))]';
  function openThread(id){setSelected(id);setError('');}

  return <div className="h-full flex flex-col min-h-0 bg-[rgb(var(--hd-canvas))]">
    <header className="shrink-0 px-4 md:px-6 py-4 border-b border-[rgb(var(--hd-border))] flex flex-wrap justify-between items-center gap-3">
      <div><h1 className="text-lg font-semibold">Почта поддержки</h1>
        <p role="status" className={'text-xs mt-1 '+(healthy?'text-[rgb(var(--hd-mail-healthy))]':'text-[rgb(var(--hd-review-pending))]')}>
          {!health?'Проверяем подключение…':healthy?'● Входящие подключены · обновляются автоматически':!health.enabled?'Входящие не подключены':'● Синхронизация задерживается'}</p></div>
      <div className="flex gap-2 items-center">
        {permission!=='unsupported' && <button type="button" onClick={toggleNotifications} aria-pressed={notices} className="px-3 py-2 text-xs rounded-lg border border-[rgb(var(--hd-border))] text-[rgb(var(--hd-mail-secondary))]">{notices?'Уведомления включены':'Включить уведомления'}</button>}
        <button onClick={()=>setTab(tab==='compose'?'conversations':'compose')} className="px-3 py-2 bg-[rgb(var(--hd-accent))] text-white rounded-lg text-sm">{tab==='compose'?'К входящим':'+ Новое письмо'}</button>
      </div>
    </header>
    {error && <p role="alert" className="shrink-0 px-5 py-2 text-sm text-[rgb(var(--hd-danger-text))] bg-[#ef4444]/10">{error}</p>}
    {tab==='compose'?<div className="min-h-0 flex-1"><EmailComposeScreen visible={visible} showToast={showToast} currentOperator={currentOperator}/></div>:<div className="flex flex-1 min-h-0">
      <aside aria-label="Папки почты" className={'shrink-0 w-[190px] border-r border-[rgb(var(--hd-border))] p-3 hidden lg:block '+(selected?'':'')}>
        <label className="text-[11px] uppercase tracking-wider text-[rgb(var(--hd-secondary))] px-2">Почтовый ящик</label>
        <select aria-label="Почтовый ящик" value={mailbox} onChange={event=>{setMailbox(event.target.value);setPage(1);}} className={inputClass+' my-3 text-xs'}>
          <option value="">Все ящики</option>{config?.senders.map(row=><option key={row.address} value={row.address}>{row.address}</option>)}
        </select>
        <nav className="space-y-1">{MAIL_FOLDERS.map(([id,label])=><button key={id} aria-current={folder===id?'page':undefined} onClick={()=>{setFolder(id);setPage(1);}} className={'w-full flex justify-between gap-2 text-left px-3 py-2.5 rounded-lg text-xs '+(folder===id?'bg-[rgb(var(--hd-mail-tab))] text-[rgb(var(--hd-link))]':'text-[rgb(var(--hd-mail-secondary))] hover:bg-[rgb(var(--hd-mail-hover-alt))]')}>
          <span>{label}</span><span className="tabular-nums">{data.counts[id] || 0}</span></button>)}</nav>
        <p className="text-[11px] leading-relaxed text-[rgb(var(--hd-mail-muted))] px-2 mt-6">Новые письма видны и при работе в других разделах. Черновики сохраняются в этой вкладке.</p>
      </aside>
      <section aria-label="Список писем" className={'flex-col min-h-0 border-r border-[rgb(var(--hd-border))] w-full md:w-[330px] xl:w-[380px] md:shrink-0 '+(selected?'hidden md:flex':'flex')}>
        <div className="shrink-0 p-3 space-y-2 border-b border-[rgb(var(--hd-border))]">
          <div role="group" aria-label="Ответственный" className="flex gap-1 rounded-lg bg-[rgb(var(--hd-mail-filter))] p-1">{[['mine','Мои'],['unassigned','Без ответственного'],['all','Все']].map(([id,label])=><button key={id} aria-pressed={scope===id} onClick={()=>{setScope(id);setPage(1);}} className={'flex-1 rounded-md px-1 py-2 text-[10px] leading-tight '+(scope===id?'bg-[rgb(var(--hd-mail-chip))] text-[rgb(var(--hd-mail-link))]':'text-[rgb(var(--hd-secondary))]')}>
            {label}<span className="block mt-1 tabular-nums">{data.scope_counts?.[id] || 0}</span></button>)}</div>
          <input ref={searchRef} type="search" aria-label="Поиск переписки" placeholder="Поиск по клиенту или теме" value={query} onChange={event=>setQuery(event.target.value)} className={inputClass}/>
          <div className="flex gap-2 lg:hidden">
            <select aria-label="Папка" value={folder} onChange={event=>{setFolder(event.target.value);setPage(1);}} className={inputClass+' text-xs'}>{MAIL_FOLDERS.map(([id,label])=><option key={id} value={id}>{label}</option>)}</select>
            <select aria-label="Почтовый ящик" value={mailbox} onChange={event=>{setMailbox(event.target.value);setPage(1);}} className={inputClass+' text-xs'}><option value="">Все ящики</option>{config?.senders.map(row=><option key={row.address} value={row.address}>{row.address}</option>)}</select>
          </div>
          <div className="flex justify-between items-center text-xs text-[rgb(var(--hd-secondary))]"><span>{MAIL_FOLDERS.find(([id])=>id===folder)?.[1]} · {data.total}</span><button aria-label="Обновить почту" onClick={()=>setRevision(value=>value+1)} className="text-[rgb(var(--hd-link))] p-1">Обновить</button></div>
        </div>
        <div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin" aria-busy={loading}>
          {!data.items.length && <div className="px-6 py-12 text-center"><p className="text-sm text-[rgb(var(--hd-mail-text))]">{loading?'Загружаем письма…':search?'Ничего не найдено':folder==='awaiting'?'Все обращения обработаны':'Здесь пока нет писем'}</p><p className="text-xs text-[rgb(var(--hd-mail-muted))] mt-2">{!loading && (search?'Попробуйте другой адрес или тему.':folder==='awaiting'?'История доступна в папке «Вся почта».':'Новые обращения появятся автоматически.')}</p></div>}
          {data.items.map(row=><button key={row.id} aria-pressed={selected===row.id} onClick={()=>openThread(row.id)} className={'w-full text-left px-4 py-4 border-b border-[rgb(var(--hd-mail-border))] border-l-2 transition '+(selected===row.id?'border-l-[rgb(var(--hd-accent))] bg-[rgb(var(--hd-mail-selected))]':'border-l-transparent hover:bg-[rgb(var(--hd-mail-hover))]')}>
            <span className="flex justify-between items-baseline gap-2"><span className={'truncate text-sm '+(row.unread_count?'font-semibold text-[rgb(var(--hd-text))]':'text-[rgb(var(--hd-mail-text))]')}>{row.customer_name || row.customer_email}</span><time className="shrink-0 text-[10px] text-[rgb(var(--hd-secondary))]">{new Date(row.activity_at || row.updated_at).toLocaleDateString('ru-RU',{day:'numeric',month:'short'})}</time></span>
            <span className={'block text-xs truncate mt-1 '+(row.unread_count?'font-medium text-[rgb(var(--hd-mail-unread-text))]':'text-[rgb(var(--hd-mail-secondary))]')}>{row.subject || 'Без темы'}</span>
            <span className="block text-xs text-[rgb(var(--hd-mail-muted))] truncate mt-1">{row.preview || row.customer_email}</span>
            <span className="flex items-center gap-2 mt-2 text-[10px] text-[rgb(var(--hd-secondary))]"><span className="truncate">{row.mailbox}</span>{row.has_attachment && <span title="Есть вложение">📎</span>}{drafts[row.id]?.text && <span className="text-[rgb(var(--hd-mail-draft))]">Черновик</span>}{row.unread_count>0 && <span className="ml-auto shrink-0 bg-[rgb(var(--hd-accent))] text-white rounded-full px-1.5 min-w-[18px] text-center">{row.unread_count}</span>}{row.status==='closed' && <span className="ml-auto">Закрыто</span>}</span><span className="block mt-1.5 text-[10px] text-[rgb(var(--hd-secondary))] truncate">{row.assigned_operator_id?(row.assigned_operator_id===currentOperator?.id?'Ответственный: вы':`Ответственный: ${row.assigned_operator_name || 'оператор'}`):'Без ответственного'}</span>
          </button>)}
        </div>
        <footer className="shrink-0 border-t border-[rgb(var(--hd-border))] p-3 flex items-center justify-between text-xs text-[rgb(var(--hd-secondary))]">
          <button aria-label="Предыдущая страница" disabled={data.page<=1 || loading} onClick={()=>setPage(Math.max(1,data.page-1))} className="px-2 py-1 disabled:opacity-30">← Назад</button><span>{data.page} / {data.pages}</span><button aria-label="Следующая страница" disabled={data.page>=data.pages || loading} onClick={()=>setPage(data.page+1)} className="px-2 py-1 disabled:opacity-30">Далее →</button>
        </footer>
      </section>
      <section aria-label="Переписка с клиентом" className={'flex-1 min-w-0 min-h-0 flex-col '+(selected?'flex':'hidden md:flex')}>
        {!active?<div className="flex-1 flex flex-col items-center justify-center p-8 text-center"><span className="text-3xl text-[rgb(var(--hd-accent))] mb-4">✉</span><h2 className="text-base text-[rgb(var(--hd-mail-text))]">{selected?'Загружаем переписку…':'Выберите обращение'}</h2><p className="text-sm text-[rgb(var(--hd-mail-muted))] mt-2 max-w-xs">Письма клиента, вложения и ответы команды — в одной переписке.</p>{selected && <button className="md:hidden text-sm text-[rgb(var(--hd-link))] mt-4" onClick={()=>setSelected(null)}>К списку писем</button>}</div>:<>
          <header className="shrink-0 px-4 md:px-6 py-4 border-b border-[rgb(var(--hd-border))] flex justify-between items-start gap-3">
            <div className="min-w-0"><button onClick={()=>setSelected(null)} className="md:hidden text-xs text-[rgb(var(--hd-link))] mb-2">← К письмам</button><h2 className="font-semibold text-sm truncate">{active.thread.subject || 'Без темы'}</h2><p className="text-xs text-[rgb(var(--hd-mail-secondary))] mt-1 break-all">{active.thread.customer_name && `${active.thread.customer_name} · `}{active.thread.customer_email}</p><p className="text-[11px] text-[rgb(var(--hd-mail-muted))] mt-1">Ящик: {active.thread.mailbox}</p></div>
            <button onClick={toggleStatus} disabled={busy || assigning || !canManage} className="shrink-0 px-3 py-2 border border-[rgb(var(--hd-mail-border-strong))] rounded-lg text-xs text-[rgb(var(--hd-mail-secondary))] disabled:opacity-40">{active.thread.status==='closed'?'Открыть':'Закрыть обращение'}</button>
          </header>
          <div className="shrink-0 px-4 md:px-6 py-3 border-b border-[rgb(var(--hd-border))] bg-[rgb(var(--hd-mail-surface))] space-y-2">
            <div className="flex flex-wrap items-center justify-between gap-2"><p className="text-xs text-[rgb(var(--hd-mail-secondary))]">{active.thread.assigned_operator_id?`Ответственный: ${active.thread.assigned_operator_name || 'оператор'}${mine?' (вы)':''}`:'Обращение пока без ответственного'}</p>
              {(!active.thread.assigned_operator_id || (!mine && currentOperator?.role==='admin')) && <button onClick={()=>assignTo(currentOperator.id)} disabled={busy || assigning} className="px-3 py-2 bg-[rgb(var(--hd-mail-action))] text-[rgb(var(--hd-mail-link))] rounded-lg text-xs disabled:opacity-40">{assigning?'Сохраняем…':'Взять в работу'}</button>}
            </div>
            {canManage && active.thread.assigned_operator_id && <div className="flex flex-wrap items-center gap-2">
              <select aria-label="Передать обращение оператору" value={transferTo} disabled={busy || assigning} onChange={event=>setTransferTo(event.target.value)} className={inputClass+' text-xs !w-auto max-w-[200px]'}><option value="">Передать коллеге…</option>{operators.filter(op=>op.id!==active.thread.assigned_operator_id).map(op=><option key={op.id} value={op.id}>{op.name}{op.paused?' · на паузе':''}</option>)}</select>
              <button onClick={()=>assignTo(Number(transferTo))} disabled={!transferTo || busy || assigning} className="text-xs text-[rgb(var(--hd-link))] px-2 py-2 disabled:opacity-30">Передать</button>
              <button onClick={()=>assignTo(null)} disabled={busy || assigning} className="text-xs text-[rgb(var(--hd-secondary))] px-2 py-2 disabled:opacity-30">В общую очередь</button>
            </div>}
            {active.assignment_history?.length>0 && <details className="text-[11px] text-[rgb(var(--hd-mail-muted))]"><summary className="cursor-pointer">История назначений</summary><div className="mt-2 space-y-1 max-h-24 overflow-y-auto">{active.assignment_history.map(event=><p key={event.id}>{new Date(event.created_at).toLocaleString('ru-RU')} · {event.actor_name}: {event.previous_name || 'Общая очередь'} → {event.new_name || 'Общая очередь'}</p>)}</div></details>}
          </div>
          <div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin px-4 md:px-6 py-5 space-y-4" ref={bodyRef}>
            {active.messages.map(message=><article key={`${message.direction}-${message.id}`} className={'border rounded-xl p-4 '+(message.direction==='incoming'?'border-[rgb(var(--hd-border))] bg-[rgb(var(--hd-mail-message))]':'border-[rgb(var(--hd-mail-outgoing-border))] bg-[rgb(var(--hd-mail-outgoing))]')}>
              <div className="flex flex-wrap justify-between gap-2 text-xs mb-3"><span className="font-medium text-[rgb(var(--hd-mail-text))]">{message.direction==='incoming'?'Клиент':message.operator_name || 'Поддержка'}</span><span className="text-[rgb(var(--hd-secondary))]">{new Date(message.created_at).toLocaleString('ru-RU')}{message.state && <span className={'ml-2 '+(MAIL_STATES[message.state]?.[1] || '')}>{MAIL_STATES[message.state]?.[0] || message.state}</span>}</span></div>
              <p className="text-sm whitespace-pre-wrap break-words leading-relaxed">{message.body}</p>
              {(message.attachments || []).map(file=><button key={file.id} className="block mt-3 text-xs text-[rgb(var(--hd-link))] break-all" onClick={()=>downloadMailAttachment(`/api/email/attachments/${file.id}`,file.name).catch(()=>showToast('Не удалось скачать вложение','error'))}>📎 {file.name}</button>)}
              {message.attachment_name && <button className="block mt-3 text-xs text-[rgb(var(--hd-link))] break-all" onClick={()=>downloadMailAttachment(`/api/email/outbox/${message.id}/attachment`,message.attachment_name).catch(()=>showToast('Не удалось скачать вложение','error'))}>📎 {message.attachment_name}</button>}
            </article>)}
          </div>
          <form onSubmit={reply} className="shrink-0 border-t border-[rgb(var(--hd-border))] p-4 md:px-6 space-y-2 bg-[rgb(var(--hd-surface))]">
            <div className="flex justify-between gap-2 text-[11px] text-[rgb(var(--hd-secondary))]"><span>Ответ от {active.thread.mailbox}</span><span aria-live="polite">{draft.text?'Черновик сохранён в этой вкладке':''}</span></div>
            <textarea aria-label="Ответ клиенту" rows={4} maxLength={20000} required disabled={busy || !mine || assigning} value={draft.text} onChange={event=>changeDraft({text:event.target.value})} onKeyDown={event=>{if((event.ctrlKey || event.metaKey) && event.key==='Enter'){event.preventDefault();if(ready)event.currentTarget.form.requestSubmit();}}} placeholder="Напишите ответ клиенту…" className={inputClass+' resize-y max-h-[30vh]'}/>
            <input ref={fileRef} key={selected} type="file" aria-label="Вложение к ответу" disabled={busy} className="sr-only" onChange={event=>{const file=event.target.files[0] || null;if(file?.size>10*1024*1024){event.target.value='';showToast('Вложение — до 10 МБ','error');return;}changeDraft({file});}}/>
            {draft.file && <div className="text-xs text-[rgb(var(--hd-mail-secondary))] break-all">📎 {draft.file.name}<button type="button" disabled={busy} className="ml-2 text-[rgb(var(--hd-link))]" onClick={()=>{changeDraft({file:null});if(fileRef.current)fileRef.current.value='';}}>Убрать</button></div>}
            <div className="flex justify-between items-center gap-2"><button type="button" disabled={busy} onClick={()=>fileRef.current?.click()} className="text-xs text-[rgb(var(--hd-mail-secondary))] px-2 py-2">Прикрепить файл</button><div className="flex items-center gap-3"><span className="hidden xl:inline text-[10px] text-[rgb(var(--hd-mail-muted))]">Ctrl / ⌘ + Enter</span><button type="submit" disabled={busy || !ready || !draft.text.trim()} className="px-4 py-2 bg-[rgb(var(--hd-accent))] rounded-lg text-white text-sm disabled:opacity-40">{busy?'Сохраняем…':'Отправить ответ'}</button></div></div>
            {!ready && <p className="text-xs text-[rgb(var(--hd-review-pending))]">{!mine?'Ответ доступен ответственному. Возьмите обращение в работу или попросите передать его вам.':'Отправка с этого ящика пока недоступна.'}</p>}
          </form>
        </>}
      </section>
    </div>}
  </div>;
}
window.EmailScreen=EmailScreen;
window.EmailNavBadge=EmailNavBadge;