// My Profile — avatar, total points, badges, activity summary

// Tenure milestones in ascending order (years → badge name)
const TENURE_MILESTONES = [
  { years: 1,  name: 'One-Year Mark'   },
  { years: 2,  name: 'Two-Year Mark'   },
  { years: 3,  name: 'Three-Year Mark' },
  { years: 5,  name: 'Five-Year Mark'  },
  { years: 10, name: 'Ten-Year Mark'   },
];

// Color mapping for activity categories (same 4 colors as the previous hardcoded bars)
const CATEGORY_COLORS = {
  'Shipped Work':  'var(--accent-gold)',
  'Above & Beyond':'var(--success)',
  'Milestone':     '#B8A7D1',
  'Learning':      '#8FB2D9',
};
// Fallback order for categories not in the map
const CATEGORY_COLOR_FALLBACKS = ['var(--accent-gold)', '#8FB2D9', 'var(--success)', '#B8A7D1'];

const ProfileScreen = ({ data, setScreen, isMobile }) => {
  const toast = useToast();
  const { currentUser, activity } = data;
  const [stateMode, setStateMode] = React.useState('normal');
  const rankDelta = currentUser.rankDeltaYoY;
  const earned    = activity.filter(t => t.amount > 0).reduce((a,b)=>a+b.amount, 0);
  const redeemed  = Math.abs(activity.filter(t => t.amount < 0).reduce((a,b)=>a+b.amount, 0));
  const approvedActivities = activity.filter(t => t.amount > 0).length;

  // --- F1: Dynamic activity breakdown ---
  // Group positive transactions by category, sum points, sort descending, top 4
  const categoryMap = {};
  activity.forEach(t => {
    if (t.amount > 0 && t.category && t.category !== 'Reward') {
      categoryMap[t.category] = (categoryMap[t.category] || 0) + t.amount;
    }
  });
  const totalEarned = Object.values(categoryMap).reduce((a, b) => a + b, 0) || 1;
  const activityBreakdown = Object.entries(categoryMap)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 4)
    .map(([cat, pts], i) => ({
      label: cat,
      value: `+${pts}`,
      pct: Math.round((pts / totalEarned) * 100),
      color: CATEGORY_COLORS[cat] || CATEGORY_COLOR_FALLBACKS[i] || '#8FB2D9',
    }));

  // --- F2: Dynamic next tenure badge ---
  // Parse joined string (e.g. "March 2023" or "January 2021")
  const joinedDate = currentUser.joined ? new Date(currentUser.joined) : null;
  const today = new Date();
  const yearsAtCompany = joinedDate
    ? (today - joinedDate) / (1000 * 60 * 60 * 24 * 365.25)
    : 0;
  const nextMilestone = TENURE_MILESTONES.find(m => m.years > yearsAtCompany);
  let nextBadgeLabel, nextBadgeSub;
  if (nextMilestone) {
    const yrsToGo = Math.ceil(nextMilestone.years - yearsAtCompany);
    nextBadgeLabel = nextMilestone.name;
    nextBadgeSub = `Earned at ${nextMilestone.years} ${nextMilestone.years === 1 ? 'year' : 'years'}. ${yrsToGo} ${yrsToGo === 1 ? 'yr' : 'yrs'} to go.`;
  } else {
    nextBadgeLabel = 'All tenure badges earned!';
    nextBadgeSub = 'You\'ve hit every tenure milestone.';
  }

  // Loading preview — let reviewers see the shimmer pass
  if (stateMode === 'loading') {
    return (
      <div style={{position:'relative'}}>
        <div style={{position:'absolute', top:16, right:isMobile?16:48, zIndex:5}}>
          <StateModeSwitch value={stateMode} onChange={setStateMode} supportsError={true}/>
        </div>
        <SkeletonProfile isMobile={isMobile}/>
      </div>
    );
  }

  return (
    <div className="fade-in" style={{padding: isMobile?'20px 16px 32px':'40px 48px 80px', maxWidth: 1280, margin:'0 auto'}}>
      {/* State preview switcher — top-right, non-intrusive */}
      <div style={{display:'flex', justifyContent:'flex-end', marginBottom:12}}>
        <StateModeSwitch value={stateMode} onChange={setStateMode} supportsError={true}/>
      </div>
      {stateMode === 'error' && (
        <ErrorBanner
          title="Couldn't load profile data"
          body="Your badge and activity data didn't load. Your balance shown is cached. Try refreshing the page."
          onRetry={() => setStateMode('normal')}
        />
      )}
      {/* Hero */}
      <div className="card" style={{padding: isMobile?24:40, marginBottom:24, display:'flex', alignItems:'center', gap:isMobile?20:32, flexDirection: isMobile?'column':'row', textAlign: isMobile?'center':'left'}}>
        <div style={{position:'relative'}}>
          <Avatar initials={currentUser.avatarInitials} tone="gold" size={isMobile?96:120} ring/>
          <div style={{
            position:'absolute', bottom:-4, right:-4,
            padding:'3px 10px', borderRadius:999,
            background:'var(--nav-navy)', color:'#fff',
            fontSize:11, fontWeight:600, letterSpacing:'0.04em',
          }} className="num">#{currentUser.rank}</div>
          {rankDelta ? (
            <div
              className="num"
              aria-label={`Moved ${rankDelta > 0 ? 'up' : 'down'} ${Math.abs(rankDelta)} ${Math.abs(rankDelta) === 1 ? 'place' : 'places'} year over year`}
              style={{
                marginTop:8, textAlign:'center',
                fontSize:12, fontWeight:500,
                color: rankDelta > 0 ? 'var(--accent-gold)' : 'var(--error)',
              }}
            >
              {rankDelta > 0 ? '↑' : '↓'} {Math.abs(rankDelta)} YoY
            </div>
          ) : null}
        </div>
        <div style={{flex:1, minWidth:0}}>
          <div className="t-label muted">{currentUser.team} · Member since {currentUser.joined}</div>
          <h1 style={{margin:'6px 0 4px', fontSize: isMobile?28:36, fontWeight:600, letterSpacing:'-0.02em'}}>{currentUser.name}</h1>
          <p className="t-body muted" style={{margin:0}}>{currentUser.role}</p>
          <div style={{display:'flex', gap:10, marginTop:16, flexWrap:'wrap', justifyContent: isMobile?'center':'flex-start'}}>
            <button className="btn btn-ghost" style={{padding:'10px 16px', fontSize:13}} onClick={() => setScreen('editprofile')}>Edit profile</button>
            <button className="btn btn-ghost" style={{padding:'10px 16px', fontSize:13}} onClick={() => setScreen('feed')}>
              <Icon name="sparkles" size={14}/> Recognize a colleague
            </button>
          </div>
        </div>
      </div>

      {/* Stats strip */}
      <div style={{display:'grid', gridTemplateColumns: isMobile?'1fr 1fr':'repeat(4, 1fr)', gap: isMobile?10:20, marginBottom:24}}>
        <HeroStat label="Current balance" value={currentUser.balance.toLocaleString()} suffix="pts" accent/>
        <HeroStat label="Lifetime earned" value={currentUser.lifetime.toLocaleString()} suffix="pts"/>
        <HeroStat label="Redeemed" value={redeemed.toLocaleString()} suffix="pts"/>
        <HeroStat label="Approved" value={approvedActivities} suffix="activities"/>
      </div>

      <div style={{display:'grid', gridTemplateColumns: isMobile?'1fr':'minmax(0, 1.3fr) minmax(0,1fr)', gap: 24}}>
        {/* Badges */}
        <section className="card" style={{padding: isMobile?20:28}}>
          <SectionHeader title="Badges"/>
          <div style={{display:'grid', gridTemplateColumns: isMobile?'1fr 1fr':'1fr 1fr', gap:12}}>
            {currentUser.badges.map(b => <BadgeCard key={b.id} b={b}/>)}
            <div style={{
              border:'1.5px dashed var(--border)', borderRadius:12,
              padding:20, display:'flex', flexDirection:'column', justifyContent:'center',
              minHeight: 110,
            }}>
              <div className="t-caption muted">Next badge</div>
              <div style={{fontSize:14, fontWeight:600, marginTop:4}}>{nextBadgeLabel}</div>
              <div className="t-caption muted" style={{marginTop:6}}><span className="num">{nextBadgeSub}</span></div>
            </div>
          </div>
        </section>

        {/* Activity summary */}
        <section className="card" style={{padding: isMobile?20:28}}>
          <SectionHeader title="Activity summary" action={{label:'Full history', onClick: () => setScreen('history')}}/>
          <div style={{display:'flex', flexDirection:'column', gap:16}}>
            {activityBreakdown.map(bar => (
              <ActivityBar key={bar.label} label={bar.label} pct={bar.pct} value={bar.value} color={bar.color}/>
            ))}
          </div>
          <div style={{marginTop:20, paddingTop:16, borderTop:'1px solid var(--border-soft)', display:'flex', justifyContent:'space-between'}}>
            <span className="t-caption muted">Past 12 months</span>
            <span className="num" style={{fontSize:13, fontWeight:600}}>+{totalEarned.toLocaleString()} approved</span>
          </div>
        </section>
      </div>
    </div>
  );
};

const HeroStat = ({label, value, suffix, accent}) => (
  <div className="card" style={{padding: 20}}>
    <div className="t-label muted">{label}</div>
    <div style={{display:'flex', alignItems:'baseline', gap:6, marginTop:10}}>
      <div className="num" style={{fontSize:28, fontWeight:600, letterSpacing:'-0.015em', color: accent?'var(--accent-gold)':'var(--text)'}}>{value}</div>
      <div className="t-caption muted">{suffix}</div>
    </div>
  </div>
);

const BadgeCard = ({ b }) => {
  const kinds = {
    tenure:    { shape:'hexagon', label:'Tenure' },
    peer:      { shape:'circle',  label:'Peer' },
    milestone: { shape:'diamond', label:'Milestone' },
    quarter:   { shape:'square',  label:'Quarter' },
  };
  const k = kinds[b.kind] || kinds.peer;
  return (
    <div style={{
      padding:16, borderRadius:12,
      background:'var(--surface-muted)',
      border:'1px solid var(--border-soft)',
      display:'flex', gap:14, alignItems:'center',
    }}>
      <BadgeShape kind={k.shape}/>
      <div style={{minWidth:0}}>
        <div className="t-caption muted">{k.label}</div>
        <div style={{fontSize:14, fontWeight:600, marginTop:2}}>{b.name}</div>
        <div className="t-caption muted num" style={{marginTop:2}}>{b.earned}</div>
      </div>
    </div>
  );
};

const BadgeShape = ({ kind }) => {
  const common = { width: 44, height: 44, style: { flexShrink: 0 } };
  if (kind === 'circle') return (
    <svg {...common} viewBox="0 0 44 44" fill="none">
      <circle cx="22" cy="22" r="20" fill="none" stroke="var(--accent-gold)" strokeWidth="1.2"/>
      <circle cx="22" cy="22" r="10" fill="var(--accent-gold)"/>
    </svg>
  );
  if (kind === 'diamond') return (
    <svg {...common} viewBox="0 0 44 44" fill="none">
      <rect x="9" y="9" width="26" height="26" rx="2" transform="rotate(45 22 22)" fill="none" stroke="var(--accent-gold)" strokeWidth="1.2"/>
      <rect x="15" y="15" width="14" height="14" rx="1" transform="rotate(45 22 22)" fill="var(--accent-gold)"/>
    </svg>
  );
  if (kind === 'square') return (
    <svg {...common} viewBox="0 0 44 44" fill="none">
      <rect x="4" y="4" width="36" height="36" rx="6" fill="none" stroke="var(--accent-gold)" strokeWidth="1.2"/>
      <rect x="13" y="13" width="18" height="18" rx="3" fill="var(--accent-gold)"/>
    </svg>
  );
  // hexagon
  return (
    <svg {...common} viewBox="0 0 44 44" fill="none">
      <polygon points="22,3 39,13 39,31 22,41 5,31 5,13" fill="none" stroke="var(--accent-gold)" strokeWidth="1.2"/>
      <polygon points="22,12 31,17 31,27 22,32 13,27 13,17" fill="var(--accent-gold)"/>
    </svg>
  );
};

const ActivityBar = ({ label, pct, value, color }) => (
  <div>
    <div style={{display:'flex', justifyContent:'space-between', fontSize:13, fontWeight:500, marginBottom:6}}>
      <span>{label}</span>
      <span className="num muted">{value} <span style={{color:'var(--text-subtle)', marginLeft:6}}>{pct}%</span></span>
    </div>
    <div style={{height:6, borderRadius:3, background:'var(--surface-muted)', overflow:'hidden'}}>
      <div style={{width:`${pct}%`, height:'100%', background: color, borderRadius:3, transition:'width 400ms ease-out'}}/>
    </div>
  </div>
);

Object.assign(window, { ProfileScreen });