Saved Views

"use client"

import { useState } from "react"
import { readViewParam, writeViewParam } from "@/lib/saved-views"
import { SavedViews, type SavedView } from "@/components/ui/saved-views"

type Filters = { status: string }

const EMPTY: Filters = { status: "all" }

export function IssueViewSwitcher({
  initialViews,
  search,
  onSearchChange,
}: {
  initialViews: SavedView<Filters>[]
  search: string
  onSearchChange: (search: string) => void
}) {
  const [views, setViews] = useState(initialViews)
  const activeId = readViewParam(search, views)
  const activeView = views.find((view) => view.id === activeId)
  const [draft, setDraft] = useState<{ viewId?: string; filters: Filters }>()
  const filters =
    draft && draft.viewId === activeId
      ? draft.filters
      : (activeView?.data ?? EMPTY)

  return (
    <div className="flex flex-col gap-3">
      <SavedViews
        views={views}
        onViewsChange={setViews}
        activeId={activeId}
        onActiveChange={(id) => onSearchChange(writeViewParam(search, id))}
        currentData={filters}
        onReset={() => setDraft(undefined)}
        onSave={(view) =>
          fetch(`/api/views/${view.id}`, {
            method: "PUT",
            body: JSON.stringify(view),
          }).then((res) => {
            if (!res.ok) throw new Error("Save failed")
          })
        }
      />
      <select
        aria-label="Status"
        value={filters.status}
        onChange={(event) =>
          setDraft({ viewId: activeId, filters: { status: event.target.value } })
        }
      >
        <option value="all">All</option>
        <option value="open">Open</option>
        <option value="closed">Closed</option>
      </select>
    </div>
  )
}