import { useState } from 'react'
import { useI18n } from '../i18n'

export default function Dashboard({ api }) {
  const { t } = useI18n()
  const [notifications, setNotifications] = useState([])

  return (
    <div className="dashboard-layout">
      <div className="dashboard-content">
        <div className="dashboard-grid">
          <div className="dashboard-section">
            <div className="dashboard-section-header">
              <div className="dashboard-section-title">{t('studio.workflows')}</div>
            </div>
            <div className="dashboard-workflows-inline">
              <div className="workflow-section">
                <div className="section-label">{t('studio.workflows')}</div>
                <div className="empty-state" style={{ padding: 20 }}>
                  {t('studio.noWorkflow')}
                </div>
              </div>
              <div className="workflow-section">
                <div className="section-label">{t('studio.activeAgents')}</div>
                <div className="empty-state" style={{ padding: 20 }}>
                  {t('studio.noWorkflow')}
                </div>
              </div>
            </div>
          </div>

          <div className="dashboard-section">
            <div className="dashboard-section-header">
              <div className="dashboard-section-title">{t('dashboard.activityLog')}</div>
              {notifications.length > 0 && (
                <span className="badge warn">{notifications.length}</span>
              )}
            </div>
            {notifications.length === 0 ? (
              <div className="empty-state">{t('dashboard.noUpdateData')}</div>
            ) : (
              <div className="dashboard-notifications-inline">
                {notifications.map(n => (
                  <div key={n.id} className={`notif-row notif-${n.type}`}>
                    <span className="notif-time">
                      {n.time.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                    </span>
                    <span className="notif-text">{n.text}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}