<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="Posts"
  current_path={@url_path}
  project_title={@project_title}
>
  <div class="container flex-col mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <header class="w-full mb-6">
      <div class="flex items-center justify-between mb-4 flex-wrap gap-2">
        <%!-- Back Button (Left aligned) --%>
        <.link
          navigate={Routes.path("/admin")}
          class="btn btn-outline btn-primary btn-sm"
        >
          ← Back to Dashboard
        </.link>

        <%!-- Right Actions --%>
        <div class="flex gap-2">
          <.link
            navigate={Routes.path("/admin/settings/posts")}
            class="btn btn-ghost btn-sm"
            title="Posts Settings"
          >
            <.icon name="hero-cog-6-tooth" class="w-5 h-5" />
          </.link>
          <.link
            href={Routes.path("/admin/posts/new")}
            class="btn btn-primary btn-sm"
          >
            + New Post
          </.link>
        </div>
      </div>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-2xl sm:text-4xl font-bold text-base-content mb-3">Posts</h1>
        <p class="text-base sm:text-lg text-base-content">
          Manage and organize your social posts
        </p>
      </div>
    </header>

    <%!-- Statistics Summary --%>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <div class="stat bg-base-200 rounded-xl">
        <div class="stat-title">Total Posts</div>
        <div class="stat-value text-primary">{@stats.total}</div>
        <div class="stat-desc">All time</div>
      </div>

      <div class="stat bg-base-200 rounded-xl">
        <div class="stat-title">Drafts</div>
        <div class="stat-value text-neutral">{@stats.drafts}</div>
        <div class="stat-desc">Unpublished</div>
      </div>

      <div class="stat bg-base-200 rounded-xl">
        <div class="stat-title">Public</div>
        <div class="stat-value text-success">{@stats.public}</div>
        <div class="stat-desc">Live posts</div>
      </div>

      <div class="stat bg-base-200 rounded-xl">
        <div class="stat-title">Scheduled</div>
        <div class="stat-value text-info">{@stats.scheduled}</div>
        <div class="stat-desc">Auto-publish</div>
      </div>
    </div>

    <%!-- Filters & Search --%>
    <div class="bg-base-200 rounded-lg p-6 mb-6">
      <.form for={%{}} phx-change="filter" class="space-y-4">
        <%!-- Search Bar --%>
        <div class="form-control">
          <label class="label">
            <span class="label-text font-semibold">Search</span>
          </label>
          <input
            type="text"
            name="search[query]"
            value={@search_query}
            placeholder="Search titles and content..."
            class="input input-bordered w-full"
          />
        </div>

        <%!-- Filter Row --%>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <%!-- Type Filter --%>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Type</span>
            </label>
            <select name="filter[type]" class="select select-bordered w-full">
              <option value="all" selected={@filter_type == "all"}>All Types</option>
              <option value="post" selected={@filter_type == "post"}>Post</option>
              <option value="snippet" selected={@filter_type == "snippet"}>Snippet</option>
              <option value="repost" selected={@filter_type == "repost"}>Repost</option>
            </select>
          </div>

          <%!-- Status Filter --%>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Status</span>
            </label>
            <select name="filter[status]" class="select select-bordered w-full">
              <option value="all" selected={@filter_status == "all"}>All Statuses</option>
              <option value="draft" selected={@filter_status == "draft"}>Draft</option>
              <option value="public" selected={@filter_status == "public"}>Public</option>
              <option value="unlisted" selected={@filter_status == "unlisted"}>Unlisted</option>
              <option value="scheduled" selected={@filter_status == "scheduled"}>
                Scheduled
              </option>
            </select>
          </div>

          <%!-- Group Filter --%>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Group</span>
            </label>
            <select name="filter[group]" class="select select-bordered w-full">
              <option value="all" selected={@filter_group == "all"}>All Groups</option>
              <%!-- TODO: Add dynamic groups --%>
            </select>
          </div>

          <%!-- Tag Filter --%>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Tag</span>
            </label>
            <select name="filter[tag]" class="select select-bordered w-full">
              <option value="all" selected={@filter_tag == "all"}>All Tags</option>
              <%!-- TODO: Add dynamic tags --%>
            </select>
          </div>
        </div>

        <%!-- Action Buttons --%>
        <div class="flex gap-2">
          <button type="button" phx-click="clear_filters" class="btn btn-ghost btn-sm">
            Clear Filters
          </button>
          <button type="button" phx-click="refresh" class="btn btn-ghost btn-sm">
            Refresh
          </button>
        </div>
      </.form>
    </div>

    <%!-- Bulk Actions --%>
    <%= if length(@selected_posts) > 0 do %>
      <div class="alert alert-info mb-4">
        <div class="flex-1">
          <span>{length(@selected_posts)} post(s) selected</span>
        </div>
        <div class="flex gap-2">
          <button phx-click="bulk_publish" class="btn btn-success btn-sm">
            Publish Selected
          </button>
          <button
            phx-click="bulk_delete"
            class="btn btn-error btn-sm"
            data-confirm="Are you sure you want to delete the selected posts?"
          >
            Delete Selected
          </button>
        </div>
      </div>
    <% end %>

    <%!-- Posts Table --%>
    <div class="bg-base-100 rounded-lg shadow">
      <.table_default variant="zebra" class="w-full">
        <.table_default_header>
          <.table_default_row>
            <.table_default_header_cell>
              <input
                type="checkbox"
                class="checkbox checkbox-sm"
                phx-click="select_all"
                phx-value-value={
                  if length(@selected_posts) == length(@posts), do: "off", else: "on"
                }
              />
            </.table_default_header_cell>
            <.table_default_header_cell>Title</.table_default_header_cell>
            <.table_default_header_cell>Type</.table_default_header_cell>
            <.table_default_header_cell>Status</.table_default_header_cell>
            <.table_default_header_cell>Author</.table_default_header_cell>
            <.table_default_header_cell>Stats</.table_default_header_cell>
            <.table_default_header_cell>Created</.table_default_header_cell>
            <.table_default_header_cell>Actions</.table_default_header_cell>
          </.table_default_row>
        </.table_default_header>
        <.table_default_body>
          <%= if @loading do %>
            <.table_default_row>
              <.table_default_cell colspan={8} class="text-center py-8">
                <span class="loading loading-spinner loading-lg"></span>
                <p class="mt-2">Loading posts...</p>
              </.table_default_cell>
            </.table_default_row>
          <% else %>
            <%= if length(@posts) == 0 do %>
              <.table_default_row>
                <.table_default_cell colspan={8} class="text-center py-8">
                  <div class="text-base-content/60">
                    <p class="text-lg mb-2">No posts found</p>
                    <p class="text-sm">
                      <%= if @search_query != "" or @filter_status != "all" or @filter_type != "all" do %>
                        Try adjusting your filters or
                        <button phx-click="clear_filters" class="link link-primary">
                          clear filters
                        </button>
                      <% else %>
                        Create your first post to get started
                      <% end %>
                    </p>
                  </div>
                </.table_default_cell>
              </.table_default_row>
            <% else %>
              <%= for post <- @posts do %>
                <.table_default_row hover>
                  <.table_default_cell>
                    <input
                      type="checkbox"
                      class="checkbox checkbox-sm"
                      phx-click="select_post"
                      phx-value-id={post.uuid}
                      phx-value-value={if post.uuid in @selected_posts, do: "off", else: "on"}
                      checked={post.uuid in @selected_posts}
                    />
                  </.table_default_cell>
                  <.table_default_cell>
                    <div class="flex flex-col">
                      <.link
                        href={Routes.path("/admin/posts/#{post.uuid}/edit")}
                        class="link link-primary font-semibold"
                      >
                        {post.title}
                      </.link>
                      <%= if post.sub_title do %>
                        <span class="text-sm text-base-content/60">{post.sub_title}</span>
                      <% end %>
                    </div>
                  </.table_default_cell>
                  <.table_default_cell>
                    <span class={"badge #{type_badge_class(post.type)}"}>
                      {format_post_type(post.type)}
                    </span>
                  </.table_default_cell>
                  <.table_default_cell>
                    <span class={"badge #{status_badge_class(post.status)}"}>
                      {format_status(post.status)}
                    </span>
                  </.table_default_cell>
                  <.table_default_cell>
                    <%= if post.user do %>
                      {post.user.email}
                    <% else %>
                      Unknown
                    <% end %>
                  </.table_default_cell>
                  <.table_default_cell>
                    <div class="flex gap-2 text-sm">
                      <span title="Views">👁️ {post.view_count}</span>
                      <span title="Likes">❤️ {post.like_count}</span>
                      <span title="Comments">💬 {post.comment_count}</span>
                    </div>
                  </.table_default_cell>
                  <.table_default_cell class="text-sm">
                    {Calendar.strftime(post.inserted_at, "%b %d, %Y")}
                  </.table_default_cell>
                  <.table_default_cell>
                    <div class="flex items-center gap-1">
                      <.link
                        navigate={Routes.path("/admin/posts/#{post.uuid}")}
                        class="btn btn-ghost btn-xs"
                        title="View post"
                      >
                        <.icon name="hero-eye" class="w-4 h-4" />
                      </.link>
                      <button
                        phx-click="edit_post"
                        phx-value-id={post.uuid}
                        class="btn btn-ghost btn-xs"
                        title="Edit post"
                      >
                        <.icon name="hero-pencil" class="w-4 h-4" />
                      </button>
                      <%= if post.status == "draft" do %>
                        <button
                          phx-click="publish_post"
                          phx-value-id={post.uuid}
                          class="btn btn-ghost btn-xs"
                          title="Publish post"
                        >
                          <.icon name="hero-play" class="w-4 h-4" />
                        </button>
                      <% else %>
                        <button
                          phx-click="draft_post"
                          phx-value-id={post.uuid}
                          class="btn btn-ghost btn-xs"
                          title="Move to draft"
                        >
                          <.icon name="hero-pause" class="w-4 h-4" />
                        </button>
                      <% end %>
                      <button
                        phx-click="delete_post"
                        phx-value-id={post.uuid}
                        data-confirm="Are you sure you want to delete this post?"
                        class="btn btn-ghost btn-xs text-error"
                        title="Delete post"
                      >
                        <.icon name="hero-trash" class="w-4 h-4" />
                      </button>
                    </div>
                  </.table_default_cell>
                </.table_default_row>
              <% end %>
            <% end %>
          <% end %>
        </.table_default_body>
      </.table_default>
    </div>

    <%!-- Pagination --%>
    <%= if @total_count > @per_page do %>
      <div class="flex justify-center mt-6">
        <div class="btn-group">
          <%= if @page > 1 do %>
            <.link
              patch={Routes.path("/admin/posts?page=#{@page - 1}")}
              class="btn btn-outline"
            >
              « Previous
            </.link>
          <% end %>

          <button class="btn btn-outline btn-active">Page {@page}</button>

          <%= if @total_count > @page * @per_page do %>
            <.link
              patch={Routes.path("/admin/posts?page=#{@page + 1}")}
              class="btn btn-outline"
            >
              Next »
            </.link>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
