// ─────────────────────────────────────────────
// DEV_Resources.jsx — Resources section
// (renamed from Support)
//
// Sub-views:
//   resources                  → default → library-public
//   resources-library-public   → DO-provided templates
//   resources-library-private  → Developer's own saved templates
//   resources-tickets          → Support ticket submission + list
//   resources-videos           → YouTube tutorials
// ─────────────────────────────────────────────

function DEVResources({ jwt, currentUser, view, onNav }) {
  // Default sub-view
  const activeView = view === 'resources' ? 'resources-library-public' : view;

  return (
    <div style={SR.layout}>
      {/* Sub-nav sidebar */}
      <div style={SR.sidebar}>
        <div style={SR.sideHead}>Resources</div>

        <div style={SR.sideGroup}>Library</div>
        {[
          { v:'resources-library-public',  label:'Public Library' },
          { v:'resources-library-private', label:'Private Library' },
        ].map(item => (
          <button
            key={item.v}
            style={{ ...SR.sideItem, ...(activeView === item.v ? SR.sideItemActive : {}) }}
            onClick={() => onNav(item.v)}
          >
            {item.label}
          </button>
        ))}

        <div style={SR.sideGroup}>Support</div>
        {[
          { v:'resources-tickets', label:'Tickets' },
          { v:'resources-videos',  label:'Videos' },
        ].map(item => (
          <button
            key={item.v}
            style={{ ...SR.sideItem, ...(activeView === item.v ? SR.sideItemActive : {}) }}
            onClick={() => onNav(item.v)}
          >
            {item.label}
          </button>
        ))}
      </div>

      {/* Panel content */}
      <div style={SR.panel}>
        {activeView === 'resources-library-public'  && <LibraryPublic  jwt={jwt} />}
        {activeView === 'resources-library-private' && <LibraryPrivate jwt={jwt} />}
        {activeView === 'resources-tickets'         && <TicketsPanel   jwt={jwt} currentUser={currentUser} />}
        {activeView === 'resources-videos'          && <VideosPanel />}
      </div>
    </div>
  );
}

// ── Public Library ────────────────────────────
function LibraryPublic({ jwt }) {
  const categories = [
    { label:'Value Lists',    count:0, desc:'Reusable dropdown and checkbox option sets.' },
    { label:'Tables',         count:0, desc:'Pre-built database table schemas you can import.' },
    { label:'Table + Design', count:0, desc:'Tables bundled with a matching detail layout.' },
    { label:'Full Apps',      count:0, desc:'Complete app templates ready to clone and customize.' },
  ];

  return (
    <div>
      <div style={SR.panelTitle}>Public Library</div>
      <p style={SR.panelDesc}>
        DataObjects-provided templates. Import any item directly into your apps.
      </p>
      <div style={SR.categoryGrid}>
        {categories.map(cat => (
          <div key={cat.label} style={SR.catCard}>
            <div style={SR.catLabel}>{cat.label}</div>
            <div style={SR.catCount}>{cat.count}</div>
            <div style={SR.catDesc}>{cat.desc}</div>
            <button style={SR.catBtn} disabled>Browse</button>
          </div>
        ))}
      </div>
      <div style={SR.placeholderNote}>
        Public library content is managed by DataObjects and will be available at launch.
      </div>
    </div>
  );
}

// ── Private Library ───────────────────────────
function LibraryPrivate({ jwt }) {
  // This will eventually pull from /v7/dev/library
  const tabs = ['Value Lists', 'Tables', 'Table + Design', 'Full Apps'];
  const [activeTab, setActiveTab] = React.useState(0);

  return (
    <div>
      <div style={SR.panelTitle}>Private Library</div>
      <p style={SR.panelDesc}>
        Your saved templates — value lists, tables, layouts, and full apps you've added to your personal library.
      </p>

      {/* Tab bar */}
      <div style={SR.tabBar}>
        {tabs.map((t, i) => (
          <button
            key={t}
            style={{ ...SR.tab, ...(activeTab === i ? SR.tabActive : {}) }}
            onClick={() => setActiveTab(i)}
          >
            {t}
          </button>
        ))}
      </div>

      {/* Content */}
      <div style={SR.libContent}>
        <div style={SR.placeholderBox}>
          <div style={SR.phIcon}>◈</div>
          <div style={SR.phText}>No {tabs[activeTab]} saved yet.</div>
          <div style={SR.phSub}>
            Save items from the Database → Library tab inside any of your apps.
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Tickets Panel ─────────────────────────────
function TicketsPanel({ jwt, currentUser }) {
  const [subject, setSubject]   = React.useState('');
  const [body,    setBody]      = React.useState('');
  const [sending, setSending]   = React.useState(false);
  const [sent,    setSent]      = React.useState(false);

  async function handleSubmit() {
    if (!subject.trim() || !body.trim()) return;
    setSending(true);
    await new Promise(r => setTimeout(r, 700)); // placeholder
    setSending(false);
    setSent(true);
    setSubject(''); setBody('');
  }

  return (
    <div>
      <div style={SR.panelTitle}>Support Tickets</div>

      {/* Submit form */}
      <div style={SR.ticketForm}>
        <div style={SR.ticketFormHead}>Submit a New Ticket</div>
        {sent && (
          <div style={SR.sentMsg}>Ticket submitted! We'll respond to your email shortly.</div>
        )}
        <div style={SR.field}>
          <label style={SR.label}>Subject</label>
          <input style={SR.input} value={subject}
            onChange={e => { setSubject(e.target.value); setSent(false); }}
            placeholder="Brief description of your issue" />
        </div>
        <div style={SR.field}>
          <label style={SR.label}>Description</label>
          <textarea style={{ ...SR.input, height:110, resize:'vertical' }}
            value={body}
            onChange={e => { setBody(e.target.value); setSent(false); }}
            placeholder="Describe the issue in detail. Include any error messages or steps to reproduce." />
        </div>
        <div style={{ display:'flex', justifyContent:'flex-end' }}>
          <button style={SR.btnPrimary} onClick={handleSubmit} disabled={sending || !subject.trim() || !body.trim()}>
            {sending ? 'Sending…' : 'Submit Ticket'}
          </button>
        </div>
      </div>

      {/* Ticket list placeholder */}
      <div style={SR.ticketListHead}>Your Tickets</div>
      <div style={SR.placeholderBox}>
        <div style={SR.phIcon}>✉</div>
        <div style={SR.phText}>No tickets yet.</div>
        <div style={SR.phSub}>Past support tickets will appear here.</div>
      </div>

      <div style={SR.placeholderNote}>
        Ticket system will connect to a support backend. Email fallback is active in the meantime.
      </div>
    </div>
  );
}

// ── Videos Panel ──────────────────────────────
function VideosPanel() {
  // Placeholder video list — will be fetched from a DO-managed list or hardcoded CMS
  const videos = [
    { title:'Getting Started with DataObjects', duration:'5:42', thumb:null },
    { title:'Building Your First App',          duration:'8:15', thumb:null },
    { title:'Database Design Basics',           duration:'6:30', thumb:null },
    { title:'Custom Layouts and Design',        duration:'11:20', thumb:null },
    { title:'Managing Users and Security',      duration:'7:55', thumb:null },
  ];

  return (
    <div>
      <div style={SR.panelTitle}>Video Tutorials</div>
      <p style={SR.panelDesc}>
        Step-by-step video guides hosted on YouTube. Click any video to watch.
      </p>

      <div style={SR.videoGrid}>
        {videos.map((v, i) => (
          <div key={i} style={SR.videoCard}>
            <div style={SR.videoThumb}>
              <div style={SR.playBtn}>▶</div>
            </div>
            <div style={SR.videoMeta}>
              <div style={SR.videoTitle}>{v.title}</div>
              <div style={SR.videoDur}>{v.duration}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={SR.placeholderNote}>
        Videos will open in an embedded YouTube player. Links will be managed by DataObjects.
      </div>
    </div>
  );
}

// ── Styles ────────────────────────────────────
const SR = {
  layout:       { display:'grid', gridTemplateColumns:'200px 1fr', gap:24, alignItems:'start' },

  sidebar:      { background:'#fff', borderRadius:12, border:'1px solid #e2e8f0',
                  overflow:'hidden', position:'sticky', top:78 },
  sideHead:     { padding:'14px 16px 10px', fontSize:11, fontWeight:700, color:'#94a3b8',
                  textTransform:'uppercase', letterSpacing:'0.08em',
                  borderBottom:'1px solid #f1f5f9' },
  sideGroup:    { padding:'10px 16px 4px', fontSize:10, fontWeight:700, color:'#cbd5e1',
                  textTransform:'uppercase', letterSpacing:'0.08em' },
  sideItem:     { display:'block', width:'100%', textAlign:'left', background:'none',
                  border:'none', borderLeft:'3px solid transparent',
                  padding:'9px 16px', fontSize:13, color:'#374151', cursor:'pointer',
                  fontFamily:'inherit', transition:'all 0.12s' },
  sideItemActive:{ color:'#2563eb', fontWeight:600, background:'#eff6ff',
                   borderLeftColor:'#2563eb' },

  panel:        { background:'#fff', borderRadius:12, border:'1px solid #e2e8f0', padding:'28px 32px' },
  panelTitle:   { fontSize:17, fontWeight:700, color:'#0f1923', marginBottom:8,
                  letterSpacing:'-0.01em' },
  panelDesc:    { fontSize:13, color:'#64748b', marginBottom:24, lineHeight:1.6 },

  categoryGrid: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:20 },
  catCard:      { background:'#f8fafc', border:'1px solid #e2e8f0', borderRadius:12,
                  padding:'20px', display:'flex', flexDirection:'column', gap:6 },
  catLabel:     { fontSize:13, fontWeight:700, color:'#0f1923' },
  catCount:     { fontSize:24, fontWeight:700, color:'#2563eb' },
  catDesc:      { fontSize:12, color:'#64748b', flex:1 },
  catBtn:       { alignSelf:'flex-start', marginTop:8, background:'none',
                  border:'1px solid #d1d5db', borderRadius:7, padding:'5px 14px',
                  fontSize:12, color:'#374151', cursor:'pointer', fontFamily:'inherit' },

  tabBar:       { display:'flex', gap:0, borderBottom:'2px solid #e2e8f0', marginBottom:20 },
  tab:          { background:'none', border:'none', borderBottom:'2px solid transparent',
                  marginBottom:'-2px', padding:'8px 16px', fontSize:13, color:'#94a3b8',
                  cursor:'pointer', fontFamily:'inherit', fontWeight:500,
                  transition:'all 0.12s' },
  tabActive:    { color:'#2563eb', borderBottomColor:'#2563eb', fontWeight:600 },
  libContent:   {},

  ticketForm:   { background:'#f8fafc', border:'1px solid #e2e8f0', borderRadius:12,
                  padding:'20px', marginBottom:28, display:'flex', flexDirection:'column', gap:14 },
  ticketFormHead:{ fontSize:13, fontWeight:600, color:'#374151', marginBottom:4 },
  sentMsg:      { background:'#dcfce7', color:'#166534', padding:'10px 14px',
                  borderRadius:8, fontSize:13 },
  ticketListHead:{ fontSize:14, fontWeight:600, color:'#374151', marginBottom:12 },
  field:        { display:'flex', flexDirection:'column', gap:5 },
  label:        { fontSize:12, fontWeight:600, color:'#374151' },
  input:        { padding:'8px 12px', border:'1px solid #d1d5db', borderRadius:7,
                  fontSize:13, fontFamily:'inherit', outline:'none', color:'#0f1923' },

  videoGrid:    { display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:16, marginBottom:20 },
  videoCard:    { background:'#f8fafc', border:'1px solid #e2e8f0', borderRadius:10,
                  overflow:'hidden', cursor:'pointer' },
  videoThumb:   { height:110, background:'#1e293b', display:'flex',
                  alignItems:'center', justifyContent:'center' },
  playBtn:      { width:44, height:44, borderRadius:'50%', background:'rgba(255,255,255,0.15)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:18, color:'#fff' },
  videoMeta:    { padding:'12px' },
  videoTitle:   { fontSize:13, fontWeight:500, color:'#0f1923', marginBottom:4, lineHeight:1.4 },
  videoDur:     { fontSize:11, color:'#94a3b8' },

  btnPrimary:   { background:'#2563eb', color:'#fff', border:'none', borderRadius:8,
                  padding:'8px 20px', fontSize:13, fontWeight:600, cursor:'pointer',
                  fontFamily:'inherit' },

  placeholderBox:  { background:'#f8fafc', border:'1px dashed #d1d5db', borderRadius:12,
                     padding:'36px', textAlign:'center' },
  phIcon:          { fontSize:28, marginBottom:10, opacity:0.3 },
  phText:          { fontSize:14, color:'#374151', fontWeight:500, marginBottom:6 },
  phSub:           { fontSize:13, color:'#94a3b8' },
  placeholderNote: { marginTop:16, padding:'10px 14px', background:'#fffbeb',
                     border:'1px solid #fde68a', borderRadius:8, fontSize:12, color:'#92400e' },
};