const { useState, useMemo } = React;
const T = window.ArbiterTokens;

// Court holidays / blackout dates
const COURT_HOLIDAYS_2026 = [
  '2026-01-01','2026-01-19','2026-02-16','2026-05-25','2026-07-03','2026-07-04',
  '2026-09-07','2026-10-12','2026-11-11','2026-11-26','2026-12-25',
];
const isHoliday = (d) => COURT_HOLIDAYS_2026.includes(d);
const isWeekend = (d) => { const day = new Date(d).getDay(); return day === 0 || day === 6; };
const isBlackout = (d) => isHoliday(d) || isWeekend(d);

// Add business days
function addBusinessDays(startDate, days) {
  let d = new Date(startDate);
  let remaining = Math.abs(days);
  const dir = days >= 0 ? 1 : -1;
  while (remaining > 0) {
    d.setDate(d.getDate() + dir);
    const ds = d.toISOString().slice(0,10);
    if (!isWeekend(ds) && !isHoliday(ds)) remaining--;
  }
  return d.toISOString().slice(0,10);
}

window.addBusinessDays = addBusinessDays;
window.isBlackout = isBlackout;
window.COURT_HOLIDAYS_2026 = COURT_HOLIDAYS_2026;

// ── 1. DEADLINE CALCULATOR ──
function CalCalculator() {
  const rules = window.COURT_RULES;
  const [triggerDate, setTriggerDate] = useState('2026-05-01');
  const [selectedRules, setSelectedRules] = useState(['CR-02','CR-03','CR-06']);
  const [jurisdiction, setJurisdiction] = useState('S.D.N.Y.');
  const [useBusinessDays, setUseBusinessDays] = useState(true);

  const generated = useMemo(() => {
    return selectedRules.map(id => {
      const rule = rules.find(r => r.id === id);
      if (!rule) return null;
      const calcDate = useBusinessDays
        ? addBusinessDays(triggerDate, rule.days)
        : new Date(new Date(triggerDate).getTime() + rule.days * 86400000).toISOString().slice(0,10);
      const falls = isBlackout(calcDate);
      const adjusted = falls ? addBusinessDays(calcDate, 1) : calcDate;
      return { ...rule, calcDate, adjusted, fallsOnBlackout: falls };
    }).filter(Boolean).sort((a,b) => a.adjusted.localeCompare(b.adjusted));
  }, [triggerDate, selectedRules, useBusinessDays]);

  const toggleRule = (id) => setSelectedRules(prev => prev.includes(id) ? prev.filter(r=>r!==id) : [...prev, id]);

  return (
    <div>
      <div style={{...cal.card, borderColor: cal.amber+'30'}}>
        <div style={{...cal.cardH, background: cal.amberBg}}>
          <span style={{color: cal.amber}}>◆ Deadline Calculator</span>
          <span style={{fontSize:'10px',color:T.color.text.tertiary}}>Auto-generate downstream deadlines from trigger events</span>
        </div>
        <div style={{padding:'16px'}}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:'12px',marginBottom:'16px'}}>
            <div>
              <div style={{fontSize:'10px',fontWeight:600,color:T.color.text.tertiary,textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'4px'}}>Trigger Date</div>
              <input type="date" value={triggerDate} onChange={e=>setTriggerDate(e.target.value)} style={{width:'100%',height:'32px',border:`1px solid ${T.color.border.light}`,borderRadius:T.radius.md,padding:'0 8px',fontSize:'12px',fontFamily:T.font.family,background:T.color.bg.card,color:T.color.text.primary}} />
            </div>
            <div>
              <div style={{fontSize:'10px',fontWeight:600,color:T.color.text.tertiary,textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'4px'}}>Jurisdiction</div>
              <select value={jurisdiction} onChange={e=>setJurisdiction(e.target.value)} style={{width:'100%',height:'32px',border:`1px solid ${T.color.border.light}`,borderRadius:T.radius.md,padding:'0 8px',fontSize:'12px',fontFamily:T.font.family,background:T.color.bg.card,color:T.color.text.primary}}>
                <option value="S.D.N.Y.">S.D.N.Y.</option>
                <option value="Federal">Federal (General)</option>
                <option value="E.D.N.Y.">E.D.N.Y.</option>
                <option value="D.N.J.">D.N.J.</option>
              </select>
            </div>
            <div>
              <div style={{fontSize:'10px',fontWeight:600,color:T.color.text.tertiary,textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'4px'}}>Calculation</div>
              <div style={{display:'flex',gap:'6px'}}>
                <button onClick={()=>setUseBusinessDays(true)} style={{...cal.filterBtn,flex:1,...(useBusinessDays?cal.filterBtnActive:{})}}>Business Days</button>
                <button onClick={()=>setUseBusinessDays(false)} style={{...cal.filterBtn,flex:1,...(!useBusinessDays?cal.filterBtnActive:{})}}>Calendar Days</button>
              </div>
            </div>
          </div>
          {/* Rule picker */}
          <div style={{fontSize:'10px',fontWeight:600,color:T.color.text.tertiary,textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'6px'}}>Select Rules to Apply</div>
          <div style={{display:'flex',gap:'6px',flexWrap:'wrap',marginBottom:'16px'}}>
            {rules.map(r => (
              <button key={r.id} onClick={()=>toggleRule(r.id)} style={{
                padding:'4px 10px',borderRadius:'14px',fontSize:'10px',fontWeight:500,cursor:'pointer',fontFamily:T.font.family,
                border:`1px solid ${selectedRules.includes(r.id)?cal.amber:T.color.border.light}`,
                background:selectedRules.includes(r.id)?cal.amberBg:T.color.bg.card,
                color:selectedRules.includes(r.id)?cal.amber:T.color.text.secondary,
              }}>{r.rule}</button>
            ))}
          </div>
        </div>
      </div>

      {/* Generated deadlines */}
      {generated.length > 0 && (
        <div style={cal.card}>
          <div style={cal.cardH}><span>Generated Deadlines</span><span style={{fontSize:'10px',color:T.color.text.tertiary}}>{generated.length} from trigger {triggerDate}</span></div>
          {generated.map((g,i) => (
            <div key={i} style={{padding:'8px 16px',borderBottom:`1px solid ${T.color.border.light}`,display:'flex',alignItems:'center',gap:'10px',fontSize:'12px'}}>
              <span style={{fontFamily:T.font.mono,fontWeight:700,color:cal.amber,minWidth:'90px',fontSize:'11px'}}>{g.rule}</span>
              <div style={{flex:1}}>
                <div style={{fontWeight:500,color:T.color.text.primary}}>{g.description}</div>
                <div style={{fontSize:'10px',color:T.color.text.tertiary}}>Trigger: {g.triggerEvent} · +{g.days} {useBusinessDays?'business':'calendar'} days</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontFamily:T.font.mono,fontWeight:600,color:T.color.text.primary}}>{new Date(g.adjusted).toLocaleDateString('en-US',{weekday:'short',month:'short',day:'numeric'})}</div>
                {g.fallsOnBlackout && <div style={{fontSize:'9px',color:'#C23030'}}>! Adjusted from {new Date(g.calcDate).toLocaleDateString('en-US',{month:'short',day:'numeric'})} (holiday/weekend)</div>}
              </div>
              <button style={{...cal.filterBtn,...cal.filterBtnActive,fontSize:'9px',padding:'3px 8px'}}>+ Add</button>
            </div>
          ))}
        </div>
      )}

      {/* Court holidays reference */}
      <div style={cal.card}>
        <div style={cal.cardH}><span>Court Holidays & Blackout Dates — 2026</span></div>
        <div style={{padding:'10px 16px',display:'flex',gap:'8px',flexWrap:'wrap'}}>
          {COURT_HOLIDAYS_2026.map(h => (
            <span key={h} style={{fontSize:'10px',padding:'3px 10px',borderRadius:'12px',background:'rgba(194,48,48,0.06)',color:'#C23030',fontFamily:T.font.mono,fontWeight:500}}>
              {new Date(h+'T12:00:00').toLocaleDateString('en-US',{month:'short',day:'numeric'})}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── 3. CALENDAR GRID VIEW ──
function CalGrid() {
  const DAYS = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
  const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  const [month, setMonth] = useState(3);
  const [year, setYear] = useState(2026);
  const [selectedDay, setSelectedDay] = useState(null);
  const dl = window.DOCKET_DEADLINES;

  const daysInMonth = new Date(year, month+1, 0).getDate();
  const firstDay = (() => { const d = new Date(year, month, 1).getDay(); return d===0?6:d-1; })();
  const today = (month===3 && year===2026) ? 20 : null;

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

  const getEvents = (day) => {
    if (!day) return [];
    const key = `${year}-${String(month+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
    return dl.filter(d => d.date === key);
  };

  const selectedEvents = selectedDay ? getEvents(selectedDay) : [];
  const priorityColor = {critical:'#C23030',high:'#D97706',medium:'#3B82F6',low:'#6E7D9E'};

  return (
    <div style={{display:'grid',gridTemplateColumns:'1fr 320px',gap:'16px'}}>
      <div style={cal.card}>
        <div style={{padding:'10px 16px',borderBottom:`1px solid ${T.color.border.light}`,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <button onClick={()=>{if(month===0){setMonth(11);setYear(y=>y-1)}else setMonth(m=>m-1)}} style={{border:'none',background:'none',cursor:'pointer',fontSize:'16px',color:T.color.text.secondary,padding:'4px 8px'}}>‹</button>
          <span style={{fontSize:'14px',fontWeight:600,color:T.color.text.primary}}>{MONTHS[month]} {year}</span>
          <button onClick={()=>{if(month===11){setMonth(0);setYear(y=>y+1)}else setMonth(m=>m+1)}} style={{border:'none',background:'none',cursor:'pointer',fontSize:'16px',color:T.color.text.secondary,padding:'4px 8px'}}>›</button>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)'}}>
          {DAYS.map(d=><div key={d} style={{padding:'6px 4px',textAlign:'center',fontSize:'10px',fontWeight:600,color:T.color.text.tertiary,textTransform:'uppercase',letterSpacing:'0.06em',borderBottom:`1px solid ${T.color.border.light}`}}>{d}</div>)}
          {cells.map((day,i) => {
            const events = getEvents(day);
            const isToday = day===today;
            const dateStr = day?`${year}-${String(month+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`:null;
            const blackout = dateStr && isBlackout(dateStr);
            const isSelected = day===selectedDay;
            return (
              <div key={i} onClick={()=>day&&setSelectedDay(day)} style={{
                minHeight:'70px',padding:'3px 4px',borderBottom:`1px solid ${T.color.border.light}`,
                borderRight:(i+1)%7===0?'none':`1px solid ${T.color.border.light}`,
                cursor:day?'pointer':'default',
                background:isSelected?cal.amberBg:blackout?'rgba(194,48,48,0.02)':day?'transparent':T.color.bg.secondary,
                opacity:day?1:0.3,transition:'background 0.1s',
              }}>
                {day && <>
                  <div style={{fontSize:'12px',fontWeight:isToday?700:500,marginBottom:'2px'}}>
                    {isToday ? <span style={{background:T.color.navy800,color:'#fff',width:'22px',height:'22px',borderRadius:'50%',display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:'11px'}}>{day}</span> : <span style={{color:blackout?'#C2303080':T.color.text.primary}}>{day}</span>}
                  </div>
                  {events.map((ev,j) => (
                    <div key={j} style={{fontSize:'9px',padding:'1px 4px',borderRadius:'3px',marginBottom:'1px',
                      background:`${priorityColor[ev.priority]}10`,color:priorityColor[ev.priority],
                      fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',lineHeight:'14px'}}>
                      {ev.label.length>18?ev.label.slice(0,18)+'…':ev.label}
                    </div>
                  ))}
                </>}
              </div>
            );
          })}
        </div>
      </div>

      {/* Day detail panel */}
      <div>
        <div style={cal.card}>
          <div style={cal.cardH}><span>{selectedDay ? `${MONTHS[month]} ${selectedDay}, ${year}` : 'Select a day'}</span></div>
          {selectedDay && selectedEvents.length === 0 && (
            <div style={{padding:'24px 16px',textAlign:'center',fontSize:'12px',color:T.color.text.tertiary}}>No deadlines on this date.</div>
          )}
          {selectedEvents.map(d => (
            <div key={d.id} style={{padding:'10px 16px',borderBottom:`1px solid ${T.color.border.light}`}}>
              <div style={{display:'flex',alignItems:'center',gap:'6px',marginBottom:'4px'}}>
                <div style={{width:'6px',height:'6px',borderRadius:'50%',background:priorityColor[d.priority]}}/>
                <span style={{fontWeight:600,fontSize:'12px',color:T.color.text.primary}}>{d.label}</span>
              </div>
              <div style={{fontSize:'10px',color:T.color.text.tertiary,marginBottom:'2px'}}>{d.matter}</div>
              <div style={{fontSize:'10px',color:T.color.text.secondary}}>{d.rule} · {d.assignee}</div>
              {d.notes && <div style={{fontSize:'10px',color:T.color.text.secondary,marginTop:'4px',fontStyle:'italic'}}>{d.notes}</div>}
            </div>
          ))}
        </div>
        {/* Blackout indicator */}
        {selectedDay && (() => {
          const ds = `${year}-${String(month+1).padStart(2,'0')}-${String(selectedDay).padStart(2,'0')}`;
          return isBlackout(ds) ? (
            <div style={{padding:'8px 12px',background:'rgba(194,48,48,0.04)',borderRadius:'6px',fontSize:'10px',color:'#C23030',marginTop:'8px',fontWeight:500}}>
              ! {isHoliday(ds)?'Court Holiday':'Weekend'} — deadlines falling on this date are automatically adjusted to the next business day.
            </div>
          ) : null;
        })()}
      </div>
    </div>
  );
}

// ── 11. GANTT VIEW ──
function CalGantt() {
  const dl = window.DOCKET_DEADLINES;
  const matters = [...new Set(dl.map(d=>d.matter))];
  const now = new Date('2026-04-20');

  // 12-week window
  const startDate = new Date('2026-04-20');
  const endDate = new Date('2026-07-20');
  const totalDays = Math.ceil((endDate-startDate)/86400000);
  const weeks = [];
  for(let w=0;w<13;w++){
    const ws = new Date(startDate); ws.setDate(ws.getDate()+w*7);
    weeks.push(ws);
  }

  const matterColors = {'Redstone v. Meridian':'#C23030','Pacific Shipping Antitrust':'#3B82F6','Thornton Estate':'#A855F7','Blackwell IP':'#0D9488','Chen v. Atlas':'#D97706','Marshall Employment':'#6E7D9E','Sterling Pharma FCPA':'#06B6D4'};

  const dayPos = (date) => {
    const d = new Date(date);
    const diff = (d - startDate) / 86400000;
    return Math.max(0, Math.min(diff / totalDays * 100, 100));
  };

  return (
    <div>
      <div style={cal.card}>
        <div style={cal.cardH}><span>Gantt Timeline — All Matters</span><span style={{fontSize:'10px',color:T.color.text.tertiary}}>Apr 20 – Jul 20, 2026</span></div>
        {/* Week headers */}
        <div style={{display:'flex',borderBottom:`1px solid ${T.color.border.light}`,padding:'0 160px 0 0'}}>
          <div style={{width:'160px',minWidth:'160px',padding:'4px 16px',fontSize:'9px',fontWeight:600,color:T.color.text.tertiary,textTransform:'uppercase',borderRight:`1px solid ${T.color.border.light}`}}>Matter</div>
          <div style={{flex:1,display:'flex',position:'relative'}}>
            {weeks.map((w,i) => (
              <div key={i} style={{flex:1,padding:'4px 2px',fontSize:'8px',color:T.color.text.tertiary,textAlign:'center',borderRight:`1px solid ${T.color.border.light}`,fontFamily:T.font.mono}}>
                {w.toLocaleDateString('en-US',{month:'short',day:'numeric'})}
              </div>
            ))}
          </div>
        </div>
        {/* Matter rows */}
        {matters.map(matter => {
          const matterDl = dl.filter(d=>d.matter===matter).sort((a,b)=>a.date.localeCompare(b.date));
          const color = matterColors[matter]||'#6E7D9E';
          const first = matterDl[0];
          const last = matterDl[matterDl.length-1];
          const startPct = dayPos(first?.date||'2026-04-20');
          const endPct = dayPos(last?.date||'2026-04-20');
          return (
            <div key={matter} style={{display:'flex',borderBottom:`1px solid ${T.color.border.light}`,minHeight:'36px',alignItems:'center'}}>
              <div style={{width:'160px',minWidth:'160px',padding:'4px 16px',fontSize:'11px',fontWeight:500,color:T.color.text.primary,borderRight:`1px solid ${T.color.border.light}`,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{matter}</div>
              <div style={{flex:1,position:'relative',height:'100%',display:'flex',alignItems:'center',padding:'4px 0'}}>
                {/* Active range bar */}
                <div style={{position:'absolute',left:`${startPct}%`,width:`${Math.max(endPct-startPct,0.5)}%`,height:'6px',borderRadius:'3px',background:`${color}30`}}/>
                {/* Deadline dots */}
                {matterDl.map(d => {
                  const pos = dayPos(d.date);
                  const pColor = {critical:'#C23030',high:'#D97706',medium:'#3B82F6',low:'#6E7D9E'}[d.priority];
                  return (
                    <div key={d.id} title={`${d.label} — ${d.date}`} style={{position:'absolute',left:`${pos}%`,transform:'translateX(-50%)',width:d.priority==='critical'?'10px':'8px',height:d.priority==='critical'?'10px':'8px',borderRadius:'50%',background:pColor,border:'2px solid #fff',zIndex:1,cursor:'pointer'}}/>
                  );
                })}
                {/* Today line */}
                <div style={{position:'absolute',left:`${dayPos('2026-04-20')}%`,top:0,bottom:0,width:'1px',background:cal.amber,zIndex:2}}/>
              </div>
            </div>
          );
        })}
        {/* Legend */}
        <div style={{padding:'8px 16px',display:'flex',gap:'12px',fontSize:'9px',flexWrap:'wrap'}}>
          <div style={{display:'flex',alignItems:'center',gap:'3px'}}><div style={{width:'8px',height:'8px',borderRadius:'50%',background:'#C23030'}}/>Critical</div>
          <div style={{display:'flex',alignItems:'center',gap:'3px'}}><div style={{width:'8px',height:'8px',borderRadius:'50%',background:'#D97706'}}/>High</div>
          <div style={{display:'flex',alignItems:'center',gap:'3px'}}><div style={{width:'8px',height:'8px',borderRadius:'50%',background:'#3B82F6'}}/>Medium</div>
          <div style={{display:'flex',alignItems:'center',gap:'3px'}}><div style={{width:'1px',height:'12px',background:cal.amber}}/>Today</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CalCalculator, CalGrid, CalGantt });