import { useState } from 'react'
import { faClock, faLocationDot, faPowerOff, faRoute, faStar } from '@fortawesome/free-solid-svg-icons'
import { SimpleGrid } from '@chakra-ui/react'
import { COLORS, MockButton, MockCard, MockDot, MockRow, MockText, MockupDevice, StatTile } from '../AdminMockup'

const DRIVERS = [
  { name: 'karim_d', status: 'busy' as const, queue: 1, today: 14, total: 512, distance: '1,8 km', eta: '6 min' },
  { name: 'sofia_l', status: 'available' as const, queue: 0, today: 9, total: 340, distance: '0,6 km', eta: '2 min' },
  { name: 'yanis_b', status: 'offline' as const, queue: 0, today: 5, total: 128, distance: '—', eta: '—' },
]

const STATUS_TONE = { available: COLORS.success, busy: COLORS.warning, offline: COLORS.text3 }
const STATUS_LABEL = { available: 'Disponible', busy: 'Occupé', offline: 'Hors ligne' }

// Sélection d'un livreur = vraie mise à jour d'état (carte + fiche + bouton
// "suivre l'itinéraire"), pas une simple image de liste.
export function LivraisonSection() {
  const [selected, setSelected] = useState('karim_d')
  const driver = DRIVERS.find((d) => d.name === selected)!

  return (
    <MockupDevice>
      <SimpleGrid columns={3} spacing={2} mb={2.5}>
        <StatTile icon={faLocationDot} value={1} label="Dispo" color={COLORS.success} />
        <StatTile icon={faClock} value={1} label="Occupés" color={COLORS.warning} />
        <StatTile icon={faPowerOff} value={1} label="Hors ligne" color={COLORS.text3} />
      </SimpleGrid>

      <MockCard>
        <div
          style={{
            height: 110,
            borderRadius: 8,
            position: 'relative',
            backgroundImage:
              'linear-gradient(135deg,#161022 25%,#1c1330 25%,#1c1330 50%,#161022 50%,#161022 75%,#1c1330 75%)',
            backgroundSize: '18px 18px',
            marginBottom: 6,
          }}
        >
          <span
            style={{
              position: 'absolute',
              top: 8,
              left: 8,
              background: `${STATUS_TONE[driver.status]}26`,
              color: STATUS_TONE[driver.status],
              fontSize: '0.62rem',
              fontWeight: 800,
              padding: '3px 9px',
              borderRadius: 999,
            }}
          >
            <MockDot color={STATUS_TONE[driver.status]} size="7px" />
            {driver.name} — {driver.distance} · {driver.eta}
          </span>
        </div>
        <MockText variant="muted" size="0.62rem">
          Cliquez un livreur ci-dessous pour suivre son trajet en direct
        </MockText>
      </MockCard>

      {DRIVERS.map((d) => {
        const isSelected = d.name === selected
        return (
          <MockCard key={d.name} active={isSelected} onClick={() => setSelected(d.name)}>
            <MockRow>
              <MockText>
                <MockDot color={STATUS_TONE[d.status]} />
                {d.name}
              </MockText>
              <span
                style={{
                  background: `${STATUS_TONE[d.status]}26`,
                  color: STATUS_TONE[d.status],
                  fontSize: '0.6rem',
                  fontWeight: 800,
                  padding: '2px 8px',
                  borderRadius: 999,
                }}
              >
                {STATUS_LABEL[d.status]}
              </span>
            </MockRow>
            <MockText variant="muted" size="0.62rem">
              {d.queue} en attente · {d.today} aujourd'hui · {d.total} total
            </MockText>
            {isSelected && (
              <div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
                <MockButton tone="outline" icon={faStar}>
                  Avis
                </MockButton>
                <MockButton tone={d.status !== 'offline' ? 'accent' : 'outline'} icon={faRoute}>
                  {d.status !== 'offline' ? "Suivre l'itinéraire" : 'Indisponible'}
                </MockButton>
              </div>
            )}
          </MockCard>
        )
      })}
    </MockupDevice>
  )
}