'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import AdminShell from '../../ui/AdminShell'
import { authFetch, clearToken, getApiBase, getToken } from '../../lib/auth'

type Profile = {
  id: number
  name: string
  description?: string | null
  role: 'user' | 'admin'
  auto_search_enabled: boolean
  account_expires_days?: number | null
  is_active: boolean
  assigned_users?: number
  assigned_invites?: number
}

type ProfileForm = {
  name: string
  description: string
  role: 'user' | 'admin'
  auto_search_enabled: boolean
  account_expires_days: string
  is_active: boolean
}

const defaultForm = (): ProfileForm => ({
  name: '',
  description: '',
  role: 'user',
  auto_search_enabled: true,
  account_expires_days: '',
  is_active: true,
})

export default function AdminProfilesPage() {
  const router = useRouter()
  const [profiles, setProfiles] = useState<Profile[]>([])
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [status, setStatus] = useState<string | null>(null)
  const [editingId, setEditingId] = useState<number | null>(null)
  const [form, setForm] = useState<ProfileForm>(defaultForm())

  const handleAuthResponse = (response: Response) => {
    if (response.status === 401) {
      clearToken()
      router.push('/login')
      return true
    }
    if (response.status === 403) {
      router.push('/')
      return true
    }
    return false
  }

  const loadProfiles = async () => {
    if (!getToken()) {
      router.push('/login')
      return
    }
    setLoading(true)
    setError(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/profiles`)
      if (!response.ok) {
        if (handleAuthResponse(response)) return
        throw new Error(`Failed to load profiles (${response.status})`)
      }
      const data = await response.json()
      setProfiles(Array.isArray(data?.profiles) ? data.profiles : [])
    } catch (err) {
      console.error(err)
      setError('Could not load profiles.')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    void loadProfiles()
  }, [])

  const resetEditor = () => {
    setEditingId(null)
    setForm(defaultForm())
  }

  const editProfile = (profile: Profile) => {
    setEditingId(profile.id)
    setForm({
      name: profile.name ?? '',
      description: profile.description ?? '',
      role: profile.role ?? 'user',
      auto_search_enabled: Boolean(profile.auto_search_enabled),
      account_expires_days:
        typeof profile.account_expires_days === 'number' ? String(profile.account_expires_days) : '',
      is_active: profile.is_active !== false,
    })
    setStatus(null)
    setError(null)
  }

  const saveProfile = async (event: React.FormEvent) => {
    event.preventDefault()
    setSaving(true)
    setError(null)
    setStatus(null)
    try {
      const baseUrl = getApiBase()
      const payload = {
        name: form.name,
        description: form.description || null,
        role: form.role,
        auto_search_enabled: form.auto_search_enabled,
        account_expires_days: form.account_expires_days || null,
        is_active: form.is_active,
      }
      const url =
        editingId == null
          ? `${baseUrl}/admin/profiles`
          : `${baseUrl}/admin/profiles/${editingId}`
      const response = await authFetch(url, {
        method: editingId == null ? 'POST' : 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      })
      if (!response.ok) {
        if (handleAuthResponse(response)) return
        const text = await response.text()
        throw new Error(text || 'Save failed')
      }
      setStatus(editingId == null ? 'Profile created.' : 'Profile updated.')
      resetEditor()
      await loadProfiles()
    } catch (err) {
      console.error(err)
      setError(err instanceof Error ? err.message : 'Could not save profile.')
    } finally {
      setSaving(false)
    }
  }

  const deleteProfile = async (profile: Profile) => {
    if (!window.confirm(`Delete profile "${profile.name}"?`)) return
    setError(null)
    setStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await authFetch(`${baseUrl}/admin/profiles/${profile.id}`, {
        method: 'DELETE',
      })
      if (!response.ok) {
        if (handleAuthResponse(response)) return
        const text = await response.text()
        throw new Error(text || 'Delete failed')
      }
      if (editingId === profile.id) resetEditor()
      setStatus(`Deleted profile "${profile.name}".`)
      await loadProfiles()
    } catch (err) {
      console.error(err)
      setError(err instanceof Error ? err.message : 'Could not delete profile.')
    }
  }

  return (
    <AdminShell
      title="Profiles"
      subtitle="Reusable account templates for invite-based sign-up."
      actions={
        <div className="admin-inline-actions">
          <button type="button" onClick={loadProfiles} disabled={loading}>
            {loading ? 'Loading…' : 'Reload'}
          </button>
          <button type="button" className="ghost-button" onClick={resetEditor}>
            New profile
          </button>
        </div>
      }
    >
      <section className="admin-section">
        {error && <div className="error-banner">{error}</div>}
        {status && <div className="status-banner">{status}</div>}
        <div className="admin-split-grid">
          <div className="admin-panel">
            <h2>{editingId == null ? 'Create profile' : 'Edit profile'}</h2>
            <p className="lede">
              Profiles define defaults applied when a user signs up using an invite.
            </p>
            <form onSubmit={saveProfile} className="admin-form compact-form">
              <label>
                Profile name
                <input
                  value={form.name}
                  onChange={(e) => setForm((current) => ({ ...current, name: e.target.value }))}
                  placeholder="Standard users"
                  required
                />
              </label>
              <label>
                Description
                <textarea
                  rows={3}
                  value={form.description}
                  onChange={(e) =>
                    setForm((current) => ({ ...current, description: e.target.value }))
                  }
                  placeholder="Default invite settings for normal users"
                />
              </label>
              <div className="admin-fields-grid">
                <label>
                  Role
                  <select
                    value={form.role}
                    onChange={(e) =>
                      setForm((current) => ({
                        ...current,
                        role: e.target.value as 'user' | 'admin',
                      }))
                    }
                  >
                    <option value="user">User</option>
                    <option value="admin">Admin</option>
                  </select>
                </label>
                <label>
                  Account expiry (days)
                  <input
                    value={form.account_expires_days}
                    onChange={(e) =>
                      setForm((current) => ({
                        ...current,
                        account_expires_days: e.target.value,
                      }))
                    }
                    inputMode="numeric"
                    placeholder="Blank = no expiry"
                  />
                </label>
              </div>
              <label className="inline-checkbox">
                <input
                  type="checkbox"
                  checked={form.auto_search_enabled}
                  onChange={(e) =>
                    setForm((current) => ({
                      ...current,
                      auto_search_enabled: e.target.checked,
                    }))
                  }
                />
                Allow auto search/download by default
              </label>
              <label className="inline-checkbox">
                <input
                  type="checkbox"
                  checked={form.is_active}
                  onChange={(e) =>
                    setForm((current) => ({ ...current, is_active: e.target.checked }))
                  }
                />
                Profile is active
              </label>
              <div className="admin-inline-actions">
                <button type="submit" disabled={saving}>
                  {saving ? 'Saving…' : editingId == null ? 'Create profile' : 'Save profile'}
                </button>
                {editingId != null && (
                  <button type="button" className="ghost-button" onClick={resetEditor}>
                    Cancel edit
                  </button>
                )}
              </div>
            </form>
          </div>
          <div className="admin-panel">
            <h2>Existing profiles</h2>
            <p className="lede">Assign these to invites so sign-up accounts get consistent defaults.</p>
            {loading ? (
              <div className="status-banner">Loading profiles…</div>
            ) : profiles.length === 0 ? (
              <div className="status-banner">No profiles created yet.</div>
            ) : (
              <div className="admin-list">
                {profiles.map((profile) => (
                  <div key={profile.id} className="admin-list-item">
                    <div className="admin-list-item-main">
                      <div className="admin-list-item-title-row">
                        <strong>{profile.name}</strong>
                        <span className={`small-pill ${profile.is_active ? '' : 'is-muted'}`}>
                          {profile.is_active ? 'Active' : 'Disabled'}
                        </span>
                        <span className="small-pill">{profile.role}</span>
                      </div>
                      {profile.description && (
                        <p className="admin-list-item-text">{profile.description}</p>
                      )}
                      <div className="admin-meta-row">
                        <span>Auto search: {profile.auto_search_enabled ? 'On' : 'Off'}</span>
                        <span>
                          Account expiry:{' '}
                          {typeof profile.account_expires_days === 'number'
                            ? `${profile.account_expires_days} days`
                            : 'Never'}
                        </span>
                        <span>Users: {profile.assigned_users ?? 0}</span>
                        <span>Invites: {profile.assigned_invites ?? 0}</span>
                      </div>
                    </div>
                    <div className="admin-inline-actions">
                      <button type="button" className="ghost-button" onClick={() => editProfile(profile)}>
                        Edit
                      </button>
                      <button type="button" onClick={() => deleteProfile(profile)}>
                        Delete
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </section>
    </AdminShell>
  )
}