/* ===== AI Accountant Assistant ===== */
const Da = window.DATA;

function renderRich(text) {
  // bold **..**, paragraphs, bullet lines
  return text.split("\n").map((line, i) => {
    if (line.trim() === "") return <div key={i} style={{ height:6 }}></div>;
    const bullet = /^[•\d]/.test(line.trim());
    const parts = line.split(/(\*\*[^*]+\*\*)/g).map((p, j) =>
      p.startsWith("**") ? <b key={j}>{p.slice(2,-2)}</b> : <span key={j}>{p}</span>);
    return <div key={i} style={{ paddingLeft: bullet?4:0, marginTop:i?2:0 }}>{parts}</div>;
  });
}

function Assistant({ open, onClose, user }) {
  const greeting = user?.name
    ? `Hi ${user.name.split(' ')[0]} — I'm your ContaBilè assistant. I've gone through Osteria del Toro's books. Ask me anything, or pick a starter below.`
    : "Hi — I'm your ContaBilè assistant. Ask me anything about your books.";
  const [msgs, setMsgs] = useState([
    { role:"ai", text: greeting },
  ]);
  const [input, setInput] = useState("");
  const [typing, setTyping] = useState(false);
  const bodyRef = useRef();

  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [msgs, typing]);

  const ask = async (q) => {
    const question = (q || input).trim();
    if (!question) return;
    setMsgs(m => [...m, { role:"user", text:question }]);
    setInput("");
    setTyping(true);
    try {
      let answer;
      if (window.ContaAPI) {
        answer = await window.ContaAPI.chat(question);
      } else {
        answer = Da.aiAnswers[question] || "I can answer that from your books.";
      }
      setMsgs(m => [...m, { role:"ai", text:answer }]);
    } catch (err) {
      if (err.status === 402 || err.body?.error?.includes('Crediti')) {
        setMsgs(m => [...m, { role:"ai", text: err.body?.error || 'Crediti insufficienti per questa domanda.' }]);
      } else {
        const answer = Da.aiAnswers[question] ||
          "I can answer that from your books. In this prototype I've got canned responses for the suggested questions — try one of the chips to see ContaBilè reference your live transactions, receipts and payments.";
        setMsgs(m => [...m, { role:"ai", text:answer }]);
      }
    } finally {
      setTyping(false);
    }
  };

  const unused = Da.aiSuggestions.filter(s => !msgs.some(m => m.text === s));

  return (
    <>
      <div className={"assistant-scrim " + (open?"show":"")} style={{ pointerEvents: open?"auto":"none" }} onClick={onClose}></div>
      <div className={"assistant " + (open?"show":"")}>
        <div className="asst-head">
          <div className="asst-orb"><img className="brand-on-dark" src="assets/bull.png" alt="" style={{ width:24, height:24, objectFit:"contain" }}/></div>
          <div style={{ flex:1 }}>
            <div style={{ fontWeight:600, fontSize:14.5 }}>ContaBilè Assistant</div>
            <div style={{ fontSize:11.5, color:"var(--accent-ink)", display:"flex", alignItems:"center", gap:5 }}>
              <span className="bdot" style={{ width:6, height:6, borderRadius:"50%", background:"var(--pos)" }}></span> Connected to your books</div>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="close"/></button>
        </div>

        <div className="asst-body" ref={bodyRef}>
          {msgs.map((m,i) => (
            <div key={i} className={"msg " + m.role}>
              {m.role==="ai"
                ? <div style={{ display:"flex", gap:9, alignItems:"flex-start" }}>
                    <div className="asst-orb" style={{ width:26, height:26, borderRadius:8, flex:"0 0 26px" }}>
                      <img className="brand-on-dark" src="assets/bull.png" alt="" style={{ width:17, height:17, objectFit:"contain" }}/>
                    </div>
                    <div className="ai-bubble">{renderRich(m.text)}</div>
                  </div>
                : m.text}
            </div>
          ))}
          {typing && (
            <div className="msg ai"><div style={{ display:"flex", gap:9, alignItems:"center" }}>
              <div className="asst-orb" style={{ width:26, height:26, borderRadius:8, flex:"0 0 26px" }}>
                <img className="brand-on-dark" src="assets/bull.png" alt="" style={{ width:17, height:17, objectFit:"contain" }}/>
              </div>
              <div className="ai-bubble"><span className="typing"><span></span><span></span><span></span></span></div>
            </div></div>
          )}

          {unused.length > 0 && !typing && (
            <div style={{ display:"flex", flexDirection:"column", gap:7, marginTop:4 }}>
              {unused.map((s,i) => <button key={i} className="chip" onClick={() => ask(s)}>{s}</button>)}
            </div>
          )}
        </div>

        <div className="asst-foot">
          <div className="asst-input">
            <input placeholder="Ask about your finances…" value={input}
              onChange={e => setInput(e.target.value)} onKeyDown={e => e.key==="Enter" && ask()}/>
            <button className="icon-btn" style={{ width:34, height:34, background:"var(--navy)", color:"#fff" }} onClick={() => ask()}>
              <Icon name="send" size={16}/></button>
          </div>
          <div style={{ fontSize:10.5, color:"var(--text-3)", textAlign:"center", marginTop:8 }}>
            Mock responses · plugs into any LLM via <span className="mono">AIAssistantService</span></div>
        </div>
      </div>
    </>
  );
}

// ---------- Add receipt modal (upload / capture) ----------
function AddReceiptModal({ onClose }) {
  const [stage, setStage] = useState("drop"); // drop -> scanning -> done
  useEffect(() => {
    if (stage === "scanning") { const t = setTimeout(() => setStage("done"), 1900); return () => clearTimeout(t); }
  }, [stage]);

  return (
    <Modal title="Add receipt" sub="Upload a PDF, or photograph a paper receipt" onClose={onClose}
      foot={stage==="done" ? <button className="btn btn-accent" onClick={onClose}><Icon name="check" size={15}/> Review extracted data</button>
        : <button className="btn" onClick={onClose}>Cancel</button>}>
      {stage==="drop" && (
        <>
          <div className="ph" onClick={() => setStage("scanning")} style={{ borderRadius:14, minHeight:200, cursor:"pointer",
            border:"2px dashed var(--line)", flexDirection:"column", gap:12, background:"var(--surface-2)" }}>
            <div className="rico" style={{ width:52, height:52 }}><Icon name="upload" size={24}/></div>
            <div style={{ fontWeight:600 }}>Drop files or click to browse</div>
            <div style={{ fontSize:12.5, color:"var(--text-3)" }}>PDF, JPG, PNG · up to 10MB</div>
          </div>
          <div style={{ display:"flex", gap:12, marginTop:16 }}>
            <button className="btn" style={{ flex:1, justifyContent:"center" }} onClick={() => setStage("scanning")}><Icon name="camera" size={16}/> Take a photo</button>
            <button className="btn" style={{ flex:1, justifyContent:"center" }} onClick={() => setStage("scanning")}><Icon name="upload" size={16}/> Browse files</button>
          </div>
        </>
      )}
      {stage==="scanning" && (
        <div style={{ textAlign:"center", padding:"24px 0" }}>
          <div className="ph" style={{ width:160, height:200, margin:"0 auto 18px", borderRadius:12, position:"relative", overflow:"hidden" }}>
            <span className="ph-label">Receipt</span>
            <div style={{ position:"absolute", left:0, right:0, height:3, background:"var(--accent)", boxShadow:"0 0 14px var(--accent)",
              animation:"scanline 1.4s ease-in-out infinite" }}></div>
          </div>
          <div style={{ fontWeight:600, fontSize:15 }}>Extracting data…</div>
          <div style={{ fontSize:13, color:"var(--text-2)", marginTop:6 }}>ContaBilè OCR is reading the vendor, total, VAT and line items.</div>
          <style>{`@keyframes scanline { 0%{top:8%} 50%{top:88%} 100%{top:8%} }`}</style>
        </div>
      )}
      {stage==="done" && (
        <div style={{ textAlign:"center", padding:"16px 0" }}>
          <div className="check-circle"><svg viewBox="0 0 24 24"><path d="M5 12.5 10 17l9-10"/></svg></div>
          <div style={{ fontSize:16, fontWeight:600 }}>Extracted successfully</div>
          <div style={{ fontSize:13.5, color:"var(--text-2)", marginTop:6, maxWidth:360, margin:"6px auto 0" }}>
            Found <b>Caffè Torrefazione</b> · <b>€540.00</b> · 1 line item · 97% confidence. Review and approve to add it to your books.
          </div>
        </div>
      )}
    </Modal>
  );
}

Object.assign(window, { Assistant, AddReceiptModal });