"use client"

import * as React from "react"

import {
  InlineInputEdit,
  InlineSelectEdit,
} from "@exxatdesignux/ui/components/ui/inline-edit"
import {
  InlineInputCell,
  InlineSelectCell,
} from "@exxatdesignux/ui/components/data-views/table-cells"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const STATUS_OPTIONS = [
  { value: "draft", label: "Draft" },
  { value: "review", label: "In review" },
  { value: "published", label: "Published" },
] as const

export function InlineEditPreview() {
  const [title, setTitle] = React.useState("Cardiopulmonary assessment")
  const [status, setStatus] = React.useState("review")

  return (
    <div className="flex w-full max-w-xl flex-col gap-5">
      <div className="grid grid-cols-[7rem_minmax(0,1fr)] items-center gap-3">
        <span className="text-sm font-medium text-foreground">Title</span>
        <InlineInputEdit
          value={title}
          label="Title"
          onCommit={setTitle}
          shellClassName="w-full"
          displayClassName="w-full"
        />
        <span className="text-sm font-medium text-foreground">Status</span>
        <InlineSelectEdit
          value={status}
          label="Status"
          options={STATUS_OPTIONS}
          onCommit={setStatus}
        />
      </div>
      <p className="text-sm text-muted-foreground">
        Enter saves a text draft. Escape cancels. Select changes require Save.
      </p>
    </div>
  )
}

interface EditableRow {
  id: string
  activity: string
  status: string
}

const INITIAL_ROWS: EditableRow[] = [
  { id: "ACT-1042", activity: "Clinical skills check", status: "draft" },
  { id: "ACT-1043", activity: "Site readiness review", status: "review" },
]

export function TableInlineEditPreview() {
  const [rows, setRows] = React.useState(INITIAL_ROWS)

  function updateRow(id: string, patch: Partial<EditableRow>) {
    setRows((current) =>
      current.map((row) => (row.id === id ? { ...row, ...patch } : row))
    )
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-32">ID</TableHead>
          <TableHead>Activity</TableHead>
          <TableHead className="w-52">Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.id}>
            <TableCell className="font-mono tabular-nums">{row.id}</TableCell>
            <TableCell>
              <InlineInputCell
                value={row.activity}
                label={`Activity for ${row.id}`}
                onCommit={(activity) => updateRow(row.id, { activity })}
              />
            </TableCell>
            <TableCell>
              <InlineSelectCell
                value={row.status}
                label={`Status for ${row.id}`}
                options={STATUS_OPTIONS}
                onCommit={(status) => updateRow(row.id, { status })}
              />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}