// dash-settings.jsx — Account / Settings overlay (tapped via MD avatar)

const SETTINGS_GROUPS = [
  {
    title: 'Verification',
    items: [
      { id: 'creditincome', icon: 'shield', label: 'Credit & Income', sub: 'FICO 812 · $41,000/mo verified · DTI 15%', highlight: true },
    ],
  },
  {
    title: 'Account',
    items: [
      { id: 'personal', icon: 'user',   label: 'Personal information', sub: 'Name, DOB, SSN' },
      { id: 'contact',  icon: 'phone',  label: 'Contact',              sub: 'Phone, email, address' },
      { id: 'identity', icon: 'id',     label: 'Identity & documents', sub: 'Passport verified · Apr 12' },
      { id: 'tax',      icon: 'tax',    label: 'Tax documents',        sub: '1099s, 8949, transaction export' },
    ],
  },
  {
    title: 'Security',
    items: [
      { id: 'biometric', icon: 'face',   label: 'Face ID',              sub: 'Enabled · Enrolled Apr 12' },
      { id: 'pin',       icon: 'lock',   label: 'App PIN',              sub: 'Change · last updated 30d ago' },
      { id: 'devices',   icon: 'device', label: 'Devices & sessions',   sub: '2 trusted devices' },
      { id: '2fa',       icon: 'shield', label: 'Two-factor auth',      sub: 'Authenticator + SMS' },
      { id: 'keys',      icon: 'key',    label: 'Recovery keys',        sub: '12-word seed · backed up' },
    ],
  },
  {
    title: 'Money',
    items: [
      { id: 'banks',    icon: 'bank',    label: 'Linked accounts',      sub: 'Chase, Wells Fargo' },
      { id: 'limits',   icon: 'gauge',   label: 'Limits & transfers',   sub: 'Daily $50k · Monthly $500k' },
      { id: 'statements', icon: 'doc',   label: 'Statements',           sub: 'Monthly · PDF + CSV' },
      { id: 'round',    icon: 'roundup', label: 'Round-ups → Bitcoin',  sub: '$5 rounding · 142,384 sats this mo' },
    ],
  },
  {
    title: 'Preferences',
    items: [
      { id: 'notif',   icon: 'bell',      label: 'Notifications',     sub: 'Push, email, SMS' },
      { id: 'privacy', icon: 'eye',       label: 'Privacy',           sub: 'Hide balances · Incognito mode' },
      { id: 'theme',   icon: 'moon',      label: 'Appearance',        sub: 'Dark · System' },
      { id: 'lang',    icon: 'globe',     label: 'Language & region', sub: 'English (US) · USD' },
    ],
  },
  {
    title: 'Support',
    items: [
      { id: 'help',    icon: 'help',      label: 'Help center',        sub: '24/7 chat' },
      { id: 'legal',   icon: 'scroll',    label: 'Legal & disclosures',sub: 'Terms, privacy, FDIC info' },
      { id: 'close',   icon: 'logout',    label: 'Close account',      sub: '', danger: true },
    ],
  },
];

const S_ICON = (name, color = 'currentColor') => {
  const p = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'user':    return <svg {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>;
    case 'phone':   return <svg {...p}><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.37 1.9.72 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0122 16.92z"/></svg>;
    case 'id':      return <svg {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="12" r="2.5"/><path d="M14 10h5M14 14h3"/></svg>;
    case 'tax':     return <svg {...p}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg>;
    case 'face':    return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="4"/><path d="M9 10v1M15 10v1M9 15s1 1 3 1 3-1 3-1"/></svg>;
    case 'lock':    return <svg {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>;
    case 'device':  return <svg {...p}><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg>;
    case 'shield':  return <svg {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>;
    case 'key':     return <svg {...p}><circle cx="7" cy="15" r="4"/><path d="M10 12l11-11M18 4l3 3M15 7l3 3"/></svg>;
    case 'bank':    return <svg {...p}><path d="M3 10l9-6 9 6M5 10v8M19 10v8M9 10v8M15 10v8M3 21h18"/></svg>;
    case 'gauge':   return <svg {...p}><path d="M12 13l4-4"/><path d="M20 12a8 8 0 11-16 0 8 8 0 0116 0z"/></svg>;
    case 'doc':     return <svg {...p}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>;
    case 'roundup': return <svg {...p}><path d="M7 17l5-5 5 5M7 11l5-5 5 5"/></svg>;
    case 'bell':    return <svg {...p}><path d="M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 004 0"/></svg>;
    case 'eye':     return <svg {...p}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'moon':    return <svg {...p}><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>;
    case 'globe':   return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3.5 3 14 0 18M12 3c-3 3.5-3 14 0 18"/></svg>;
    case 'help':    return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M9 9a3 3 0 116 0c0 2-3 2-3 4M12 17h.01"/></svg>;
    case 'scroll':  return <svg {...p}><path d="M8 2v4M16 2v4M3 10h18M5 6h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2z"/></svg>;
    case 'logout':  return <svg {...p}><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/></svg>;
    default:        return null;
  }
};

function SettingsRow({ item, onClick }) {
  const color = item.danger ? '#EF4444' : item.highlight ? '#10B981' : '#FF9F0A';
  return (
    <button onClick={onClick} style={{
      width: '100%', background: item.highlight ? 'rgba(16,185,129,0.04)' : 'transparent', border: 'none', cursor: 'pointer',
      padding: '12px 14px',
      display: 'flex', alignItems: 'center', gap: 12,
      textAlign: 'left',
    }}>
      <div style={{
        width: 34, height: 34, borderRadius: 10, flexShrink: 0,
        background: `${color}15`, border: `1px solid ${color}35`,
        color, display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{S_ICON(item.icon, color)}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 500, color: item.danger ? '#EF4444' : '#fff', display: 'flex', alignItems: 'center', gap: 6 }}>
          {item.label}
          {item.highlight && <span style={{ padding: '1px 6px', borderRadius: 100, background: 'rgba(16,185,129,0.15)', border: '1px solid rgba(16,185,129,0.3)', color: '#10B981', fontFamily: DASH_MONO, fontSize: 8, fontWeight: 700, letterSpacing: '0.12em' }}>VERIFIED</span>}
        </div>
        {item.sub && <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.5)', marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.sub}</div>}
      </div>
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(245,245,247,0.35)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg>
    </button>
  );
}

// ═══ DETAIL PANELS ════════════════════════════════════════════════════════
const USER_PROFILE = {
  firstName: 'Marc',
  lastName: 'Dumpff',
  dob: '1987-08-14',
  ssn: '•••-••-4821',
  phone: '+1 (415) 284-9037',
  email: 'marc.dumpff@kairos.vc',
  address1: '1410 Ocean Ave, Apt 902',
  city: 'Santa Monica',
  state: 'CA',
  zip: '90401',
  country: 'United States',
  since: 'Apr 12, 2025',
  tier: 'Private · Tier III',
};

function KV({ label, value, editable }) {
  return (
    <div style={{ padding: '12px 14px', borderBottom: '1px solid rgba(255,255,255,0.04)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: DASH_MONO, fontSize: 9, color: 'rgba(245,245,247,0.45)', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 3 }}>{label}</div>
        <div style={{ fontSize: 13, fontWeight: 500, color: '#fff', fontFamily: DASH_MONO, wordBreak: 'break-word' }}>{value}</div>
      </div>
      {editable && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,159,10,0.6)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>}
    </div>
  );
}

function DetailPanel({ item, onBack }) {
  if (item.id === 'creditincome') return <CreditIncomePanel onBack={onBack}/>;
  const body = (() => {
    switch (item.id) {
      case 'personal':
        return (
          <DashCard style={{ padding: 0, overflow: 'hidden' }}>
            <KV label="Legal name" value={`${USER_PROFILE.firstName} ${USER_PROFILE.lastName}`} editable/>
            <KV label="Date of birth" value="Aug 14, 1987"/>
            <KV label="SSN" value={USER_PROFILE.ssn}/>
            <KV label="Member since" value={USER_PROFILE.since}/>
            <KV label="Tier" value={USER_PROFILE.tier}/>
          </DashCard>
        );
      case 'contact':
        return (
          <DashCard style={{ padding: 0, overflow: 'hidden' }}>
            <KV label="Mobile" value={USER_PROFILE.phone} editable/>
            <KV label="Email" value={USER_PROFILE.email} editable/>
            <KV label="Street" value={USER_PROFILE.address1} editable/>
            <KV label="City" value={USER_PROFILE.city}/>
            <KV label="State" value={USER_PROFILE.state}/>
            <KV label="ZIP" value={USER_PROFILE.zip}/>
            <KV label="Country" value={USER_PROFILE.country}/>
          </DashCard>
        );
      case 'identity':
        return (
          <>
            <DashCard style={{ padding: 14, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(16,185,129,0.15)', border: '1px solid rgba(16,185,129,0.4)', color: '#10B981', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>Identity verified</div>
                <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)', marginTop: 1 }}>Apr 12, 2025 · Persona</div>
              </div>
            </DashCard>
            <DashCard style={{ padding: 0, overflow: 'hidden' }}>
              <KV label="Document" value="US Passport · •••••7142"/>
              <KV label="Selfie match" value="99.4%"/>
              <KV label="Source of funds" value="Employment + investments"/>
            </DashCard>
          </>
        );
      case 'devices':
        return (
          <DashCard style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '12px 14px', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>iPhone 15 Pro · This device</div>
                  <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.5)', marginTop: 1 }}>Santa Monica, CA · now</div>
                </div>
                <span style={{ padding: '3px 8px', borderRadius: 100, background: 'rgba(16,185,129,0.12)', border: '1px solid rgba(16,185,129,0.3)', color: '#10B981', fontFamily: DASH_MONO, fontSize: 9, fontWeight: 700, letterSpacing: '0.12em' }}>ACTIVE</span>
              </div>
            </div>
            <div style={{ padding: '12px 14px' }}>
              <div style={{ fontSize: 13, fontWeight: 500, color: '#fff' }}>MacBook Pro · Safari</div>
              <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.5)', marginTop: 1 }}>Santa Monica, CA · 2 days ago</div>
            </div>
          </DashCard>
        );
      case 'banks':
        return (
          <DashCard style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '14px', borderBottom: '1px solid rgba(255,255,255,0.04)', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, #117ACA, #0D5BA0)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: DASH_DISPLAY, fontWeight: 700, color: '#fff', fontSize: 11 }}>JPM</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>Chase Checking</div>
                <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)', fontFamily: DASH_MONO }}>•••• 4485 · Verified</div>
              </div>
            </div>
            <div style={{ padding: '14px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'linear-gradient(135deg, #CD1409, #8B0D06)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: DASH_DISPLAY, fontWeight: 700, color: '#fff', fontSize: 11 }}>WF</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>Wells Fargo Savings</div>
                <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.55)', fontFamily: DASH_MONO }}>•••• 8821 · Verified</div>
              </div>
            </div>
          </DashCard>
        );
      case 'limits':
        return (
          <DashCard style={{ padding: 0, overflow: 'hidden' }}>
            <KV label="ACH daily in" value="$50,000"/>
            <KV label="ACH daily out" value="$50,000"/>
            <KV label="Wire daily" value="$500,000"/>
            <KV label="Card daily spend" value="$25,000"/>
            <KV label="ATM daily" value="$2,500"/>
            <KV label="BTC withdraw daily" value="5.000 BTC"/>
          </DashCard>
        );
      case 'notif':
        return (
          <DashCard style={{ padding: 0, overflow: 'hidden' }}>
            {[
              { l: 'Card activity',     s: 'Every swipe · $0+' },
              { l: 'BTC price alerts',  s: 'When BTC crosses $70k' },
              { l: 'Loan payments',     s: '3 days before due' },
              { l: 'Concierge replies', s: 'Always' },
              { l: 'Product updates',   s: 'Off' },
            ].map((o, i, a) => (
              <div key={o.l} style={{ padding: '12px 14px', borderBottom: i === a.length-1 ? 'none' : '1px solid rgba(255,255,255,0.04)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, color: '#fff' }}>{o.l}</div>
                  <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.5)', marginTop: 1 }}>{o.s}</div>
                </div>
                <div style={{ width: 40, height: 24, borderRadius: 100, background: o.s === 'Off' ? 'rgba(255,255,255,0.1)' : '#FF9F0A', position: 'relative', transition: 'background 0.2s' }}>
                  <div style={{ position: 'absolute', top: 2, left: o.s === 'Off' ? 2 : 18, width: 20, height: 20, borderRadius: '50%', background: '#fff', transition: 'left 0.2s' }}/>
                </div>
              </div>
            ))}
          </DashCard>
        );
      default:
        return (
          <DashCard style={{ padding: 24, textAlign: 'center' }}>
            <div style={{ fontSize: 13, color: 'rgba(245,245,247,0.55)' }}>{item.label} settings</div>
            <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.35)', marginTop: 6 }}>Coming soon in this mock</div>
          </DashCard>
        );
    }
  })();

  return (
    <div>
      <button onClick={onBack} style={{
        display: 'flex', alignItems: 'center', gap: 6,
        background: 'transparent', border: 'none', color: '#FF9F0A',
        fontSize: 13, fontWeight: 500, cursor: 'pointer', padding: '4px 0', marginBottom: 12,
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
        Back
      </button>
      <div style={{ fontFamily: DASH_DISPLAY, fontSize: 24, fontWeight: 600, color: '#fff', letterSpacing: '-0.03em', marginBottom: 14 }}>{item.label}</div>
      {body}
    </div>
  );
}

function SettingsSheet({ onClose, initial }) {
  const [detail, setDetail] = React.useState(() => {
    if (!initial) return null;
    for (const g of SETTINGS_GROUPS) {
      const found = g.items.find(i => i.id === initial);
      if (found) return found;
    }
    return null;
  });
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 60,
      background: 'rgba(0,0,0,0.75)', backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'flex-end',
      animation: 'waOverlayIn 0.25s ease',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', height: '94%',
        background: '#0a0a0f',
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        border: '1px solid rgba(255,255,255,0.08)', borderBottom: 'none',
        animation: 'waSheetIn 0.35s cubic-bezier(0.16, 1, 0.3, 1)',
        position: 'relative', overflow: 'hidden',
      }}>
       <div style={{ width: '100%', height: '100%', overflowY: 'auto', padding: '14px 18px 24px', boxSizing: 'border-box' }}>
        <div style={{ width: 36, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.15)', margin: '0 auto 12px' }}/>

        {!detail && (
          <>
            {/* Profile header */}
            <div style={{
              padding: 18, borderRadius: 18,
              background: `linear-gradient(135deg, rgba(255,159,10,0.18) 0%, rgba(255,69,58,0.08) 100%)`,
              border: '1px solid rgba(255,159,10,0.3)',
              display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: '50%',
                background: DASH_GRADIENT,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: DASH_DISPLAY, fontWeight: 700, fontSize: 22, color: '#000',
                boxShadow: '0 0 24px rgba(255,159,10,0.5)', flexShrink: 0,
              }}>MD</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: DASH_DISPLAY, fontSize: 18, fontWeight: 600, color: '#fff', letterSpacing: '-0.02em' }}>{USER_PROFILE.firstName} {USER_PROFILE.lastName}</div>
                <div style={{ fontSize: 11, color: 'rgba(245,245,247,0.6)', fontFamily: DASH_MONO, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{USER_PROFILE.email}</div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 100, background: 'rgba(255,159,10,0.15)', border: '1px solid rgba(255,159,10,0.35)', marginTop: 6, fontSize: 9, fontWeight: 700, color: '#FF9F0A', letterSpacing: '0.15em', fontFamily: DASH_MONO }}>{USER_PROFILE.tier.toUpperCase()}</div>
              </div>
            </div>

            {SETTINGS_GROUPS.map(g => (
              <div key={g.title} style={{ marginBottom: 16 }}>
                <div style={{ fontFamily: DASH_MONO, fontSize: 10, letterSpacing: '0.2em', color: 'rgba(245,245,247,0.45)', textTransform: 'uppercase', paddingLeft: 4, marginBottom: 8 }}>{g.title}</div>
                <DashCard style={{ padding: 0, overflow: 'hidden' }}>
                  {g.items.map((it, i) => (
                    <div key={it.id} style={{ borderBottom: i === g.items.length-1 ? 'none' : '1px solid rgba(255,255,255,0.04)' }}>
                      <SettingsRow item={it} onClick={() => setDetail(it)} />
                    </div>
                  ))}
                </DashCard>
              </div>
            ))}

            <div style={{ textAlign: 'center', fontFamily: DASH_MONO, fontSize: 10, color: 'rgba(245,245,247,0.3)', letterSpacing: '0.15em', marginTop: 20 }}>
              BTC NOW · v1.0.0 · BUILD 2025.04.24
            </div>
          </>
        )}

        {detail && <DetailPanel item={detail} onBack={() => setDetail(null)} />}
       </div>
      </div>
      <style>{`
        @keyframes waOverlayIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes waSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
      `}</style>
    </div>
  );
}

Object.assign(window, { SettingsSheet });