import type { Meta, StoryObj } from "@storybook/vue3-vite";
import { ref } from "vue";
import { Network } from "lucide-vue-next";
import MasterDetail from "./MasterDetail.vue";
import ListRow from "./ListRow.vue";
import FilterInput from "./FilterInput.vue";
import KindBadge from "./KindBadge.vue";

const meta: Meta<typeof MasterDetail> = {
  title: "Components/MasterDetail",
  component: MasterDetail,
  tags: ["autodocs"],
  parameters: { layout: "fullscreen" },
};
export default meta;

type Story = StoryObj<typeof MasterDetail>;

const sample = [
  { id: "1", name: "moderation.SubmitPost", status: "active", summary: "Marta submits a post" },
  { id: "2", name: "moderation.ClaimForReview", status: "active", summary: "Dina claims a post" },
  {
    id: "3",
    name: "moderation.ApprovePost",
    status: "deprecated",
    summary: "Dina approves a post",
  },
  { id: "4", name: "moderation.RejectPost", status: "sunset", summary: "Dina rejects a post" },
];

export const ResolversExample: Story = {
  render: () => ({
    components: { MasterDetail, ListRow, FilterInput, KindBadge, Network },
    setup() {
      const filter = ref("");
      const selected = ref<string | null>("1");
      const detail = () => sample.find((s) => s.id === selected.value);
      return { filter, selected, sample, detail, Network };
    },
    template: `
      <div style="height: 80vh" class="border border-zinc-800 rounded">
        <MasterDetail>
          <template #listHeader>
            <FilterInput v-model="filter" placeholder="filter…" />
          </template>
          <template #list>
            <ListRow
              v-for="s in sample"
              :key="s.id"
              :selected="selected === s.id"
              @click="selected = s.id"
            >
              <template #title>
                <Network class="w-3 h-3 text-rose-400 shrink-0" />
                <span class="font-mono text-sm truncate">{{ s.name }}</span>
              </template>
              <template #meta>
                <KindBadge :variant="s.status">{{ s.status }}</KindBadge>
              </template>
              <template #description>{{ s.summary }}</template>
            </ListRow>
          </template>
          <template v-if="detail()" #detail>
            <div class="p-6">
              <h2 class="font-mono text-xl">{{ detail()?.name }}</h2>
              <p class="text-sm text-zinc-400 mt-2">{{ detail()?.summary }}</p>
            </div>
          </template>
          <template #empty>Select an item.</template>
        </MasterDetail>
      </div>
    `,
  }),
};