'use client';

import { useCallback, useEffect, useState } from 'react';
import { Badge } from '@/components/ui';
import { Markdown } from '@/components/content/Markdown';
import { t } from '@/lib/i18n';
import { formatDate, slugify } from '@/lib/utils';

type PostTag = { tag: { id: string; name: string; slug: string } };
type Post = {
  id: string;
  slug: string;
  title: string;
  excerpt: string;
  body: string;
  status: string;
  featured: boolean;
  readingMinutes: number;
  publishedAt: string | null;
  updatedAt: string;
  author: { id: string; name: string };
  tags: PostTag[];
};
type AuthorOption = { id: string; name: string };
type FormState = {
  id: string | null;
  title: string;
  slug: string;
  slugEdited: boolean;
  excerpt: string;
  body: string;
  status: 'draft' | 'published';
  featured: boolean;
  authorId: string;
  tags: string;
};

const EMPTY = (authorId: string): FormState => ({
  id: null,
  title: '',
  slug: '',
  slugEdited: false,
  excerpt: '',
  body: '',
  status: 'draft',
  featured: false,
  authorId,
  tags: '',
});

export function PostsManager({ authors, tagOptions }: { authors: AuthorOption[]; tagOptions: string[] }) {
  const [items, setItems] = useState<Post[]>([]);
  const [status, setStatus] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [form, setForm] = useState<FormState | null>(null);
  const [showPreview, setShowPreview] = useState(false);
  const [formError, setFormError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(`/api/admin/posts${status ? `?status=${status}` : ''}`);
      if (!res.ok) throw new Error('request failed');
      const data = (await res.json()) as { posts: Post[] };
      setItems(data.posts);
    } catch {
      setError(t('common.error'));
    } finally {
      setLoading(false);
    }
  }, [status]);

  useEffect(() => {
    void load();
  }, [load]);

  function openCreate() {
    setFormError(null);
    setShowPreview(false);
    setForm(EMPTY(authors[0]?.id ?? ''));
  }

  function openEdit(post: Post) {
    setFormError(null);
    setShowPreview(false);
    setForm({
      id: post.id,
      title: post.title,
      slug: post.slug,
      slugEdited: true,
      excerpt: post.excerpt,
      body: post.body,
      status: post.status === 'published' ? 'published' : 'draft',
      featured: post.featured,
      authorId: post.author.id,
      tags: post.tags.map(({ tag }) => tag.name).join(', '),
    });
  }

  function setField<K extends keyof FormState>(key: K, value: FormState[K]) {
    setForm((prev) => (prev ? { ...prev, [key]: value } : prev));
  }

  async function save() {
    if (!form) return;
    setBusy(true);
    setFormError(null);
    const payload = {
      title: form.title,
      slug: form.slug,
      excerpt: form.excerpt,
      body: form.body,
      status: form.status,
      featured: form.featured,
      authorId: form.authorId,
      tags: form.tags
        .split(',')
        .map((s) => s.trim())
        .filter(Boolean),
    };
    const res = await fetch(form.id ? `/api/admin/posts/${form.id}` : '/api/admin/posts', {
      method: form.id ? 'PATCH' : 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    setBusy(false);
    if (!res.ok) {
      setFormError(((await res.json().catch(() => ({}))) as { error?: string }).error || t('common.error'));
      return;
    }
    setForm(null);
    await load();
  }

  async function toggleStatus(post: Post) {
    setBusy(true);
    const next = post.status === 'published' ? 'draft' : 'published';
    await fetch(`/api/admin/posts/${post.id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: post.title,
        slug: post.slug,
        excerpt: post.excerpt,
        body: post.body,
        status: next,
        featured: post.featured,
        authorId: post.author.id,
        tags: post.tags.map(({ tag }) => tag.name),
      }),
    });
    setBusy(false);
    await load();
  }

  async function remove(post: Post) {
    if (!window.confirm(`${t('admin.delete')} “${post.title}”? This cannot be undone.`)) return;
    setBusy(true);
    await fetch(`/api/admin/posts/${post.id}`, { method: 'DELETE' });
    setBusy(false);
    await load();
  }

  const previewBody = form?.body ?? '';
  const suggestedSlug = form ? (form.slugEdited ? form.slug : slugify(form.title)) : '';

  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">{t('admin.posts')}</h1>
          <p className="muted mt-1 text-sm">{items.length} posts</p>
        </div>
        <button type="button" className="btn-primary" onClick={openCreate} disabled={authors.length === 0}>
          {t('admin.newPost')}
        </button>
      </header>

      <div className="card flex flex-wrap items-end gap-3">
        <label className="text-sm">
          {t('admin.status')}
          <select className="input mt-1" value={status} onChange={(e) => setStatus(e.target.value)}>
            <option value="">{t('admin.all')}</option>
            <option value="draft">{t('admin.draft')}</option>
            <option value="published">{t('admin.published')}</option>
          </select>
        </label>
      </div>

      {form && (
        <div className="card space-y-3">
          <div className="flex items-center justify-between">
            <h2 className="text-lg font-semibold">{form.id ? t('admin.editPost') : t('admin.newPost')}</h2>
            <button type="button" className="btn-ghost" onClick={() => setShowPreview((v) => !v)}>
              {showPreview ? t('admin.editPost') : t('admin.livePreview')}
            </button>
          </div>

          {showPreview ? (
            <div className="rounded-xl border p-4" style={{ borderColor: 'var(--border)' }}>
              <h3 className="text-xl font-bold">{form.title || t('admin.untitled')}</h3>
              <p className="muted mt-1 text-xs">{t('admin.previewHint')}</p>
              <Markdown body={previewBody} />
            </div>
          ) : (
            <div className="grid gap-3 sm:grid-cols-2">
              <label className="text-sm sm:col-span-2">
                {t('admin.title')}
                <input
                  className="input mt-1"
                  required
                  value={form.title}
                  onChange={(e) => {
                    const title = e.target.value;
                    setForm((prev) => (prev ? { ...prev, title, slug: prev.slugEdited ? prev.slug : slugify(title) } : prev));
                  }}
                />
              </label>
              <label className="text-sm">
                {t('admin.slug')}
                <input
                  className="input mt-1"
                  value={suggestedSlug}
                  onChange={(e) => setForm((prev) => (prev ? { ...prev, slug: e.target.value, slugEdited: true } : prev))}
                />
              </label>
              <label className="text-sm">
                {t('admin.author')}
                <select className="input mt-1" value={form.authorId} onChange={(e) => setField('authorId', e.target.value)}>
                  {authors.map((a) => (
                    <option key={a.id} value={a.id}>
                      {a.name}
                    </option>
                  ))}
                </select>
              </label>
              <label className="text-sm sm:col-span-2">
                {t('admin.excerpt')}
                <input className="input mt-1" value={form.excerpt} onChange={(e) => setField('excerpt', e.target.value)} />
              </label>
              <label className="text-sm sm:col-span-2">
                {t('admin.tags')}
                <input
                  className="input mt-1"
                  list="tag-options"
                  value={form.tags}
                  onChange={(e) => setField('tags', e.target.value)}
                  placeholder={tagOptions.join(', ')}
                />
                <datalist id="tag-options">
                  {tagOptions.map((tag) => (
                    <option key={tag} value={tag} />
                  ))}
                </datalist>
              </label>
              <label className="text-sm">
                {t('admin.status')}
                <select
                  className="input mt-1"
                  value={form.status}
                  onChange={(e) => setField('status', e.target.value as FormState['status'])}
                >
                  <option value="draft">{t('admin.draft')}</option>
                  <option value="published">{t('admin.published')}</option>
                </select>
              </label>
              <label className="flex items-center gap-2 text-sm">
                <input type="checkbox" checked={form.featured} onChange={(e) => setField('featured', e.target.checked)} />
                {t('admin.featured')}
              </label>
              <label className="text-sm sm:col-span-2">
                {t('admin.body')}
                <textarea
                  className="input mt-1 min-h-64 font-mono"
                  value={form.body}
                  onChange={(e) => setField('body', e.target.value)}
                />
              </label>
            </div>
          )}

          {formError && <p className="text-sm text-red-600">{formError}</p>}
          <div className="flex gap-2">
            <button type="button" className="btn-primary" disabled={busy} onClick={save}>
              {t('admin.save')}
            </button>
            <button type="button" className="btn-secondary" onClick={() => setForm(null)}>
              {t('admin.cancel')}
            </button>
          </div>
        </div>
      )}

      {error && <p className="text-sm text-red-600">{error}</p>}
      {loading ? (
        <p className="muted text-sm">{t('common.loading')}</p>
      ) : items.length === 0 ? (
        <p className="muted py-6 text-center text-sm">{t('admin.empty')}</p>
      ) : (
        <div className="overflow-x-auto rounded-xl border" style={{ borderColor: 'var(--border)' }}>
          <table className="w-full text-sm">
            <thead className="muted text-left text-xs uppercase">
              <tr>
                <th className="px-4 py-3">{t('admin.title')}</th>
                <th className="px-4 py-3">{t('admin.author')}</th>
                <th className="px-4 py-3">{t('admin.tags')}</th>
                <th className="px-4 py-3">{t('admin.status')}</th>
                <th className="px-4 py-3">{t('admin.updated')}</th>
                <th className="px-4 py-3 text-right">{t('admin.actions')}</th>
              </tr>
            </thead>
            <tbody>
              {items.map((post) => (
                <tr key={post.id} className="border-t" style={{ borderColor: 'var(--border)' }}>
                  <td className="px-4 py-3 font-medium">
                    {post.title}
                    {post.featured && <Badge tone="brand">★</Badge>}
                  </td>
                  <td className="px-4 py-3">{post.author.name}</td>
                  <td className="px-4 py-3">{post.tags.map(({ tag }) => tag.name).join(', ') || t('admin.none')}</td>
                  <td className="px-4 py-3">
                    <Badge tone={post.status === 'published' ? 'success' : 'warning'}>
                      {post.status === 'published' ? t('admin.published') : t('admin.draft')}
                    </Badge>
                  </td>
                  <td className="px-4 py-3">{formatDate(post.updatedAt)}</td>
                  <td className="px-4 py-3">
                    <div className="flex justify-end gap-2">
                      <button type="button" className="btn-secondary" onClick={() => openEdit(post)}>
                        {t('admin.edit')}
                      </button>
                      <button type="button" className="btn-secondary" disabled={busy} onClick={() => toggleStatus(post)}>
                        {post.status === 'published' ? t('admin.unpublish') : t('admin.publish')}
                      </button>
                      <button type="button" className="btn-danger" disabled={busy} onClick={() => remove(post)}>
                        {t('admin.delete')}
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}