// To Do page — renders the bulleted list in webpage/data/todo.md.
//
// The whole file is wrapped in an IIFE so its helpers stay out of the shared
// global scope that every text/babel script compiles into (see the "no
// top-level const" gotcha in docs/design_style_guide.md).
(function () {
  'use strict';

  const { Box } = MaterialUI;
  // IIFE scope, so the module-level helpers below can reach the design system
  // too (the component re-reads it for readability at its own top).
  const DS = window.DesignSystem;

  const TODO_URL = '/data/todo.md';

  // `- item`, `* item`, `+ item`, `1. item`, `1) item`
  const LIST_RE = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/;
  // Optional task-list checkbox at the start of an item: `- [ ] item`
  const CHECKBOX_RE = /^\[([ xX])\]\s+(.*)$/;
  const HEADING_RE = /^(#{1,6})\s+(.*)$/;

  // --- markdown -> section/item tree ---------------------------------------
  // Only what a to-do list needs: headings become sections, list items nest by
  // indentation, and anything else becomes a note line under the section.
  const parseTodoMarkdown = (text) => {
    const lines = text.replace(/\r\n?/g, '\n').split('\n');

    let docTitle = null;
    const sections = [];
    let section = null;
    // Stack of { indent, items } — `items` is the list the next item at that
    // depth gets pushed onto.
    let stack = [];

    const ensureSection = () => {
      if (!section) {
        section = { title: null, items: [], notes: [] };
        sections.push(section);
      }
      return section;
    };

    lines.forEach((rawLine) => {
      const line = rawLine.replace(/\s+$/, '');

      if (line.trim() === '') {
        return;
      }

      const heading = line.match(HEADING_RE);
      if (heading) {
        const level = heading[1].length;
        const title = heading[2].trim();
        if (level === 1 && docTitle === null && sections.length === 0) {
          docTitle = title;
        } else {
          section = { title: title, items: [], notes: [] };
          sections.push(section);
        }
        stack = [];
        return;
      }

      const listItem = line.match(LIST_RE);
      if (listItem) {
        const indent = listItem[1].replace(/\t/g, '    ').length;
        const marker = listItem[2];
        const ordered = /\d/.test(marker);
        let content = listItem[3].trim();

        let done = null;
        const checkbox = content.match(CHECKBOX_RE);
        if (checkbox) {
          done = checkbox[1].toLowerCase() === 'x';
          content = checkbox[2].trim();
        }

        const item = {
          text: content,
          ordered: ordered,
          number: ordered ? parseInt(marker, 10) : null,
          done: done,
          children: []
        };

        const target = ensureSection();
        // Pop back to the level this item belongs at, then either nest under
        // the last item (deeper indent) or sit alongside it.
        while (stack.length > 0 && indent < stack[stack.length - 1].indent) {
          stack.pop();
        }
        if (stack.length === 0) {
          stack = [{ indent: indent, items: target.items }];
        } else if (indent > stack[stack.length - 1].indent) {
          const parentItems = stack[stack.length - 1].items;
          const parent = parentItems[parentItems.length - 1];
          if (parent) {
            stack.push({ indent: indent, items: parent.children });
          }
        }
        stack[stack.length - 1].items.push(item);
        return;
      }

      // A non-list, indented line continues the previous item's text;
      // otherwise it's a standalone note under the current section.
      const target = ensureSection();
      const currentItems = stack.length > 0 ? stack[stack.length - 1].items : null;
      const last = currentItems && currentItems[currentItems.length - 1];
      if (last && /^\s/.test(rawLine)) {
        last.text += ' ' + line.trim();
      } else {
        target.notes.push(line.trim());
        stack = [];
      }
    });

    return { title: docTitle, sections: sections };
  };

  // --- inline formatting ----------------------------------------------------
  // `code`, **bold**, *italic*, [text](href) — rendered as React nodes so no
  // markdown source leaks into the page and no HTML is injected.
  const renderInline = (text, T, keyPrefix) => {
    const pattern = /(`[^`]+`)|(\*\*[^*]+\*\*)|(\*[^*]+\*)|(\[[^\]]+\]\([^)\s]+\))/g;
    const nodes = [];
    let lastIndex = 0;
    let match;
    let i = 0;

    while ((match = pattern.exec(text)) !== null) {
      if (match.index > lastIndex) {
        nodes.push(text.slice(lastIndex, match.index));
      }
      const token = match[0];
      const key = keyPrefix + '-' + i++;
      if (token.startsWith('`')) {
        nodes.push(
          <Box
            key={key}
            component="code"
            sx={{
              fontFamily: window.DesignSystem.MONO,
              fontSize: '0.92em',
              padding: '1px 5px',
              background: T.surface,
              border: DS.hairline(T)
            }}
          >
            {token.slice(1, -1)}
          </Box>
        );
      } else if (token.startsWith('**')) {
        nodes.push(<strong key={key}>{token.slice(2, -2)}</strong>);
      } else if (token.startsWith('*')) {
        nodes.push(<em key={key}>{token.slice(1, -1)}</em>);
      } else {
        const split = token.indexOf('](');
        nodes.push(
          <Box
            key={key}
            component="a"
            href={token.slice(split + 2, -1)}
            target="_blank"
            rel="noopener noreferrer"
            sx={{ color: T.accent700, textUnderlineOffset: '2px' }}
          >
            {token.slice(1, split)}
          </Box>
        );
      }
      lastIndex = match.index + token.length;
    }

    if (lastIndex < text.length) {
      nodes.push(text.slice(lastIndex));
    }
    return nodes;
  };

  // --- list rendering -------------------------------------------------------
  // Depth 0 markers are accent squares (or the item's number); deeper tiers
  // step down to a hairline outline square, mirroring the design-system rules.
  const Marker = ({ T, item, depth }) => {
    if (item.done !== null) {
      return (
        <Box
          component="span"
          sx={{
            width: '13px',
            height: '13px',
            marginTop: '4px',
            flex: 'none',
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            border: `1px solid ${item.done ? T.accent : T.divider}`,
            background: item.done ? T.accent : 'transparent',
            color: T.card,
            fontSize: '10px',
            fontWeight: 800,
            lineHeight: 1
          }}
        >
          {item.done ? '✓' : ''}
        </Box>
      );
    }

    if (item.ordered) {
      return (
        <Box
          component="span"
          sx={{
            minWidth: '18px',
            marginTop: '1px',
            flex: 'none',
            fontSize: '12px',
            fontWeight: 800,
            fontVariantNumeric: 'tabular-nums',
            color: depth === 0 ? T.accent700 : T.mix(0.6)
          }}
        >
          {item.number}.
        </Box>
      );
    }

    return (
      <Box
        component="span"
        sx={{
          width: depth === 0 ? '9px' : '7px',
          height: depth === 0 ? '9px' : '7px',
          marginTop: depth === 0 ? '6px' : '7px',
          flex: 'none',
          display: 'inline-block',
          background: depth === 0 ? T.accent : 'transparent',
          border: depth === 0 ? 'none' : `1px solid ${T.mix(0.5)}`
        }}
      />
    );
  };

  const TodoList = ({ T, items, depth, keyPrefix }) => (
    <Box
      component="ul"
      sx={{
        listStyle: 'none',
        margin: 0,
        padding: 0,
        paddingLeft: depth === 0 ? 0 : '22px',
        marginTop: depth === 0 ? 0 : '8px',
        borderLeft: depth === 0 ? 'none' : `1px solid ${T.mix(0.18)}`
      }}
    >
      {items.map((item, index) => {
        const key = keyPrefix + '-' + index;
        return (
          <Box
            component="li"
            key={key}
            sx={{
              padding: depth === 0 ? '5px 0' : '4px 0',
              paddingLeft: depth === 0 ? 0 : '12px'
            }}
          >
            <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
              <Marker T={T} item={item} depth={depth} />
              <Box
                sx={{
                  fontSize: depth === 0 ? '15px' : '14px',
                  fontWeight: depth === 0 ? 600 : 400,
                  lineHeight: 1.45,
                  color: item.done === true ? T.mix(0.45) : T.mix(depth === 0 ? 0.92 : 0.75),
                  textDecoration: item.done === true ? 'line-through' : 'none'
                }}
              >
                {renderInline(item.text, T, key)}
              </Box>
            </Box>
            {item.children.length > 0 && (
              <TodoList T={T} items={item.children} depth={depth + 1} keyPrefix={key} />
            )}
          </Box>
        );
      })}
    </Box>
  );

  const TodoPage = () => {
    const {
      CircularProgress, Button, Dialog, DialogTitle, DialogContent, DialogActions,
      TextField, Snackbar, Alert
    } = MaterialUI;
    const theme = MaterialUI.useTheme();
    const darkMode = theme.palette.mode === 'dark';
    const DS = window.DesignSystem;
    const T = DS.tokens(darkMode);

    const [state, setState] = React.useState({
      status: 'loading', doc: null, source: '', error: null
    });

    // Unlock state mirrors the Plants page: the password itself doubles as the
    // "unlocked" flag, lives only in memory, and is re-sent with every write.
    const [unlockPassword, setUnlockPassword] = React.useState('');
    const [unlockDialogOpen, setUnlockDialogOpen] = React.useState(false);
    const [unlockInput, setUnlockInput] = React.useState('');
    const [unlockError, setUnlockError] = React.useState(false);
    const [snackbar, setSnackbar] = React.useState({ open: false, message: '', severity: 'success' });

    const [editing, setEditing] = React.useState(false);
    const [draft, setDraft] = React.useState('');
    const [saving, setSaving] = React.useState(false);

    React.useEffect(() => {
      let cancelled = false;
      fetch(TODO_URL, { cache: 'no-store' })
        .then((response) => {
          if (!response.ok) {
            throw new Error(`Could not load ${TODO_URL} (HTTP ${response.status})`);
          }
          return response.text();
        })
        .then((text) => {
          if (!cancelled) {
            setState({ status: 'ready', doc: parseTodoMarkdown(text), source: text, error: null });
          }
        })
        .catch((error) => {
          if (!cancelled) {
            setState({ status: 'error', doc: null, source: '', error: error.message });
          }
        });
      return () => {
        cancelled = true;
      };
    }, []);

    const handleUnlock = async () => {
      try {
        const response = await fetch('/data/todo/unlock', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ password: unlockInput })
        });
        const data = await response.json();
        if (data.unlocked) {
          setUnlockPassword(unlockInput);
          setUnlockDialogOpen(false);
          setUnlockInput('');
          setUnlockError(false);
          setSnackbar({ open: true, message: 'To Do editing unlocked', severity: 'success' });
        } else {
          setUnlockError(true);
        }
      } catch (error) {
        setSnackbar({ open: true, message: `Unlock failed: ${error.message}`, severity: 'error' });
      }
    };

    const handleSave = async () => {
      setSaving(true);
      try {
        const response = await fetch('/data/todo', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ content: draft, password: unlockPassword })
        });
        if (!response.ok) {
          const message = await response.text();
          if (response.status === 403) {
            setUnlockPassword('');
            setEditing(false);
          }
          setSnackbar({ open: true, message: message || `Save failed (HTTP ${response.status})`, severity: 'error' });
          return;
        }
        setState({ status: 'ready', doc: parseTodoMarkdown(draft), source: draft, error: null });
        setEditing(false);
        setSnackbar({ open: true, message: 'To Do saved', severity: 'success' });
      } catch (error) {
        setSnackbar({ open: true, message: `Save failed: ${error.message}`, severity: 'error' });
      } finally {
        setSaving(false);
      }
    };

    const doc = state.doc;
    const modBtnSx = DS.secondaryBtnSx(T);

    return (
      <DS.PageShell T={T} darkMode={darkMode}>
        <DotMatrixHeading text={doc && doc.title ? doc.title : 'To Do'} />
        <DS.Hr T={T} />

        {state.status === 'loading' && (
          <Box sx={{ display: 'flex', justifyContent: 'center', padding: '48px 0' }}>
            <CircularProgress />
          </Box>
        )}

        {!editing && state.status === 'error' && (
          <Box sx={Object.assign({}, DS.cardSx(T), { borderColor: T.accent })}>
            <Box component="span" sx={DS.controlLabelSx(T)}>Error</Box>
            <Box sx={{ marginTop: '8px', fontSize: '14px', color: T.mix(0.8) }}>
              {state.error}
            </Box>
            <Box sx={{ marginTop: '8px', fontSize: '13px', color: T.mix(0.6) }}>
              Add a bulleted markdown list at <code>webpage/data/todo.md</code> to populate this page.
            </Box>
          </Box>
        )}

        {editing && (
          <Box sx={DS.cardSx(T)}>
            <Box component="span" sx={DS.controlLabelSx(T)}>Editing todo.md</Box>
            <Box
              component="textarea"
              value={draft}
              spellCheck={false}
              onChange={(event) => setDraft(event.target.value)}
              sx={{
                display: 'block',
                width: '100%',
                marginTop: '10px',
                minHeight: '480px',
                padding: '12px',
                resize: 'vertical',
                boxSizing: 'border-box',
                fontFamily: DS.MONO,
                fontSize: '13px',
                lineHeight: 1.6,
                color: T.text,
                backgroundColor: T.surface,
                border: DS.hairline(T),
                borderRadius: 0,
                outline: 'none',
                '&:focus': { borderColor: T.accent }
              }}
            />
          </Box>
        )}

        {!editing && state.status === 'ready' && doc.sections.length === 0 && (
          <Box sx={DS.cardSx(T)}>
            <Box sx={{ fontSize: '14px', color: T.mix(0.7) }}>
              todo.md is empty — nothing to do.
            </Box>
          </Box>
        )}

        {!editing && state.status === 'ready' && doc.sections.length > 0 && (
          <Box sx={DS.cardSx(T)}>
            {doc.sections.map((section, index) => (
              <Box
                component="section"
                key={'section-' + index}
                sx={{
                  marginTop: index === 0 ? 0 : '24px',
                  paddingTop: index === 0 ? 0 : '20px',
                  borderTop: index === 0 ? 'none' : DS.hairline(T)
                }}
              >
                {section.title && (
                  <Box
                    component="h2"
                    sx={Object.assign({}, DS.sectionH2Sx, {
                      fontSize: '18px',
                      marginBottom: '10px'
                    })}
                  >
                    {section.title}
                  </Box>
                )}
                {section.notes.map((note, noteIndex) => (
                  <Box
                    key={'note-' + index + '-' + noteIndex}
                    sx={{
                      fontSize: '14px',
                      color: T.mix(0.7),
                      marginBottom: '12px',
                      lineHeight: 1.5
                    }}
                  >
                    {renderInline(note, T, 'note-' + index + '-' + noteIndex)}
                  </Box>
                ))}
                {section.items.length > 0 && (
                  <TodoList T={T} items={section.items} depth={0} keyPrefix={'s' + index} />
                )}
              </Box>
            ))}
          </Box>
        )}

        {/* Footer: editing controls — sits on the ground with a 2px top rule */}
        {state.status !== 'loading' && (
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '10px', marginTop: '44px', borderTop: `2px solid ${T.divider}`, paddingTop: '16px' }}>
            <Box sx={DS.microLabelSx(T, { weight: 400, tracking: '0.1em', color: T.textMuted })}>
              {unlockPassword ? 'List editing · unlocked' : 'List editing · locked'}
            </Box>
            <Box sx={{ display: 'flex', gap: '8px' }}>
              {!unlockPassword && (
                <Button sx={modBtnSx} onClick={() => { setUnlockDialogOpen(true); setUnlockError(false); setUnlockInput(''); }}>
                  Unlock
                </Button>
              )}
              {unlockPassword && !editing && (
                <Button sx={modBtnSx} onClick={() => { setDraft(state.source); setEditing(true); }}>
                  Edit
                </Button>
              )}
              {unlockPassword && editing && (
                <React.Fragment>
                  <Button sx={modBtnSx} onClick={() => { setEditing(false); setDraft(''); }} disabled={saving}>
                    Cancel
                  </Button>
                  <Button sx={modBtnSx} onClick={handleSave} disabled={saving || draft === state.source}>
                    {saving ? 'Saving…' : 'Save'}
                  </Button>
                </React.Fragment>
              )}
            </Box>
          </Box>
        )}

        {/* Unlock dialog */}
        <Dialog open={unlockDialogOpen} onClose={() => setUnlockDialogOpen(false)} maxWidth="xs" fullWidth>
          <DialogTitle>Unlock To Do Editing</DialogTitle>
          <DialogContent>
            <TextField
              autoFocus
              margin="dense"
              label="Password"
              type="password"
              fullWidth
              variant="outlined"
              value={unlockInput}
              onChange={(e) => { setUnlockInput(e.target.value); setUnlockError(false); }}
              onKeyDown={(e) => { if (e.key === 'Enter') handleUnlock(); }}
              error={unlockError}
              helperText={unlockError ? 'Incorrect password' : ''}
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setUnlockDialogOpen(false)}>Cancel</Button>
            <Button onClick={handleUnlock} variant="contained" disabled={!unlockInput}>Unlock</Button>
          </DialogActions>
        </Dialog>

        {/* Snackbar for success/error feedback */}
        <Snackbar
          open={snackbar.open}
          autoHideDuration={4000}
          onClose={() => setSnackbar({ ...snackbar, open: false })}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
        >
          <Alert
            onClose={() => setSnackbar({ ...snackbar, open: false })}
            severity={snackbar.severity}
            sx={{ width: '100%' }}
          >
            {snackbar.message}
          </Alert>
        </Snackbar>
      </DS.PageShell>
    );
  };

  window.TodoPage = TodoPage;
})();