gruperly/apps/web/src/routes/organizations.tsx

import { useState } from 'react'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { Building2, Check, Loader2, Plus } from 'lucide-react'
import { authClient } from '../lib/auth-client'
import { Badge, Button, Input, Label } from '../components/ui'

const createOrgSchema = z.object({
  name: z.string().min(2, 'Ingresá el nombre del grupo'),
  slug: z
    .string()
    .min(2, 'Mínimo 2 caracteres')
    .regex(/^[a-z0-9-]+$/, 'Solo minúsculas, números y guiones'),
})

type CreateOrgValues = z.infer<typeof createOrgSchema>

const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:4000'

type OrganizationRow = {
  id: string
  name: string
  slug: string
  logo: string | null
}

function OrganizationList({ onRefresh }: { onRefresh: () => void }) {
  const { data, isPending } = authClient.useListOrganizations()
  const [syncing, setSyncing] = useState<string | null>(null)
  const [activeId, setActiveId] = useState<string | null>(null)

  const organizations = (data ?? []) as OrganizationRow[]

  const handleSyncGroup = async (org: OrganizationRow) => {
    setSyncing(org.id)
    try {
      const res = await fetch(`${API_URL}/api/v1/groups/from-organization`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ organizationId: org.id }),
      })
      const body = (await res.json()) as { message?: string }
      if (!res.ok) {
        onRefresh()
        setSyncing(null)
        return
      }
      void body
    } finally {
      setSyncing(null)
    }
    onRefresh()
  }

  const handleSetActive = async (organizationId: string) => {
    setActiveId(organizationId)
    await authClient.organization.setActive({ organizationId })
    setActiveId(null)
  }

  if (isPending) {
    return <Loader2 className="size-5 animate-spin text-foreground/40" />
  }

  if (organizations.length === 0) {
    return <p className="text-sm text-foreground/60">Todavía no pertenecés a ningún grupo.</p>
  }

  return (
    <ul className="divide-y divide-border rounded-xl border border-border bg-white">
      {organizations.map((org) => (
        <li key={org.id} className="flex flex-wrap items-center gap-3 px-4 py-3">
          <span className="rounded-lg bg-accent-soft p-2">
            <Building2 className="size-4 text-accent" />
          </span>
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium text-primary">{org.name}</p>
            <p className="text-xs text-foreground/50">/{org.slug}</p>
          </div>
          <Button
            variant="outline"
            size="sm"
            disabled={syncing === org.id}
            onClick={() => handleSyncGroup(org)}
          >
            {syncing === org.id ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
            Sincronizar grupo
          </Button>
          <Button
            variant="ghost"
            size="sm"
            disabled={activeId === org.id}
            onClick={() => handleSetActive(org.id)}
          >
            {activeId === org.id ? (
              <Loader2 className="size-4 animate-spin" />
            ) : (
              <Check className="size-4" />
            )}
            <span className="hidden sm:inline">Usar</span>
          </Button>
          <Badge>Owner</Badge>
        </li>
      ))}
    </ul>
  )
}

export function OrganizationsPage() {
  const [refreshKey, setRefreshKey] = useState(0)
  const [feedback, setFeedback] = useState<string | null>(null)

  const {
    register,
    handleSubmit,
    reset,
    setError,
    formState: { errors, isSubmitting },
  } = useForm<CreateOrgValues>({ resolver: zodResolver(createOrgSchema) })

  const refreshOrganizations = () => setRefreshKey((k) => k + 1)

  const onCreateOrg = handleSubmit(async ({ name, slug }) => {
    setFeedback(null)
    const { error, data } = await authClient.organization.create({ name, slug })
    if (error) {
      setError('root', { message: error.message ?? 'No se pudo crear el grupo' })
      return
    }
    reset({ name: '', slug: '' })
    setFeedback('Grupo creado. Sincronizalo con el cobro grupal.')
    refreshOrganizations()
    void data
  })

  return (
    <section className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-primary">Grupos</h1>
        <p className="mt-1 text-sm text-foreground/60">
          Creá un grupo para organizar tus cobros. Cada organización se vincula a un grupo.
        </p>
      </div>

      {feedback ? (
        <p className="rounded-xl bg-success-soft px-4 py-3 text-sm text-success">{feedback}</p>
      ) : null}

      <div className="rounded-xl border border-border bg-white p-5">
        <div className="mb-4 flex items-center gap-2">
          <Plus className="size-4 text-accent" />
          <h2 className="text-base font-semibold text-primary">Crear grupo</h2>
        </div>
        <form onSubmit={onCreateOrg} className="space-y-4">
          <div>
            <Label htmlFor="name">Nombre</Label>
            <Input
              id="name"
              placeholder="Gimnasio, club, kermés…"
              invalid={!!errors.name}
              {...register('name')}
            />
            {errors.name ? <p className="mt-1 text-sm text-danger">{errors.name.message}</p> : null}
          </div>
          <div>
            <Label htmlFor="slug">Slug</Label>
            <Input
              id="slug"
              placeholder="gimnasio-don-bosco"
              invalid={!!errors.slug}
              {...register('slug')}
            />
            {errors.slug ? <p className="mt-1 text-sm text-danger">{errors.slug.message}</p> : null}
          </div>
          {errors.root ? <p className="text-sm text-danger">{errors.root.message}</p> : null}
          <Button type="submit" variant="primary" disabled={isSubmitting}>
            {isSubmitting ? <Loader2 className="size-4 animate-spin" /> : null}
            Crear grupo
          </Button>
        </form>
      </div>

      <div className="rounded-xl border border-border bg-white p-5">
        <h2 className="mb-4 text-base font-semibold text-primary">Tus grupos</h2>
        <OrganizationList key={refreshKey} onRefresh={refreshOrganizations} />
      </div>
    </section>
  )
}