import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Card, Icon, PageHeader } from '../../components/ui'
import RecordView from '../../components/activity/RecordView'
import useRecordView from '../../hooks/useRecordView'
import { RECORD_VIEWS } from '../../api/recordView'
import { assetRowId, withAssetListDisplay } from '../../api/assets'
import AddAssetModal from './AddAssetModal'

const VIEW = RECORD_VIEWS.assets

export default function AssetList() {
  const navigate = useNavigate()
  // Every field the Add Asset form fills gets a column, even if the view lacks
  // one, and Asset Owner shows the employee's name. Newest first, so a just
  // created asset is on page 1 (the view itself lists oldest first). idgen_2 is
  // the view's Asset id column (ID-00001…).
  const view = useRecordView(VIEW.templateUid, {
    transform: withAssetListDisplay,
    sortBy: 'idgen_2',
    sortDir: 'desc',
  })
  const [adding, setAdding] = useState(false)
  const [notice, setNotice] = useState(null)

  /** `values` is keyed by Zino field id — see ASSET_FIELDS in api/assets.js. */
  function handleCreated(values) {
    setNotice({
      tone: 'success',
      text: `${values.field_42?.trim() || 'Asset'} was created and added to the inventory.`,
    })
    // Records live in the workflow, so re-read the view rather than guessing.
    view.reload()
  }

  return (
    <>
      <PageHeader
        title="Assets"
        subtitle="Every device in the inventory, read live from the asset workflow."
        actions={
          <Button variant="primary" icon="plus" onClick={() => setAdding(true)}>
            Add Asset
          </Button>
        }
      />

      {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="No assets yet."
          // Details show the asset's assignment and offer Assign when it's Available.
          onRowClick={(row) => navigate(`/assets/${encodeURIComponent(assetRowId(row))}`)}
        />
      </Card>

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