import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import type { Playlist, PlaylistSound } from '@/lib/api/services/playlists'
import { formatDuration } from '@/utils/format-duration'
import { Clock } from 'lucide-react'

interface PlaylistStatsCardProps {
  playlist: Playlist
  sounds: PlaylistSound[]
}

export function PlaylistStatsCard({ playlist, sounds }: PlaylistStatsCardProps) {
  const totalDuration = sounds.reduce(
    (total, sound) => total + (sound.duration || 0),
    0
  )

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Clock className="h-5 w-5" />
          Playlist Statistics
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div className="text-center p-3 bg-muted rounded-lg">
            <div className="text-2xl font-bold">{sounds.length}</div>
            <div className="text-sm text-muted-foreground">Tracks</div>
          </div>
          <div className="text-center p-3 bg-muted rounded-lg">
            <div className="text-2xl font-bold">
              {formatDuration(totalDuration)}
            </div>
            <div className="text-sm text-muted-foreground">Duration</div>
          </div>
        </div>

        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span>Created:</span>
            <span>
              {new Date(playlist.created_at).toLocaleDateString()}
            </span>
          </div>
          {playlist.updated_at && (
            <div className="flex justify-between text-sm">
              <span>Updated:</span>
              <span>
                {new Date(playlist.updated_at).toLocaleDateString()}
              </span>
            </div>
          )}
          <div className="flex justify-between text-sm">
            <span>Status:</span>
            <div className="flex gap-1">
              {playlist.is_main && (
                <Badge variant="outline" className="text-xs">
                  Main
                </Badge>
              )}
              {playlist.is_current && (
                <Badge variant="default" className="text-xs">
                  Current
                </Badge>
              )}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}