import { FolderHeart, LayoutGrid, Plus, Sparkles } from 'lucide-solid'
import { For } from 'solid-js'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { DataRow } from '@/components/ui/data-row'
import { EmptyState } from '@/components/ui/empty-state'
import { SectionHeading } from '@/components/ui/section-heading'
import { dashboardPayload } from '@/services/mock-data'
import { mediaBadgeVariant, mediaTypeLabel } from '@/utils/media'

const collectionSeeds = [
  {
    id: 'col-1',
    name: 'Weekend Adrenaline',
    description: 'Fast-paced action films and high-momentum games.',
    items: dashboardPayload.watchLater.slice(0, 3),
    updatedAt: 'Updated 2h ago',
  },
  {
    id: 'col-2',
    name: 'Slow-Burn Sci‑Fi',
    description: 'Long-form worlds and cerebral pacing.',
    items: dashboardPayload.trending.filter((item) => item.genres.includes('Sci-Fi')).slice(0, 3),
    updatedAt: 'Updated yesterday',
  },
  {
    id: 'col-3',
    name: 'Launch Radar',
    description: 'Upcoming titles likely to move into queue quickly.',
    items: dashboardPayload.upcoming.slice(0, 3),
    updatedAt: 'Updated today',
  },
]

export const CollectionsPage = () => (
  <section class="space-y-6" data-testid="collections-page">
    <Card class="animate-stagger">
      <CardContent class="space-y-6 pt-6">
        <SectionHeading
          eyebrow="Collections"
          title="Curate custom shelves across movies, shows, and games."
          description="Keep personal themed sets lightweight and easy to maintain."
          badge={<Badge variant="neutral">{collectionSeeds.length} collections</Badge>}
          action={
            <Button variant="subtle" size="sm">
              <Plus class="h-4 w-4" />
              New collection
            </Button>
          }
        />

        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <div class="rounded-2xl border border-border bg-muted/40 p-4">
            <p class="text-xs uppercase tracking-[0.2em] text-muted-fg">Collections</p>
            <p class="mt-2 text-2xl font-semibold text-fg">{collectionSeeds.length}</p>
          </div>
          <div class="rounded-2xl border border-border bg-muted/40 p-4">
            <p class="text-xs uppercase tracking-[0.2em] text-muted-fg">Total items</p>
            <p class="mt-2 text-2xl font-semibold text-fg">
              {collectionSeeds.reduce((acc, collection) => acc + collection.items.length, 0)}
            </p>
          </div>
          <div class="rounded-2xl border border-border bg-muted/40 p-4">
            <p class="text-xs uppercase tracking-[0.2em] text-muted-fg">Multi-type</p>
            <p class="mt-2 text-2xl font-semibold text-fg">
              {
                collectionSeeds.filter((collection) => new Set(collection.items.map((item) => item.type)).size > 1)
                  .length
              }
            </p>
          </div>
          <div class="rounded-2xl border border-border bg-muted/40 p-4">
            <p class="text-xs uppercase tracking-[0.2em] text-muted-fg">Featured</p>
            <p class="mt-2 text-2xl font-semibold text-fg">Launch Radar</p>
          </div>
        </div>
      </CardContent>
    </Card>

    <div class="grid gap-6 xl:grid-cols-[minmax(0,1.05fr)_360px]">
      <Card>
        <CardContent class="space-y-5 pt-6">
          <SectionHeading
            title="Collection grid"
            description="Your current shelves with compact previews."
            badge={<Badge variant="accent">{collectionSeeds.length} active</Badge>}
          />

          <div class="grid gap-4 md:grid-cols-2">
            <For each={collectionSeeds}>
              {(collection) => (
                <Card class="border-border/80">
                  <CardContent class="space-y-4 pt-5">
                    <div class="flex items-center justify-between">
                      <div>
                        <h3 class="text-sm font-semibold text-fg">{collection.name}</h3>
                        <p class="mt-1 text-xs text-muted-fg">{collection.description}</p>
                      </div>
                      <Badge variant="neutral">{collection.items.length} items</Badge>
                    </div>

                    <div class="space-y-2">
                      <For each={collection.items}>
                        {(item) => (
                          <DataRow
                            tone={mediaBadgeVariant(item.type)}
                            eyebrow={mediaTypeLabel(item.type)}
                            title={item.title}
                            description={item.genres.slice(0, 2).join(' • ')}
                            badges={<Badge variant={mediaBadgeVariant(item.type)}>{mediaTypeLabel(item.type)}</Badge>}
                          />
                        )}
                      </For>
                    </div>

                    <p class="text-xs text-muted-fg">{collection.updatedAt}</p>
                  </CardContent>
                </Card>
              )}
            </For>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent class="space-y-5 pt-6">
          <SectionHeading
            title="Collection patterns"
            description="Signals that help keep shelves useful."
            badge={<Badge variant="secondary">Guidance</Badge>}
          />
          <div class="space-y-3">
            <DataRow
              tone="accent"
              eyebrow="Balance"
              title="Mix one discovery shelf with one comfort shelf"
              description="Keeps queue freshness high while preserving familiar picks."
              trailing={<Sparkles class="h-4 w-4" />}
            />
            <DataRow
              tone="neutral"
              eyebrow="Scale"
              title="Aim for 6–12 items per collection"
              description="Large shelves become hard to navigate and lose intent."
              trailing={<LayoutGrid class="h-4 w-4" />}
            />
            <DataRow
              tone="secondary"
              eyebrow="Ownership"
              title="Promote completed items out of active shelves"
              description="Helps collections remain action-oriented."
              trailing={<FolderHeart class="h-4 w-4" />}
            />
          </div>
        </CardContent>
      </Card>
    </div>

    <Card>
      <CardContent class="pt-6">
        <EmptyState
          title="Collection editing API pending"
          description="Create/update/delete persistence hooks can be connected once collection endpoints are live."
        />
      </CardContent>
    </Card>
  </section>
)
