'use client'
import React from 'react'
import type { EmployeeCurriculumState, CurriculumWeek, Theme } from '@/types'

interface WeekHeaderProps {
  curriculumState: EmployeeCurriculumState
  week: CurriculumWeek & { expand?: { theme?: Theme } }
  completedCount: number
  totalCount: number
}

export function WeekHeader({ curriculumState, week, completedCount, totalCount }: WeekHeaderProps) {
  const themeName = week.expand?.theme?.title ?? '—'
  const pct = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0

  return (
    <div
      style={{
        background: 'var(--bg-dark)',
        color: 'var(--paper)',
        borderRadius: 'var(--r-lg)',
        padding: 'var(--s-5)',
        display: 'flex',
        flexDirection: 'column',
        gap: 'var(--s-3)',
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <p
            style={{
              margin: '0 0 var(--s-1)',
              fontSize: 'var(--t-label)',
              fontFamily: 'var(--font-mono)',
              textTransform: 'uppercase',
              letterSpacing: 'var(--label-ls)',
              opacity: 0.65,
            }}
          >
            Cycle {curriculumState.current_cycle} · Week {curriculumState.current_week}
          </p>
          <h2
            style={{
              margin: 0,
              fontSize: 'var(--t-h3)',
              fontWeight: 700,
              lineHeight: 1.25,
            }}
          >
            {themeName}
          </h2>
        </div>
        <div style={{ textAlign: 'right', flexShrink: 0 }}>
          <p style={{ margin: 0, fontSize: 'var(--t-h3)', fontWeight: 700 }}>
            {completedCount}/{totalCount}
          </p>
          <p
            style={{
              margin: 0,
              fontSize: 'var(--t-small)',
              opacity: 0.7,
            }}
          >
            topics
          </p>
        </div>
      </div>

      {/* Progress bar */}
      <div
        style={{
          width: '100%',
          height: '6px',
          background: 'rgba(255,255,255,0.2)',
          borderRadius: 'var(--r-pill)',
          overflow: 'hidden',
        }}
      >
        <div
          style={{
            width: `${pct}%`,
            height: '100%',
            background: 'var(--paper)',
            borderRadius: 'var(--r-pill)',
            transition: 'width 400ms ease',
          }}
        />
      </div>

      <div style={{ display: 'flex', gap: 'var(--s-4)', flexWrap: 'wrap' }}>
        <span style={{ fontSize: 'var(--t-small)', opacity: 0.75 }}>
          {week.estimated_duration_minutes} min estimated
        </span>
        {pct === 100 && (
          <span style={{ fontSize: 'var(--t-small)', fontWeight: 600 }}>
            Week complete!
          </span>
        )}
      </div>
    </div>
  )
}
