'use client'

import { useActionState, useState } from 'react'
import { channelText } from '@/lib/i18n/chat'
import { clearanceText, commonText } from '@/lib/i18n/common'
import { createChannelAction, type ActionResult } from './actions'

export function NewChannelForm({ levels }: { levels: { level: number; name: string }[] }) {
  const [offen, setOffen] = useState(false)
  const [state, action, pending] = useActionState<ActionResult | null, FormData>(
    createChannelAction,
    null,
  )

  if (!offen) {
    return (
      <button
        type="button"
        onClick={() => setOffen(true)}
        className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
      >
        {channelText.create}
      </button>
    )
  }

  return (
    <form action={action} className="max-w-(--container-measure) border border-line p-4">
      <p className="font-condensed text-xs text-text-dim">{channelText.createTitle}</p>

      <div className="mt-3 grid gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="name" className="font-condensed text-2xs text-text-dim">
            {channelText.name}
          </label>
          <input
            id="name"
            name="name"
            required
            minLength={2}
            maxLength={120}
            className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
          />
        </div>

        <div>
          <label htmlFor="key" className="font-condensed text-2xs text-text-dim">
            {channelText.key}
          </label>
          <input
            id="key"
            name="key"
            required
            pattern="[a-z0-9][a-z0-9-]{1,40}"
            className="mt-1 block w-full border border-line bg-raised px-3 py-2 font-mono text-sm"
          />
          <p className="mt-1 text-2xs text-text-dim">{channelText.keyHint}</p>
        </div>

        <div className="sm:col-span-2">
          <label htmlFor="description" className="font-condensed text-2xs text-text-dim">
            {channelText.description}
          </label>
          <input
            id="description"
            name="description"
            maxLength={500}
            className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
          />
        </div>

        <div>
          <label htmlFor="minClearance" className="font-condensed text-2xs text-text-dim">
            {channelText.minClearance}
          </label>
          <select
            id="minClearance"
            name="minClearance"
            defaultValue={0}
            className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
          >
            {levels.map((level) => (
              <option key={level.level} value={level.level}>
                {level.level} · {level.name}
              </option>
            ))}
          </select>
          <p className="mt-1 text-2xs text-text-dim">
            {channelText.minClearanceHint} {clearanceText.label}
          </p>
        </div>
      </div>

      {state && !state.ok ? (
        <p className="mt-3 font-condensed text-2xs text-stamp-4">{state.error}</p>
      ) : null}

      <div className="mt-4 flex gap-3">
        <button
          type="submit"
          disabled={pending}
          className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
        >
          {pending ? commonText.loading : channelText.create}
        </button>
        <button
          type="button"
          onClick={() => setOffen(false)}
          className="font-condensed text-2xs text-text-dim"
        >
          {commonText.cancel}
        </button>
      </div>
    </form>
  )
}