// Export data — download balances and transactions

function SettingsExportDataScreen({ theme, accent, onBack }) {
  return (
    <Screen theme={theme} padTop={0} padBottom={40}>
      <NavBar theme={theme} title="Export data" onBack={onBack}/>

      <ExportCard theme={theme} accent={accent}
        title="Download account balances"
        sub="Snapshot of every linked account at the chosen date."/>

      <ExportCard theme={theme} accent={accent}
        title="Download transactions"
        sub="All transactions across linked accounts in the date range."/>
    </Screen>
  );
}

function ExportCard({ theme, accent, title, sub }) {
  const [format, setFormat] = React.useState('CSV');
  const [range, setRange] = React.useState('Last 30 days');
  const [done, setDone] = React.useState(false);

  const ranges = ['Last 30 days', 'Last 90 days', 'Year to date', 'All time'];
  const [rangeOpen, setRangeOpen] = React.useState(false);

  const onDownload = () => { setDone(true); setTimeout(() => setDone(false), 1800); };

  return (
    <div style={{ padding: '14px 16px 0' }}>
      <Card theme={theme} padded={false} style={{ padding: 16 }}>
        <div style={{ fontSize: 14, color: theme.text, fontWeight: 500 }}>{title}</div>
        <div style={{ fontSize: 12, color: theme.textDim, marginTop: 4, lineHeight: 1.5 }}>{sub}</div>

        {/* Format segmented */}
        <div style={{ marginTop: 14 }}>
          <Label theme={theme}>Format</Label>
          <div style={{
            display: 'flex', gap: 0, marginTop: 6,
            background: theme.surface2, borderRadius: 10, padding: 3,
          }}>
            {['CSV','PDF'].map(f => (
              <button key={f} onClick={() => setFormat(f)} style={{
                flex: 1, padding: '8px 0',
                background: format === f ? theme.surface : 'transparent',
                border: 'none', borderRadius: 8,
                color: format === f ? theme.text : theme.textDim,
                fontFamily: FONTS.ui, fontSize: 12, fontWeight: format === f ? 600 : 500,
                cursor: 'pointer',
                boxShadow: format === f ? '0 1px 3px rgba(0,0,0,0.05)' : 'none',
              }}>{f}</button>
            ))}
          </div>
        </div>

        {/* Date range */}
        <div style={{ marginTop: 14, position: 'relative' }}>
          <Label theme={theme}>Date range</Label>
          <button onClick={() => setRangeOpen(o => !o)} style={{
            marginTop: 6, width: '100%',
            background: theme.surface2, border: `0.5px solid ${theme.line2}`,
            borderRadius: 10, padding: '10px 12px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            color: theme.text, fontFamily: FONTS.ui, fontSize: 12.5,
            cursor: 'pointer',
          }}>
            <span>{range}</span>
            <Ico.chevD size={14} stroke={theme.textMute}/>
          </button>
          {rangeOpen && (
            <div style={{
              position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 10,
              marginTop: 6, background: theme.surface,
              border: `0.5px solid ${theme.line2}`, borderRadius: 10,
              boxShadow: '0 8px 24px rgba(0,0,0,0.08)', overflow: 'hidden',
            }}>
              {ranges.map(r => (
                <button key={r} onClick={() => { setRange(r); setRangeOpen(false); }} style={{
                  width: '100%', textAlign: 'left',
                  padding: '10px 12px',
                  background: r === range ? theme.surface2 : 'transparent',
                  border: 'none',
                  color: theme.text, fontFamily: FONTS.ui, fontSize: 12.5,
                  cursor: 'pointer',
                }}>{r}</button>
              ))}
            </div>
          )}
        </div>

        <button onClick={onDownload} style={{
          marginTop: 16, width: '100%',
          background: theme.text, color: theme.bg,
          border: 'none', borderRadius: 12,
          padding: '12px',
          fontFamily: FONTS.ui, fontSize: 13, fontWeight: 600,
          cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <Ico.download size={14} stroke={theme.bg} sw={2}/> Download {format}
        </button>

        {done && (
          <div style={{
            marginTop: 10, textAlign: 'center',
            fontFamily: FONTS.mono, fontSize: 10, letterSpacing: 0.6, textTransform: 'uppercase',
            color: theme.positive,
          }}>{format} prepared · sent to your email</div>
        )}
      </Card>
    </div>
  );
}

function Label({ theme, children }) {
  return <div style={{
    fontFamily: FONTS.mono, fontSize: 9.5, letterSpacing: 1, textTransform: 'uppercase',
    color: theme.textMute,
  }}>{children}</div>;
}

Object.assign(window, { SettingsExportDataScreen });