<script lang="ts">
  import { _ } from "svelte-i18n";
  import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
  } from "$lib/components/ui/card";
  import Meta from "$lib/components/meta/meta.svelte";

  const { data } = $props();
</script>

<Meta title={$_("me.analytics.title")} />

<div class="py-3 sm:py-6 lg:pl-6">
  <div class="flex items-center justify-between mb-6">
    <div>
      <h1 class="text-2xl font-bold">{$_("me.analytics.title")}</h1>
      <p class="text-sm text-muted-foreground mt-0.5">{$_("me.analytics.description")}</p>
    </div>
  </div>

  <div class="space-y-6">
    {#if data.analytics}
      <!-- Overview Stats -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card class="bg-card/50 border-primary/20">
          <CardHeader>
            <CardTitle class="flex items-center gap-2">
              <span class="icon-[ri--video-line] w-5 h-5 text-primary"></span>
              {$_("me.analytics.total_videos")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-3xl font-bold">{data.analytics.total_videos}</p>
          </CardContent>
        </Card>

        <Card class="bg-card/50 border-primary/20">
          <CardHeader>
            <CardTitle class="flex items-center gap-2">
              <span class="icon-[ri--heart-fill] w-5 h-5 text-primary"></span>
              {$_("me.analytics.total_likes")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-3xl font-bold">{data.analytics.total_likes.toLocaleString()}</p>
          </CardContent>
        </Card>

        <Card class="bg-card/50 border-primary/20">
          <CardHeader>
            <CardTitle class="flex items-center gap-2">
              <span class="icon-[ri--play-fill] w-5 h-5 text-primary"></span>
              {$_("me.analytics.total_plays")}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-3xl font-bold">{data.analytics.total_plays.toLocaleString()}</p>
          </CardContent>
        </Card>
      </div>

      <!-- Video Performance Table -->
      <Card class="bg-card/50 border-primary/20">
        <CardHeader>
          <CardTitle>{$_("me.analytics.video_performance")}</CardTitle>
          <CardDescription>{$_("me.analytics.video_performance_description")}</CardDescription>
        </CardHeader>
        <CardContent>
          <div class="overflow-x-auto">
            <table class="w-full">
              <thead>
                <tr class="border-b border-border">
                  <th class="text-left p-3">Title</th>
                  <th class="text-right p-3">Likes</th>
                  <th class="text-right p-3">Plays</th>
                  <th class="text-right p-3">Completion Rate</th>
                  <th class="text-right p-3">Avg Watch Time</th>
                </tr>
              </thead>
              <tbody>
                {#each data.analytics.videos as video (video.slug)}
                  <tr class="border-b border-border/50 hover:bg-primary/5 transition-colors">
                    <td class="p-3">
                      <a href="/videos/{video.slug}" class="hover:text-primary transition-colors">
                        {video.title}
                      </a>
                    </td>
                    <td class="text-right p-3 font-medium">
                      {video.likes}
                    </td>
                    <td class="text-right p-3 font-medium">
                      {video.plays}
                    </td>
                    <td class="text-right p-3">
                      <span
                        class="inline-flex items-center px-2 py-1 rounded-full text-xs {video.completion_rate >=
                        70
                          ? 'bg-green-500/20 text-green-500'
                          : video.completion_rate >= 40
                            ? 'bg-yellow-500/20 text-yellow-500'
                            : 'bg-red-500/20 text-red-500'}"
                      >
                        {video.completion_rate.toFixed(1)}%
                      </span>
                    </td>
                    <td class="text-right p-3 text-muted-foreground">
                      {Math.floor(video.avg_watch_time / 60)}:{(video.avg_watch_time % 60)
                        .toString()
                        .padStart(2, "0")}
                    </td>
                  </tr>
                {/each}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    {:else}
      <Card class="bg-card/50 border-primary/20">
        <CardContent class="py-12">
          <div class="flex flex-col items-center justify-center text-center">
            <div class="mb-4 p-4 rounded-full bg-muted/30 border border-border/30">
              <span class="icon-[ri--line-chart-line] w-12 h-12 text-muted-foreground"></span>
            </div>
            <h3 class="text-xl font-semibold mb-2">No analytics available</h3>
            <p class="text-muted-foreground max-w-md">
              Analytics data will appear here once your content starts getting views.
            </p>
          </div>
        </CardContent>
      </Card>
    {/if}
  </div>
</div>
