'use client';

/** Small admin forms on the venue detail page. Each posts to a server action that re-checks admin access. */
import { Field, Input, Select } from '@/components/ui/Field';
import { fieldError, type ActionResult } from '@/components/host/action-result';
import { FormMessage, SubmitButton, useActionForm } from '@/components/host/client';
import { formatPrice } from '@/components/host/format';

type Action = (prev: ActionResult, formData: FormData) => Promise<ActionResult>;

const VENUE_STATUS_HELP: Record<string, string> = {
  PILOT: 'Pilot — free trial period, full access.',
  ACTIVE: 'Active — paying (or converted) venue.',
  PAUSED: 'Paused — hosts can sign in, always-on stops.',
  CANCELLED: 'Cancelled — hosts are signed out and can’t sign in; always-on stops.',
};

export function VenueStatusForm({ action, venueId, status, version, statuses }: { action: Action; venueId: string; status: string; version: number; statuses: readonly string[] }) {
  const { result, pending, onSubmit } = useActionForm(action);
  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-3">
      <input type="hidden" name="venueId" value={venueId} />
      <input type="hidden" name="expectedVersion" value={version} />
      <div className="flex flex-wrap items-end gap-3">
        <Field label="Venue status" className="min-w-56">
          <Select name="status" defaultValue={status} key={`${status}-${version}`}>
            {statuses.map((s) => (
              <option key={s} value={s}>
                {VENUE_STATUS_HELP[s] ?? s}
              </option>
            ))}
          </Select>
        </Field>
        <SubmitButton pending={pending} variant="secondary">
          Update status
        </SubmitButton>
      </div>
      <FormMessage result={result} />
    </form>
  );
}

/** One select + submit, with fixed hidden fields (lead status and similar). */
export function StatusSelectForm({
  action,
  hidden,
  label,
  value,
  options,
  submitLabel,
}: {
  action: Action;
  hidden: Record<string, string | number>;
  label: string;
  value: string;
  options: readonly { value: string; label: string }[];
  submitLabel: string;
}) {
  const { result, pending, onSubmit } = useActionForm(action);
  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-3">
      {Object.entries(hidden).map(([name, v]) => (
        <input key={name} type="hidden" name={name} value={v} />
      ))}
      <div className="flex flex-wrap items-end gap-3">
        <Field label={label} className="min-w-56">
          <Select name="status" defaultValue={value} key={`${value}-${String(hidden.expectedVersion ?? '')}`}>
            {options.map((o) => (
              <option key={o.value} value={o.value}>
                {o.label}
              </option>
            ))}
          </Select>
        </Field>
        <SubmitButton pending={pending} variant="secondary">
          {submitLabel}
        </SubmitButton>
      </div>
      <FormMessage result={result} />
    </form>
  );
}

export function AddRoomForm({ action, venueId }: { action: Action; venueId: string }) {
  const { result, pending, onSubmit } = useActionForm(action);
  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-3">
      <input type="hidden" name="venueId" value={venueId} />
      <div className="flex flex-wrap items-end gap-3">
        <Field label="New room name" error={fieldError(result, 'name')} className="min-w-56 flex-1">
          <Input name="name" maxLength={60} required placeholder="Patio" key={result.status === 'success' ? result.message : 'room'} />
        </Field>
        <SubmitButton pending={pending} variant="secondary" pendingLabel="Adding…">
          Add room
        </SubmitButton>
      </div>
      <FormMessage result={result} />
    </form>
  );
}

export function AddUserForm({ action, venueId }: { action: Action; venueId: string }) {
  const { result, pending, onSubmit } = useActionForm(action);
  const resetKey = result.status === 'success' ? result.message : 'user';
  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-4">
      <input type="hidden" name="venueId" value={venueId} />
      <div className="grid gap-4 md:grid-cols-[1fr_1fr_10rem_auto] md:items-end">
        <Field label="Name" error={fieldError(result, 'name')}>
          <Input name="name" maxLength={80} required autoComplete="off" key={`n-${resetKey}`} />
        </Field>
        <Field label="Email" error={fieldError(result, 'email')}>
          <Input name="email" type="email" maxLength={254} required autoComplete="off" key={`e-${resetKey}`} />
        </Field>
        <Field label="Role" error={fieldError(result, 'role')}>
          <Select name="role" defaultValue="HOST">
            <option value="HOST">Host</option>
            <option value="OWNER">Owner</option>
          </Select>
        </Field>
        <SubmitButton pending={pending} variant="secondary" pendingLabel="Adding…">
          Add user
        </SubmitButton>
      </div>
      <FormMessage result={result} />
    </form>
  );
}

export function EntitlementForm({
  action,
  venueId,
  entitlement,
  plans,
  statuses,
}: {
  action: Action;
  venueId: string;
  entitlement: { id: string; version: number; planKey: string; status: string; trialEndsAt: string } | null;
  plans: { key: string; name: string; priceCents: number; interval: string }[];
  statuses: readonly string[];
}) {
  const { result, pending, onSubmit } = useActionForm(action);
  const key = entitlement ? `${entitlement.id}-${entitlement.version}` : 'new';
  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-4">
      <input type="hidden" name="venueId" value={venueId} />
      <input type="hidden" name="entitlementId" value={entitlement?.id ?? ''} />
      <input type="hidden" name="expectedVersion" value={entitlement?.version ?? 0} />
      <div className="grid gap-4 md:grid-cols-3" key={key}>
        <Field label="Plan" error={fieldError(result, 'planKey')}>
          <Select name="planKey" defaultValue={entitlement?.planKey ?? plans[0]?.key}>
            {plans.map((p) => (
              <option key={p.key} value={p.key}>
                {p.name} · {formatPrice(p.priceCents, p.interval)}
              </option>
            ))}
          </Select>
        </Field>
        <Field label="Subscription status" error={fieldError(result, 'status')}>
          <Select name="status" defaultValue={entitlement?.status ?? 'TRIALING'}>
            {statuses.map((s) => (
              <option key={s} value={s}>
                {s.replace('_', ' ').toLowerCase()}
              </option>
            ))}
          </Select>
        </Field>
        <Field label="Trial ends" optional error={fieldError(result, 'trialEndsAt')}>
          <Input name="trialEndsAt" type="date" defaultValue={entitlement?.trialEndsAt ?? ''} />
        </Field>
      </div>
      <div>
        <SubmitButton pending={pending} variant="secondary">
          {entitlement ? 'Save entitlement' : 'Create entitlement'}
        </SubmitButton>
      </div>
      <FormMessage result={result} />
    </form>
  );
}