// tickets.jsx — AI ticket intake: plain-language description → categorized, prioritized, editable ticket.
const { useState: useStateT } = React;

const CATEGORIES = ['Network', 'Security', 'Email & Accounts', 'Hardware', 'Cloud & Apps', 'Other'];
const PRIORITIES = ['Low', 'Medium', 'High', 'Urgent'];
const PRIO_STYLE = {
  Low: { dot: 'var(--color-slate)', bg: 'var(--color-cloud)', text: 'var(--color-slate)', border: 'var(--color-line)' },
  Medium: { dot: 'var(--color-teal)', bg: 'var(--color-mist)', text: 'var(--color-teal-deep)', border: 'var(--color-teal-mid)' },
  High: { dot: 'var(--color-navy)', bg: '#EAF0F7', text: 'var(--color-navy)', border: '#C9D8E8' },
  Urgent: { dot: '#C0492F', bg: '#FBEDE9', text: '#9A3320', border: '#EBC6BC' },
};
const SLA = { Urgent: 'within the hour', High: 'same business day', Medium: 'by the next business day', Low: 'within two business days' };

function buildTicketPrompt(desc) {
  return `You are the support-intake assistant for ITbyPeople, a human-first managed IT provider. Voice: warm, honest, clear, jargon-free, no exclamation marks, never fear-based.

A customer described an issue. Read it and turn it into a clean support ticket. Categories: ${CATEGORIES.join(', ')}. Priorities: Low, Medium, High, Urgent (Urgent = work stopped or a security concern affecting many people; High = one person blocked or time-sensitive; Medium = annoying but workable; Low = question or minor request).

Customer's words:
"""${desc}"""

Return ONLY minified JSON in exactly this shape:
{"reply":"<1-2 warm sentences acknowledging it and what happens next>","title":"<concise ticket title, <=8 words>","category":"<one category>","priority":"<one priority>","summary":"<1 sentence restatement of the problem>","impact":"<who/what is affected, <=10 words>","followUps":["<up to 2 short clarifying questions>"]}`;
}

function heuristicTicket(desc) {
  const l = desc.toLowerCase();
  let category = 'Other', priority = 'Medium';
  if (/fire ?wall|network|wifi|wi-fi|internet|router|vpn|slow connection|offline/.test(l)) category = 'Network';
  else if (/secur|phish|virus|ransom|breach|suspici|malware|hacked|spam|scam/.test(l)) category = 'Security';
  else if (/email|outlook|365|mailbox|password|login|sign in|account|locked out|mfa/.test(l)) category = 'Email & Accounts';
  else if (/laptop|desktop|printer|monitor|keyboard|screen|hardware|device|won't turn/.test(l)) category = 'Hardware';
  else if (/cloud|backup|server|sharepoint|onedrive|teams|app|software|migrat/.test(l)) category = 'Cloud & Apps';
  if (/down|can't work|cant work|everyone|whole office|nobody|all of us|stopped|breach|ransom|hacked|urgent|emergency/.test(l)) priority = 'Urgent';
  else if (/can't|cant|blocked|deadline|asap|today|locked out|important client/.test(l)) priority = 'High';
  else if (/question|whenever|sometime|minor|small|just wondering|when you get/.test(l)) priority = 'Low';
  if (category === 'Security' && priority === 'Medium') priority = 'High';
  const firstLine = desc.trim().split(/[.\n]/)[0].slice(0, 60);
  const title = firstLine ? firstLine.charAt(0).toUpperCase() + firstLine.slice(1) : 'Support request';
  return {
    reply: "Thanks for the detail — I've drafted a ticket below. Take a look, fix anything that's off, and a real engineer picks it up from there.",
    title, category, priority,
    summary: desc.trim().slice(0, 140),
    impact: priority === 'Urgent' ? 'Multiple people affected' : priority === 'High' ? 'One person blocked' : 'Limited impact',
    followUps: category === 'Security' ? ['When did you first notice this?'] : ['Is anyone else seeing the same thing?'],
  };
}

function TicketIntake() {
  const ns = window.ITbyPeopleDesignSystem_44acd8 || {};
  const { Button, Input, Textarea } = ns;
  const [step, setStep] = useStateT('describe'); // describe | review | submitted
  const [desc, setDesc] = useStateT('');
  const [contact, setContact] = useStateT({ name: '', email: '' });
  const [loading, setLoading] = useStateT(false);
  const [ai, setAi] = useStateT(null);
  const [ticket, setTicket] = useStateT({ title: '', category: 'Other', priority: 'Medium' });
  const [ticketId, setTicketId] = useStateT('');

  async function analyze() {
    if (!desc.trim() || loading) return;
    setLoading(true);
    const fb = heuristicTicket(desc);
    const res = await askClaudeJSON(buildTicketPrompt(desc), fb);
    const r = res && res.title ? res : fb;
    if (!CATEGORIES.includes(r.category)) r.category = fb.category;
    if (!PRIORITIES.includes(r.priority)) r.priority = fb.priority;
    setAi(r);
    setTicket({ title: r.title, category: r.category, priority: r.priority });
    setLoading(false);
    setStep('review');
  }

  const chips = ['Our Wi-Fi keeps dropping in the back office', "I got an email asking for my password — looks suspicious", "New hire starts Monday and needs a laptop set up"];
  const cardStyle = { backgroundColor: '#fff', border: '0.5px solid var(--color-line)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-md)' };

  if (step === 'submitted') {
    const ps = PRIO_STYLE[ticket.priority];
    return (
      <div style={{ ...cardStyle, maxWidth: 640, margin: '0 auto', overflow: 'hidden' }}>
        <div style={{ background: 'linear-gradient(180deg,#0F2645,#13315B)', padding: '38px 40px 32px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
          <Constellation opacity={0.4} seed={13} />
          <div style={{ position: 'relative' }}>
            <div style={{ width: 52, height: 52, borderRadius: '50%', backgroundColor: 'var(--color-teal)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><Icon name="check" size={28} color="#fff" strokeWidth={2.2} /></div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: '0 0 6px', letterSpacing: '-0.02em' }}>Ticket {ticketId} is in.</h3>
            <p style={{ margin: 0, color: 'rgba(255,255,255,0.8)', fontSize: 15, lineHeight: 1.6 }}>A real engineer will reach out {SLA[ticket.priority]}. We've emailed {contact.email || 'you'} a copy.</p>
          </div>
        </div>
        <div style={{ padding: '26px 40px 32px' }}>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 18 }}>
            <span style={chipStyle(ps.bg, ps.text, ps.border)}><span style={{ width: 7, height: 7, borderRadius: '50%', backgroundColor: ps.dot }} />{ticket.priority} priority</span>
            <span style={chipStyle('var(--color-cloud)', 'var(--color-navy)', 'var(--color-line)')}>{ticket.category}</span>
          </div>
          <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--color-navy)', marginBottom: 6 }}>{ticket.title}</div>
          <p style={{ fontSize: 14.5, color: 'var(--color-slate)', lineHeight: 1.6, margin: '0 0 22px' }}>{desc}</p>
          <Button variant="secondary" onClick={() => { setStep('describe'); setDesc(''); setAi(null); setContact({ name: '', email: '' }); }}>Open another ticket</Button>
        </div>
      </div>
    );
  }

  if (step === 'review') {
    const ps = PRIO_STYLE[ticket.priority];
    return (
      <div style={{ maxWidth: 640, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {ai && (
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', backgroundColor: 'var(--color-mist)', border: '1px solid var(--color-teal-mid)', borderRadius: 'var(--radius-lg)', padding: '15px 18px' }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', backgroundColor: 'var(--color-navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="sparkles" size={16} color="var(--color-teal)" /></div>
            <div style={{ fontSize: 14, color: 'var(--color-teal-deep)', lineHeight: 1.55 }}>{ai.reply}</div>
          </div>
        )}
        <div style={{ ...cardStyle, padding: 26 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--color-slate)' }}><Icon name="ticket" size={16} color="var(--color-slate)" />Draft ticket</div>
            <button onClick={() => setStep('describe')} style={{ backgroundColor: 'transparent', border: 'none', color: 'var(--color-teal)', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>Edit description</button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <Input label="Title" value={ticket.title} onChange={(e) => setTicket({ ...ticket, title: e.target.value })} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
              <div>
                <div style={fieldLabel}>Category</div>
                <select value={ticket.category} onChange={(e) => setTicket({ ...ticket, category: e.target.value })} className="itp-input" style={selectStyle}>
                  {CATEGORIES.map((c) => <option key={c}>{c}</option>)}
                </select>
              </div>
              <div>
                <div style={fieldLabel}>Priority <span style={{ fontWeight: 500, color: 'var(--color-teal)', textTransform: 'none', letterSpacing: 0 }}>· set by AI</span></div>
                <div style={{ display: 'flex', gap: 5 }}>
                  {PRIORITIES.map((p) => {
                    const on = ticket.priority === p; const s = PRIO_STYLE[p];
                    return <button key={p} onClick={() => setTicket({ ...ticket, priority: p })} style={{ flex: 1, height: 40, borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 12.5, fontWeight: 600, cursor: 'pointer', border: on ? `1.5px solid ${s.dot}` : '1px solid var(--color-line)', backgroundColor: on ? s.bg : '#fff', color: on ? s.text : 'var(--color-slate)' }}>{p}</button>;
                  })}
                </div>
              </div>
            </div>
            {ai && ai.impact && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, color: 'var(--color-slate)' }}><Icon name="alert" size={15} color={ps.dot} /><span style={{ color: 'var(--color-navy)', fontWeight: 600 }}>Impact:</span> {ai.impact}</div>
            )}
            <div>
              <div style={fieldLabel}>What's happening</div>
              <textarea value={desc} onChange={(e) => setDesc(e.target.value)} rows={3} className="itp-input" style={{ width: '100%', fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.5, color: 'var(--color-ink)', border: '1px solid var(--color-line)', borderRadius: 'var(--radius-md)', padding: '11px 14px', outline: 'none', resize: 'vertical' }} />
            </div>
            {ai && ai.followUps && ai.followUps.length > 0 && (
              <div style={{ backgroundColor: 'var(--color-cloud)', border: '1px solid var(--color-line)', borderRadius: 'var(--radius-md)', padding: '13px 16px' }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--color-navy)', marginBottom: 7 }}>The engineer will also want to know</div>
                {ai.followUps.map((q, i) => <div key={i} style={{ display: 'flex', gap: 8, fontSize: 13.5, color: 'var(--color-slate)', marginTop: i ? 5 : 0 }}><Icon name="dot" size={14} color="var(--color-teal)" />{q}</div>)}
              </div>
            )}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
              <Input label="Your name" placeholder="Jordan Rivera" value={contact.name} onChange={(e) => setContact({ ...contact, name: e.target.value })} />
              <Input label="Work email" type="email" placeholder="you@company.com" value={contact.email} onChange={(e) => setContact({ ...contact, email: e.target.value })} />
            </div>
          </div>
          <div style={{ marginTop: 22 }}>
            <Button variant="primary" fullWidth disabled={!ticket.title.trim() || !contact.name.trim() || !contact.email.trim()} onClick={async () => {
              const id = 'ITP-' + (4000 + Math.floor(Math.random() * 5000));
              setTicketId(id);
              try {
                await fetch('/api/support/tickets', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json' },
                  body: JSON.stringify({ ticket_id: id, title: ticket.title, description: desc, category: ticket.category, priority: ticket.priority, name: contact.name, email: contact.email }),
                });
              } catch { /* save failed silently */ }
              setStep('submitted');
            }} iconRight={<Icon name="arrowRight" size={17} color="#fff" />}>Submit ticket</Button>
          </div>
        </div>
      </div>
    );
  }

  // describe
  return (
    <div style={{ ...cardStyle, maxWidth: 640, margin: '0 auto', padding: 28 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 18 }}>
        <div style={{ width: 38, height: 38, borderRadius: '50%', backgroundColor: 'var(--color-navy)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="sparkles" size={19} color="var(--color-teal)" /></div>
        <div>
          <div style={{ fontWeight: 700, color: 'var(--color-navy)', fontSize: 15 }}>Open a ticket</div>
          <div style={{ fontSize: 12.5, color: 'var(--color-slate)' }}>Tell us what's going on. AI sorts it; a person fixes it.</div>
        </div>
      </div>
      <textarea value={desc} onChange={(e) => setDesc(e.target.value)} rows={5} placeholder="Describe what's happening in your own words — what you were doing, what went wrong, and how much it's getting in the way." className="itp-input" style={{ width: '100%', fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--color-ink)', border: '1px solid var(--color-line)', borderRadius: 'var(--radius-md)', padding: '14px 16px', outline: 'none', resize: 'vertical' }} />
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 14 }}>
        {chips.map((c) => <button key={c} onClick={() => setDesc(c)} style={{ backgroundColor: '#fff', border: '1px solid var(--color-teal-mid)', color: 'var(--color-teal-deep)', borderRadius: 999, padding: '7px 13px', fontSize: 12.5, fontFamily: 'var(--font-sans)', cursor: 'pointer', fontWeight: 500 }}>{c}</button>)}
      </div>
      <div style={{ marginTop: 22 }}>
        <Button variant="primary" fullWidth disabled={!desc.trim() || loading} onClick={analyze} iconLeft={loading ? null : <Icon name="sparkles" size={17} color="#fff" />}>
          {loading ? 'Reading your message…' : 'Sort this with AI'}
        </Button>
      </div>
    </div>
  );
}

const fieldLabel = { fontSize: 13, fontWeight: 600, color: 'var(--color-navy)', marginBottom: 6 };
const selectStyle = { width: '100%', height: 44, fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--color-ink)', backgroundColor: '#fff', border: '1px solid var(--color-line)', borderRadius: 'var(--radius-md)', padding: '0 12px', outline: 'none', cursor: 'pointer' };
const chipStyle = (bg, color, border) => ({ display: 'inline-flex', alignItems: 'center', gap: 7, backgroundColor: bg, color, border: `1px solid ${border}`, borderRadius: 999, padding: '6px 12px', fontSize: 13, fontWeight: 600 });

Object.assign(window, { TicketIntake });