import { useState, useEffect, useCallback } from 'react'
import { AppShell } from '../../components/layout/AppShell'
import { ActivityFeed, type ActivityEntry } from '../../components/shared/ActivityFeed'
import { useI18n } from '../../i18n/useI18n'
import { api } from '../../api/client'

const ACTION_TYPES = [
  'project.create',
  'project.update',
  'project.delete',
  'project.archive',
  'member.add',
  'member.remove',
  'member.role_change',
  'user.create',
  'user.update',
  'user.deactivate',
  'login',
  'logout',
]

export function ActivityLog() {
  const { t } = useI18n()

  const [activities, setActivities] = useState<ActivityEntry[]>([])
  const [loading, setLoading] = useState(true)

  const [filterAction, setFilterAction] = useState('')
  const [filterDateFrom, setFilterDateFrom] = useState('')
  const [filterDateTo, setFilterDateTo] = useState('')

  const fetchActivities = useCallback(async () => {
    setLoading(true)
    try {
      const params = new URLSearchParams()
      if (filterAction) params.set('action', filterAction)
      if (filterDateFrom) params.set('from', filterDateFrom)
      if (filterDateTo) params.set('to', filterDateTo)

      const query = params.toString()
      const resp = await api<{items: ActivityEntry[]}>(`/api/v1/activities/${query ? `?${query}` : ''}`)
      setActivities(resp.items)
    } catch {
      setActivities([])
    } finally {
      setLoading(false)
    }
  }, [filterAction, filterDateFrom, filterDateTo])

  useEffect(() => { fetchActivities() }, [fetchActivities])

  return (
    <AppShell title={t('activity.title')}>
      <div className="page">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: '20px', fontWeight: 600 }}>
            {t('activity.title')}
          </h2>
        </div>

        {/* Filter controls */}
        <div style={{
          display: 'flex',
          gap: '12px',
          alignItems: 'flex-end',
          flexWrap: 'wrap',
          background: 'var(--bg-card)',
          border: '1px solid var(--border)',
          borderRadius: 'var(--radius)',
          padding: '16px',
        }}>
          {/* Action type filter */}
          <div className="field" style={{ flex: '1', minWidth: '180px' }}>
            <label style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              {t('activity.filter_action')}
            </label>
            <select
              value={filterAction}
              onChange={(e) => setFilterAction(e.target.value)}
            >
              <option value="">{t('activity.filter_all')}</option>
              {ACTION_TYPES.map((a) => (
                <option key={a} value={a}>{a}</option>
              ))}
            </select>
          </div>

          {/* Date from */}
          <div className="field" style={{ flex: '1', minWidth: '160px' }}>
            <label style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              {t('activity.filter_date_from')}
            </label>
            <input
              type="date"
              value={filterDateFrom}
              onChange={(e) => setFilterDateFrom(e.target.value)}
            />
          </div>

          {/* Date to */}
          <div className="field" style={{ flex: '1', minWidth: '160px' }}>
            <label style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
              {t('activity.filter_date_to')}
            </label>
            <input
              type="date"
              value={filterDateTo}
              onChange={(e) => setFilterDateTo(e.target.value)}
            />
          </div>
        </div>

        {/* Activity feed */}
        <div className="card">
          <ActivityFeed activities={activities} loading={loading} />
        </div>
      </div>
    </AppShell>
  )
}