import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Card, Icon, PageHeader, SelectInput } from '../../components/ui'
import RecordView from '../../components/activity/RecordView'
import useRecordView from '../../hooks/useRecordView'
import { RECORD_VIEWS } from '../../api/recordView'
import {
  EMPLOYEE_RICH_COLUMNS,
  EMPLOYMENT_FILTERS,
  fetchEmployeeListPage,
  resolveEmployeeInstanceId,
} from '../../api/employees'
import { withRichColumns } from '../../api/richColumns'
import { useAuth } from '../../store/AuthContext'
import AddEmployeeModal from './AddEmployeeModal'

const VIEW = RECORD_VIEWS.employees

export default function EmployeeList() {
  const navigate = useNavigate()
  const { logout } = useAuth()
  // The table misses Update fields Zino doesn't map and knows nothing of the
  // workflow state, so this fetcher overlays both and filters Active/Inactive.
  // Related columns (name and code, email and phone…) are grouped into one.
  const view = useRecordView(VIEW.templateUid, {
    fetcher: fetchEmployeeListPage,
    filter: 'active',
    transform: (res) => withRichColumns(res, EMPLOYEE_RICH_COLUMNS),
  })
  const [adding, setAdding] = useState(false)
  const [opening, setOpening] = useState(false)
  const [notice, setNotice] = useState(null)

  /** `values` is keyed by Zino field id — see EMPLOYEE_FIELDS in api/employees.js. */
  function handleCreated(values) {
    const name = [values.field_1, values.field_34].filter(Boolean).join(' ').trim()
    setNotice({
      tone: 'success',
      text: `${name || 'Employee'} was created and onboarding has started.`,
    })
    // Records live in the workflow, so re-read the view rather than guessing.
    view.reload()
  }

  /**
   * Open the detail view for a row. The detail view needs the workflow
   * instance_id: use the row's own when it has one, otherwise look it up.
   */
  async function openDetails(row) {
    if (opening) return
    setOpening(true)
    setNotice(null)
    try {
      const instanceId = await resolveEmployeeInstanceId(row)
      if (instanceId == null) {
        setNotice({
          tone: 'danger',
          text: 'Could not find this employee in the workflow, so its details cannot be shown.',
        })
        return
      }
      navigate(`/employees/${encodeURIComponent(instanceId)}`)
    } catch (err) {
      if (err?.status === 401) {
        logout()
        navigate('/login', { replace: true })
        return
      }
      setNotice({ tone: 'danger', text: err?.message || 'Could not open this employee.' })
    } finally {
      setOpening(false)
    }
  }

  return (
    <>
      <PageHeader
        title="Employees"
        subtitle="All staff on record, read live from the employee workflow."
        actions={
          <Button variant="primary" icon="plus" onClick={() => setAdding(true)}>
            Add Employee
          </Button>
        }
      />

      {opening && (
        <div className="notice notice--warning" role="status">
          <Icon name="search" size={15} />
          <span>Opening employee…</span>
        </div>
      )}

      {notice && (
        <div className={`notice notice--${notice.tone}`} role="status">
          <Icon name={notice.tone === 'success' ? 'check' : 'alert'} size={15} />
          <span>{notice.text}</span>
          <button
            type="button"
            className="notice__close"
            onClick={() => setNotice(null)}
            aria-label="Dismiss"
          >
            <Icon name="close" size={14} />
          </button>
        </div>
      )}

      <Card flush>
        <RecordView
          {...view}
          rowKey={VIEW.rowKey}
          emptyText={
            view.query.filter === 'inactive' ? 'No inactive employees.' : 'No employees yet.'
          }
          onRowClick={openDetails}
          toolbar={
            <div className="filter">
              <SelectInput
                value={view.query.filter}
                onChange={(e) => view.setFilter(e.target.value)}
                options={EMPLOYMENT_FILTERS}
                aria-label="Show employees"
              />
            </div>
          }
        />
      </Card>

      <AddEmployeeModal
        open={adding}
        onClose={() => setAdding(false)}
        onCreated={handleCreated}
      />
    </>
  )
}