/* ProjectList.jsx — Contadores tab: project cards + create FAB + create dialog */
const { useState: useStatePL } = React;

function ProjectCard({ t, L, style, p, onOpen }) {
  const [h, setH] = useStatePL(false);
  const curMonth = window.APP.ymOf(window.APP.dayOffset(0));
  const total = window.APP.grandTotalMonth(p, curMonth);
  const bg = t[style.cardBg];
  return (
    <button onClick={() => onOpen(p.id)}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        textAlign: 'left', width: '100%', border: style.cardBorder ? `1px solid ${t.outlineVariant}` : 'none',
        background: bg, color: t.onSurface, borderRadius: style.cardRadius, padding: '18px 20px',
        cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 16,
        boxShadow: h && !style.cardBorder ? '0 4px 14px rgba(0,0,0,0.12)' : 'none',
        transform: h ? 'translateY(-1px)' : 'none', transition: 'transform .15s, box-shadow .15s', boxSizing: 'border-box',
      }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 20, fontWeight: 600, lineHeight: 1.2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.title}</div>
        <div style={{ fontSize: 15, color: t.onSurfaceVariant, marginTop: 5 }}>{L.summary(p.rows.length, window.APP.monthDays(p, curMonth).length)}</div>
      </div>
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        minWidth: 64, height: 64, borderRadius: 18, background: t.primaryContainer, color: t.onPrimaryContainer, padding: '0 10px',
      }}>
        <span style={{ fontSize: 28, fontWeight: 700, lineHeight: 1 }}>{total}</span>
        <span style={{ fontSize: 12, opacity: 0.85, marginTop: 3 }}>{L.total}</span>
      </div>
    </button>
  );
}

function CreateDialog({ t, L, onClose, onCreate }) {
  const [title, setTitle] = useStatePL(L.newProjName + ' ' + new Date().getFullYear());
  const [rows, setRows] = useStatePL(3);
  const [cols, setCols] = useStatePL(5);
  return (
    <Dialog t={t} onClose={onClose}>
      <h2 style={{ margin: '0 0 18px', fontSize: 22, fontWeight: 600, color: t.onSurface }}>{L.newProject}</h2>
      <Field t={t} label={L.projectTitle} value={title} onChange={setTitle} autoFocus />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 18 }}>
        <Stepper t={t} label={L.rows} value={rows} min={1} max={12} onChange={setRows} />
        <Stepper t={t} label={L.columns} value={cols} min={1} max={14} onChange={setCols} />
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 6, marginTop: 24 }}>
        <TextButton t={t} onClick={onClose}>{L.cancel}</TextButton>
        <FilledButton t={t} disabled={!title.trim()} onClick={() => onCreate(title.trim(), rows, cols)}>{L.create}</FilledButton>
      </div>
    </Dialog>
  );
}

// M3 outlined text field
function Field({ t, label, value, onChange, autoFocus, type, placeholder }) {
  const [f, setF] = useStatePL(false);
  return (
    <div style={{ position: 'relative' }}>
      <input value={value} autoFocus={autoFocus} type={type || 'text'} placeholder={placeholder} inputMode={type === 'email' ? 'email' : undefined} autoCapitalize={type === 'email' ? 'none' : undefined} autoCorrect={type === 'email' ? 'off' : undefined} onFocus={() => setF(true)} onBlur={() => setF(false)}
        onChange={(e) => onChange(e.target.value)}
        style={{
          width: '100%', boxSizing: 'border-box', padding: '15px 16px', fontSize: 16,
          borderRadius: 8, background: 'transparent', color: t.onSurface,
          border: `${f ? 2 : 1}px solid ${f ? t.primary : t.outline}`, outline: 'none',
          margin: f ? 0 : '1px', fontFamily: 'inherit',
        }} />
      <span style={{
        position: 'absolute', left: 12, top: -8, padding: '0 6px', fontSize: 12,
        background: t.surfContHigh, color: f ? t.primary : t.onSurfaceVariant,
      }}>{label}</span>
    </div>
  );
}

function ExtendedFab({ t, L, onClick }) {
  const [h, setH] = useStatePL(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        position: 'absolute', right: 18, bottom: 34, zIndex: 20,
        display: 'flex', alignItems: 'center', gap: 10, border: 'none',
        background: t.primaryContainer, color: t.onPrimaryContainer,
        padding: '0 22px 0 18px', height: 60, borderRadius: 20, cursor: 'pointer',
        boxShadow: h ? '0 8px 22px rgba(0,0,0,0.26)' : '0 4px 12px rgba(0,0,0,0.2)',
        transform: h ? 'translateY(-2px)' : 'none', transition: 'all .16s cubic-bezier(.2,.8,.2,1)',
        fontSize: 17, fontWeight: 600, whiteSpace: 'nowrap',
      }}>
      <Icon name="add" size={26} color={t.onPrimaryContainer} />
      {L.newProject}
    </button>
  );
}

function ProjectList({ t, L, style, projects, onOpen, onCreate }) {
  const [creating, setCreating] = useStatePL(false);
  return (
    <div style={{ position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 16px 110px' }}>
        {projects.length === 0 ? (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '90px 30px', gap: 6 }}>
            <div style={{ width: 84, height: 84, borderRadius: 26, background: t.surfContHigh, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
              <Icon name="counter" size={40} color={t.onSurfaceVariant} />
            </div>
            <div style={{ fontSize: 21, fontWeight: 600, color: t.onSurface }}>{L.noProjectsT}</div>
            <div style={{ fontSize: 15.5, color: t.onSurfaceVariant, maxWidth: 250, lineHeight: 1.45 }}>{L.noProjectsB}</div>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {projects.map((p) => <ProjectCard key={p.id} t={t} L={L} style={style} p={p} onOpen={onOpen} />)}
          </div>
        )}
      </div>
      <ExtendedFab t={t} L={L} onClick={() => setCreating(true)} />
      {creating && <CreateDialog t={t} L={L} onClose={() => setCreating(false)}
        onCreate={(title, rows, cols) => { onCreate(title, rows, cols); setCreating(false); }} />}
    </div>
  );
}

Object.assign(window, { ProjectList, Field });