// DateRangePicker — calendar inline inside PeriodSelector popup.
const MONTHS_PT = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho',
                   'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
const DAYS_PT = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'];

const DateRangePicker = ({ range, onApply, onCancel }) => {
  const { useState } = React;
  const today = new Date();
  const [view, setView] = useState({ year: today.getFullYear(), month: today.getMonth() });
  const [picking, setPicking] = useState({ start: range?.start || null, end: range?.end || null });
  const [hovered, setHovered] = useState(null);

  const dayKey = (y, m, d) =>
    `${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;

  const getDaysInMonth  = (y, m) => new Date(y, m + 1, 0).getDate();
  const getFirstDayOfWeek = (y, m) => new Date(y, m, 1).getDay();
  const todayKey = dayKey(today.getFullYear(), today.getMonth(), today.getDate());

  const handleDayClick = (key) => {
    if (!picking.start || (picking.start && picking.end)) {
      setPicking({ start: key, end: null });
    } else {
      if (key < picking.start) {
        setPicking({ start: key, end: picking.start });
      } else if (key === picking.start) {
        setPicking({ start: key, end: key });
      } else {
        setPicking({ start: picking.start, end: key });
      }
    }
  };

  const effectiveEnd = picking.end || (picking.start && !picking.end ? hovered : null);
  const lo = picking.start && effectiveEnd
    ? (picking.start <= effectiveEnd ? picking.start : effectiveEnd) : null;
  const hi = picking.start && effectiveEnd
    ? (picking.start <= effectiveEnd ? effectiveEnd : picking.start) : null;

  const isStart   = (k) => k === picking.start;
  const isEnd     = (k) => k === picking.end;
  const isInRange = (k) => lo && hi && k > lo && k < hi;
  const isTodayK  = (k) => k === todayKey;

  const prevMonth = () => setView(v =>
    v.month === 0 ? { year: v.year - 1, month: 11 } : { ...v, month: v.month - 1 });
  const nextMonth = () => setView(v =>
    v.month === 11 ? { year: v.year + 1, month: 0 } : { ...v, month: v.month + 1 });

  const daysInMonth = getDaysInMonth(view.year, view.month);
  const firstDay   = getFirstDayOfWeek(view.year, view.month);

  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);

  const canApply = !!(picking.start && picking.end);

  const fmtDisplay = (key) => {
    if (!key) return '—';
    const [, m, d] = key.split('-');
    return `${d}/${m}`;
  };

  return (
    <div style={drp.wrap}>
      {/* Month nav */}
      <div style={drp.head}>
        <button style={drp.navBtn} onClick={prevMonth}>
          <Icon name="chevron" size={13} color="var(--fg-2)" style={{transform:'rotate(180deg)'}}/>
        </button>
        <span style={drp.monthLabel}>{MONTHS_PT[view.month]} {view.year}</span>
        <button style={drp.navBtn} onClick={nextMonth}>
          <Icon name="chevron" size={13} color="var(--fg-2)"/>
        </button>
      </div>

      {/* Weekday headers */}
      <div style={drp.grid}>
        {DAYS_PT.map(d => <div key={d} style={drp.dayHead}>{d}</div>)}
      </div>

      {/* Day cells */}
      <div style={drp.grid}>
        {cells.map((day, i) => {
          if (!day) return <div key={`e${i}`}/>;
          const key    = dayKey(view.year, view.month, day);
          const start  = isStart(key);
          const end    = isEnd(key);
          const inRange= isInRange(key);
          const tday   = isTodayK(key) && !start && !end;
          return (
            <button key={key}
              style={{
                ...drp.day,
                ...(start || end ? drp.daySelected : {}),
                ...(inRange       ? drp.dayInRange  : {}),
                ...(tday          ? drp.dayToday    : {}),
              }}
              onClick={() => handleDayClick(key)}
              onMouseEnter={() => setHovered(key)}
              onMouseLeave={() => setHovered(null)}>
              {day}
            </button>
          );
        })}
      </div>

      {/* Range summary */}
      <div style={drp.rangeRow}>
        <div style={drp.rangeItem}>
          <span style={drp.rangeLabel}>Início</span>
          <span style={drp.rangeVal}>{fmtDisplay(picking.start)}</span>
        </div>
        <span style={drp.rangeSep}>→</span>
        <div style={drp.rangeItem}>
          <span style={drp.rangeLabel}>Fim</span>
          <span style={drp.rangeVal}>{fmtDisplay(picking.end)}</span>
        </div>
      </div>

      {/* Actions */}
      <div style={drp.actions}>
        <button style={drp.btnCancel} onClick={onCancel}>Cancelar</button>
        <button
          style={{...drp.btnApply, ...(canApply ? {} : drp.btnApplyOff)}}
          disabled={!canApply}
          onClick={() => canApply && onApply(picking)}>
          Aplicar
        </button>
      </div>
    </div>
  );
};

const drp = {
  wrap:       { padding:'16px 14px 14px', minWidth:270, userSelect:'none' },
  head:       { display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 },
  navBtn:     { width:26, height:26, border:0, background:'var(--gray-100)', borderRadius:'var(--r-sm)',
                cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' },
  monthLabel: { font:'700 13px/1 var(--font-sans)', color:'var(--fg-1)' },
  grid:       { display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:2, marginBottom:2 },
  dayHead:    { font:'600 10px/1 var(--font-sans)', color:'var(--fg-4)', textAlign:'center',
                padding:'0 0 5px', textTransform:'uppercase' },
  day:        { border:0, background:'transparent', borderRadius:'var(--r-sm)', padding:'6px 0',
                cursor:'pointer', font:'600 12px/1 var(--font-sans)', color:'var(--fg-1)',
                textAlign:'center', transition:'background .1s' },
  daySelected:{ background:'var(--fenix-orange)', color:'#fff' },
  dayInRange: { background:'var(--fenix-orange-100)', color:'var(--fenix-orange-600)', borderRadius:0 },
  dayToday:   { fontWeight:800, color:'var(--fenix-orange)' },
  rangeRow:   { display:'flex', alignItems:'center', gap:8, background:'var(--bg-sunken)',
                borderRadius:'var(--r-md)', padding:'9px 12px', margin:'10px 0 12px' },
  rangeItem:  { flex:1, display:'flex', flexDirection:'column', gap:3 },
  rangeLabel: { font:'var(--text-caption)', color:'var(--fg-3)', textTransform:'uppercase', letterSpacing:'.05em' },
  rangeVal:   { font:'700 13px/1 var(--font-mono)', color:'var(--fg-1)' },
  rangeSep:   { font:'600 12px/1 var(--font-sans)', color:'var(--fg-4)', flex:'none' },
  actions:    { display:'flex', gap:8 },
  btnCancel:  { flex:1, border:'1px solid var(--border-2)', background:'transparent',
                borderRadius:'var(--r-md)', padding:'8px', font:'600 12px/1 var(--font-sans)',
                color:'var(--fg-2)', cursor:'pointer' },
  btnApply:   { flex:1, border:0, background:'var(--fenix-orange)', borderRadius:'var(--r-md)',
                padding:'8px', font:'600 12px/1 var(--font-sans)', color:'#fff', cursor:'pointer' },
  btnApplyOff:{ background:'var(--gray-200)', color:'var(--fg-4)', cursor:'not-allowed' },
};

window.DateRangePicker = DateRangePicker;