/* Legal Coach rail. Client-facing mirror of the lawyer's AICoCounselRail.
   Collapsed = rounded pill on the right edge of the app.
   Expanded = full chat panel. Width animates smoothly. */

const LegalCoachRail = ({ open, onOpen, onClose }) => {
  return (
    <div style={{
      width: open ? 340 : 60,
      height: '100%',
      flexShrink: 0,
      position: 'relative',
      transition: 'width 420ms cubic-bezier(0.22, 1, 0.36, 1)',
      overflow: 'hidden',
    }}>
      {/* Collapsed pill */}
      <div
        onClick={onOpen}
        style={{
          position: 'absolute',
          top: 18,
          bottom: 18,
          left: 10,
          width: 40,
          borderRadius: 20,
          background: `linear-gradient(180deg, ${THEME.blueSoft}, ${THEME.glassSubtle})`,
          border: `1px solid ${THEME.glassBorder}`,
          backdropFilter: 'blur(16px) saturate(140%)',
          WebkitBackdropFilter: 'blur(16px) saturate(140%)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'space-between',
          paddingTop: 14,
          paddingBottom: 14,
          cursor: 'pointer',
          opacity: open ? 0 : 1,
          transform: open ? 'translateX(8px)' : 'translateX(0)',
          transition: 'opacity 240ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1)',
          pointerEvents: open ? 'none' : 'auto',
          boxShadow: `0 8px 24px -12px ${THEME.blue}40, inset 0 1px 0 ${THEME.glassHi}`,
        }}
      >
        <div style={{
          width: 26, height: 26, borderRadius: 13,
          background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 4px 10px -2px ${THEME.blue}80`,
        }}>
          <Icon d={Icons.sparkle} size={13} stroke="#fff" fill="#fff"/>
        </div>

        <div style={{
          writingMode: 'vertical-rl',
          transform: 'rotate(180deg)',
          fontSize: 10.5, color: THEME.accent, fontWeight: 600,
          letterSpacing: 2.2, textTransform: 'uppercase',
          fontFamily: 'Inter, system-ui',
        }}>
          Legal Coach
        </div>

        <div style={{ position: 'relative', width: 8, height: 8 }}>
          <div style={{
            position: 'absolute', inset: 0, borderRadius: 4,
            background: THEME.success,
            boxShadow: `0 0 6px ${THEME.success}`,
          }}/>
          <div style={{
            position: 'absolute', inset: -3, borderRadius: 7,
            border: `1px solid ${THEME.success}`,
            opacity: 0.5,
            animation: 'coachPulse 2s ease-out infinite',
          }}/>
        </div>
      </div>

      {/* Expanded panel */}
      <div style={{
        position: 'absolute',
        inset: 0,
        opacity: open ? 1 : 0,
        transform: open ? 'translateX(0)' : 'translateX(16px)',
        transition: 'opacity 280ms ease 80ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1)',
        pointerEvents: open ? 'auto' : 'none',
      }}>
        <LegalCoachPanel onClose={onClose}/>
      </div>

      <style>{`
        @keyframes coachPulse {
          0% { transform: scale(0.9); opacity: 0.6; }
          70% { transform: scale(1.8); opacity: 0; }
          100% { transform: scale(1.8); opacity: 0; }
        }
      `}</style>
    </div>
  );
};

const LegalCoachPanel = ({ onClose }) => {
  const [convo, setConvo] = React.useState([
    { from: 'ai', text: 'Hi Marcus. I\'ve reviewed your case. Your claim is **strong** on breach and damages. Ask me anything about your filing, evidence, or what to expect at the hearing.' },
    { from: 'me', text: 'What should I bring to the hearing?' },
    { from: 'ai', text: 'Bring: (1) 3 copies of every exhibit (A–H), (2) your original contract, (3) bank records showing the $12,400 deposit, (4) a 2-minute opening statement. I can help you practice. Dress: business casual. Arrive 30 min early.', cites: ['Small Claims rules · CCP §116.540'] },
  ]);

  return (
    <div style={{
      width: '100%', height: '100%',
      background: THEME.panel,
      backdropFilter: 'blur(24px) saturate(140%)',
      WebkitBackdropFilter: 'blur(24px) saturate(140%)',
      borderLeft: `1px solid ${THEME.glassBorder}`,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* header */}
      <div style={{ padding: '16px 16px 14px', borderBottom: `1px solid ${THEME.glassBorder}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 30, height: 30, borderRadius: 15,
            background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 4px 10px -2px ${THEME.blue}60`,
          }}>
            <Icon d={Icons.sparkle} size={14} stroke="#fff" fill="#fff"/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, color: THEME.text, fontWeight: 600, fontFamily: 'Fraunces, serif', letterSpacing: 0.2 }}>Legal Coach</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 2 }}>
              <span style={{ width: 5, height: 5, borderRadius: 3, background: THEME.success, boxShadow: `0 0 5px ${THEME.success}` }}/>
              <span style={{ fontSize: 10.5, color: THEME.textDim, fontWeight: 500 }}>Live · on your case</span>
            </div>
          </div>
          <span onClick={onClose} style={{
            fontSize: 20, color: THEME.textMute, cursor: 'pointer', lineHeight: 1,
            padding: 4, borderRadius: 6, userSelect: 'none',
          }}>×</span>
        </div>
      </div>

      {/* Quick-prompt chips */}
      <div style={{ padding: '12px 14px 6px', display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {[
          'What should I bring?',
          'Strength of my case?',
          'How much can I recover?',
          'Settle or go to hearing?',
        ].map((p, i) => (
          <span key={i} style={{
            fontSize: 11, padding: '4px 9px', borderRadius: 12,
            background: THEME.glassHi, border: `1px solid ${THEME.line}`,
            color: THEME.textDim, cursor: 'pointer', fontWeight: 500,
          }}>{p}</span>
        ))}
      </div>

      {/* Conversation */}
      <div style={{
        flex: 1, overflow: 'auto', padding: '10px 14px',
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        {convo.map((m, i) => (
          <div key={i} style={{
            padding: '10px 12px', borderRadius: 12,
            background: m.from === 'ai' ? THEME.blueSoft : THEME.blue,
            color: m.from === 'ai' ? THEME.text : '#fff',
            fontSize: 12.5, lineHeight: 1.55,
            border: m.from === 'ai' ? `1px solid ${THEME.blue}30` : 'none',
            alignSelf: m.from === 'ai' ? 'flex-start' : 'flex-end',
            maxWidth: '88%',
          }}>
            <div dangerouslySetInnerHTML={{ __html: m.text.replace(/\*\*(.+?)\*\*/g, `<strong style="color:${m.from === 'ai' ? THEME.blue : '#fff'}">$1</strong>`) }}/>
            {m.cites && (
              <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', marginTop: 7, paddingTop: 7, borderTop: `1px solid ${THEME.line}` }}>
                {m.cites.map((c, j) => (
                  <span key={j} style={{
                    fontSize: 10, padding: '2px 6px', borderRadius: 4,
                    background: THEME.glassHi, color: THEME.accent, fontWeight: 500,
                  }}>{c}</span>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>

      {/* AI-suggested insights */}
      <div style={{ padding: '8px 14px', borderTop: `1px solid ${THEME.glassBorder}` }}>
        <div style={{
          fontSize: 10, color: THEME.textMute, fontWeight: 600,
          letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 6,
        }}>Coach insights</div>
        {[
          { icon: Icons.alert, color: THEME.warn, text: '4 years remaining on statute of limitations' },
          { icon: Icons.eye, color: THEME.accent, text: 'Similar Alameda cases: 78% damage recovery avg' },
        ].map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 8, padding: '5px 0', alignItems: 'flex-start' }}>
            <Icon d={s.icon} size={12} stroke={s.color}/>
            <span style={{ fontSize: 11.5, color: THEME.textDim, lineHeight: 1.45, flex: 1 }}>{s.text}</span>
          </div>
        ))}
      </div>

      {/* Input */}
      <div style={{ padding: 12, borderTop: `1px solid ${THEME.glassBorder}` }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          background: THEME.glassSubtle, border: `1px solid ${THEME.line}`,
          borderRadius: 20, padding: '8px 10px 8px 14px',
        }}>
          <input placeholder="Ask about your case…" style={{
            flex: 1, background: 'transparent', border: 'none', outline: 'none',
            color: THEME.text, fontSize: 12.5, fontFamily: 'Inter',
          }}/>
          <button style={{
            width: 26, height: 26, borderRadius: 13, border: 'none', cursor: 'pointer',
            background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon d={Icons.send} size={12} stroke="#fff" fill="#fff"/>
          </button>
        </div>
      </div>
    </div>
  );
};

window.LegalCoachRail = LegalCoachRail;
window.LegalCoachPanel = LegalCoachPanel;