import { PageHeader } from '@/components/layout/page-header'
import { DataTable } from '@/components/tables/data-table'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { SelectField, TextareaField, TextField } from '@/components/ui/form-field'
import { updateRouteModerationAction, upsertContentFlagAction } from '@/lib/actions/admin-actions'
import { listRoutes } from '@/lib/data/admin-queries'
import { requireAdmin } from '@/lib/auth/session'

export const dynamic = 'force-dynamic'

export default async function RoutesPage() {
  await requireAdmin('routes.read')
  const routes = await listRoutes()
  const rows = routes.map((route) => ({
    id: route.id,
    titre: route.title,
    type: route.route_type,
    distance: route.distance_km,
    duree: route.duration_min,
    saves: route.saves_count,
    rating: route.rating_avg,
    statut: route.status,
    privacy: route.privacy,
    flag: route.flag,
    creation: route.created_at,
  }))

  return (
    <div className="space-y-6">
      <PageHeader
        title="Routes communautaires"
        description="Moderation, publication, archivage, mise en avant et controle des routes publiees."
      />
      <Card>
        <CardContent className="pt-5">
          <DataTable
            data={rows}
            columns={[
              { key: 'titre', label: 'Titre', sortable: true },
              { key: 'type', label: 'Type', badge: true },
              { key: 'distance', label: 'KM', sortable: true },
              { key: 'duree', label: 'Min', sortable: true },
              { key: 'saves', label: 'Saves', sortable: true },
              { key: 'rating', label: 'Rating', sortable: true },
              { key: 'statut', label: 'Statut', badge: true },
              { key: 'privacy', label: 'Privacy', badge: true },
              { key: 'flag', label: 'Flag', badge: true },
              { key: 'creation', label: 'Creation', sortable: true },
            ]}
          />
        </CardContent>
      </Card>

      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Changer statut route</CardTitle>
          </CardHeader>
          <CardContent>
            <form action={updateRouteModerationAction} className="grid gap-4">
              <TextField label="Route ID" name="routeId" required />
              <SelectField
                label="Statut"
                name="status"
                options={[
                  { label: 'Draft', value: 'draft' },
                  { label: 'Published', value: 'published' },
                  { label: 'Archived', value: 'archived' },
                ]}
              />
              <SelectField
                label="Privacy"
                name="privacy"
                options={[
                  { label: 'Public', value: 'public' },
                  { label: 'Private', value: 'private' },
                ]}
              />
              <TextareaField label="Note" name="note" />
              <Button type="submit">Auditer statut</Button>
            </form>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Mise en avant / masquage</CardTitle>
          </CardHeader>
          <CardContent>
            <form action={upsertContentFlagAction} className="grid gap-4">
              <input type="hidden" name="entityType" value="route" />
              <TextField label="Route ID" name="entityId" required />
              <SelectField
                label="Flag"
                name="flagType"
                options={[
                  { label: 'Featured', value: 'featured' },
                  { label: 'Hidden', value: 'hidden' },
                  { label: 'Editorial', value: 'editorial' },
                  { label: 'Sponsored', value: 'sponsored' },
                ]}
              />
              <TextField label="Label" name="label" />
              <Button type="submit">Enregistrer flag</Button>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}