{$_("me.title")}

{$_("me.welcome", { values: { name: data.authStatus.user!.artist_name }, })}

{#if isModel(data.authStatus.user!)} {/if}

{$_("me.settings.title")} {$_("me.recordings.title")} {#if data.analytics} Analytics {/if}

{$_("me.settings.profile_title")} {$_("me.settings.profile_subtitle")}

{$_("me.settings.avatar")} {#if avatar}

{avatar.name} {displaySize(avatar.size)}

{/if}

{$_("me.settings.first_name")}

{$_("me.settings.last_name")}

{$_("me.settings.artist_name")}

{$_("me.settings.description")}

</div>
                <div class="space-y-2">
                  <Label for="tags">{$_("me.settings.tags")}</Label>
                  <TagsInput
                    id="tags"
                    bind:value={tags}
                    placeholder={$_("me.settings.tags_placeholder")}
                    class="bg-background/50 border-primary/20 focus:border-primary"
                  />
                </div>
                {#if isProfileError}
                  <div class="grid w-full items-start gap-4">
                    <Alert.Root variant="destructive">
                      <Alert.Title class="items-center flex"
                        ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>{$_(
                          "me.settings.error",
                        )}</Alert.Title
                      >
                      <Alert.Description>{profileError}</Alert.Description>
                    </Alert.Root>
                  </div>
                {/if}
                <Button
                  type="submit"
                  class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
                  disabled={isProfileLoading}
                >
                  {#if isProfileLoading}
                    <div
                      class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
                    ></div>
                    {$_("me.settings.updating_profile")}
                  {:else}
                    {$_("me.settings.update_profile")}
                  {/if}
                </Button>
              </form>
            </CardContent>
          </Card>

<Card class="bg-card/50 border-primary/20">
            <CardHeader>
              <CardTitle>{$_("me.settings.privacy_title")}</CardTitle>
              <CardDescription>{$_("me.settings.privacy_subtitle")}</CardDescription>
            </CardHeader>
            <CardContent class="space-y-4">
              <form onsubmit={handleSecuritySubmit} class="space-y-4">
                
                <div class="space-y-2">
                  <Label for="email">{$_("me.settings.email")}</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder={$_("me.settings.email_placeholder")}
                    bind:value={email}
                    required
                    class="bg-background/50 border-primary/20 focus:border-primary"
                  />
                </div>

<div class="space-y-2">
                  <Label for="password">{$_("me.settings.password")}</Label>
                  <div class="relative">
                    <Input
                      id="password"
                      type={showPassword ? "text" : "password"}
                      placeholder={$_("me.settings.password_placeholder")}
                      bind:value={password}
                      required
                      class="bg-background/50 border-primary/20 focus:border-primary pr-10"
                    />
                    <button
                      type="button"
                      onclick={() => (showPassword = !showPassword)}
                      class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                    >
                      {#if showPassword}
                        <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
                      {:else}
                        <span class="icon-[ri--eye-line] w-4 h-4"></span>
                      {/if}
                    </button>
                  </div>
                </div>

<div class="space-y-2">
                  <Label for="confirmPassword">{$_("me.settings.confirm_password")}</Label>
                  <div class="relative">
                    <Input
                      id="confirmPassword"
                      type={showConfirmPassword ? "text" : "password"}
                      placeholder={$_("me.settings.confirm_password_placeholder")}
                      bind:value={confirmPassword}
                      required
                      class="bg-background/50 border-primary/20 focus:border-primary pr-10"
                    />
                    <button
                      type="button"
                      onclick={() => (showConfirmPassword = !showConfirmPassword)}
                      class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                    >
                      {#if showConfirmPassword}
                        <span class="icon-[ri--eye-off-line] w-4 h-4"></span>
                      {:else}
                        <span class="icon-[ri--eye-line] w-4 h-4"></span>
                      {/if}
                    </button>
                  </div>
                </div>
                {#if isSecurityError}
                  <div class="grid w-full items-start gap-4">
                    <Alert.Root variant="destructive">
                      <Alert.Title class="items-center flex"
                        ><span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>{$_(
                          "me.settings.error",
                        )}</Alert.Title
                      >
                      <Alert.Description>{securityError}</Alert.Description>
                    </Alert.Root>
                  </div>
                {/if}
                <Button
                  variant="outline"
                  type="submit"
                  class="cursor-pointer w-full border-primary/20 hover:bg-primary/10"
                  disabled={isSecurityLoading}
                >
                  {#if isSecurityLoading}
                    <div
                      class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
                    ></div>
                    {$_("me.settings.updating_security")}
                  {:else}
                    {$_("me.settings.update_security")}
                  {/if}
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </TabsContent>

<TabsContent value="recordings" class="space-y-6">
        <div class="mb-6 flex justify-between items-center">
          <div>
            <h2 class="text-2xl font-bold text-card-foreground">
              {$_("me.recordings.title")}
            </h2>
            <p class="text-muted-foreground">
              {$_("me.recordings.description")}
            </p>
          </div>
          <Button
            href="/play"
            class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
          >
            <span class="icon-[ri--play-line] w-4 h-4 mr-2"></span>
            {$_("me.recordings.go_to_play")}
          </Button>
        </div>

{#if recordings.length === 0}
          <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--play-list-2-line] w-12 h-12 text-muted-foreground"></span>
                </div>
                <h3 class="text-xl font-semibold mb-2">
                  {$_("me.recordings.no_recordings")}
                </h3>
                <p class="text-muted-foreground mb-6 max-w-md">
                  {$_("me.recordings.no_recordings_description")}
                </p>
                <Button
                  href="/play"
                  class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
                >
                  <span class="icon-[ri--play-line] w-4 h-4 mr-2"></span>
                  {$_("me.recordings.go_to_play")}
                </Button>
              </div>
            </CardContent>
          </Card>
        {:else}
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {#each recordings as recording (recording.id)}
              <RecordingCard
                {recording}
                onPlay={handlePlayRecording}
                onDelete={handleDeleteRecording}
              />
            {/each}
          </div>
        {/if}
      </TabsContent>

{#if data.analytics}
        <TabsContent value="analytics" class="space-y-6">
          <div class="mb-6">
            <h2 class="text-2xl font-bold text-card-foreground">Analytics Dashboard</h2>
            <p class="text-muted-foreground">
              Track your content performance and audience engagement
            </p>
          </div>

<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>
                  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>
                  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>
                  Total Plays
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p class="text-3xl font-bold">{data.analytics.total_plays.toLocaleString()}</p>
              </CardContent>
            </Card>
          </div>

<Card class="bg-card/50 border-primary/20">
            <CardHeader>
              <CardTitle>Video Performance</CardTitle>
              <CardDescription>Detailed metrics for each video</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>
        </TabsContent>
      {/if}
    </Tabs>
  </div>
</div>