'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  RiArrowLeftLine,
  RiFileTextLine,
  RiLayoutLine,
  RiQuestionLine,
  RiEyeLine,
} from '@remixicon/react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Spinner } from '@/components/ui/spinners';
import { useBlog } from '../hooks';
import BlogForm from './BlogForm';
import BlogContentManager from './BlogContentManager';
import BlogFaqManager from './BlogFaqManager';
import BlogPreview from './BlogPreview';

interface Props {
  blogId: number;
}

type TabKey = 'details' | 'content' | 'faqs' | 'preview';

export default function BlogEditPage({ blogId }: Props) {
  const router = useRouter();
  const { data: blog, isLoading } = useBlog(blogId);
  const [activeTab, setActiveTab] = useState<TabKey>('details');

  const tabs: { key: TabKey; label: string; icon: React.ReactNode }[] = [
    { key: 'details', label: 'Blog Details', icon: <RiFileTextLine className="size-4" /> },
    { key: 'content', label: 'Content Sections', icon: <RiLayoutLine className="size-4" /> },
    { key: 'faqs', label: 'FAQs', icon: <RiQuestionLine className="size-4" /> },
    { key: 'preview', label: 'Preview', icon: <RiEyeLine className="size-4" /> },
  ];

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-20 text-muted-foreground gap-2">
        <Spinner className="size-5 animate-spin" /> Loading blog...
      </div>
    );
  }

  if (!blog) {
    return (
      <Card>
        <CardContent className="py-12 text-center">
          <p className="font-medium">Blog not found</p>
          <Button variant="outline" size="sm" className="mt-4" onClick={() => router.push('/blogs')}>
            <RiArrowLeftLine className="size-4 mr-1" />
            Back to Blogs
          </Button>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <Button type="button" variant="ghost" size="sm" onClick={() => router.push('/blogs')}>
          <RiArrowLeftLine className="size-4 mr-1" />
          Back
        </Button>
        <div>
          <h1 className="text-xl font-semibold">{blog.title}</h1>
          {blog.created_by && (
            <p className="text-sm text-muted-foreground">
              Created by {(() => {
                const cb = blog.created_by as unknown as Record<string, unknown>;
                const user = cb?.user as Record<string, unknown> | undefined;
                return user?.user_name ? String(user.user_name) : '-';
              })()}
            </p>
          )}
        </div>
      </div>

      <div className="flex gap-1 border-b">
        {tabs.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
              activeTab === tab.key
                ? 'border-primary text-primary'
                : 'border-transparent text-muted-foreground hover:text-foreground'
            }`}
          >
            {tab.icon}
            {tab.label}
          </button>
        ))}
      </div>

      {activeTab === 'details' && <BlogForm blogId={blogId} />}
      {activeTab === 'content' && <BlogContentManager blogId={blogId} />}
      {activeTab === 'faqs' && <BlogFaqManager blogId={blogId} />}
      {activeTab === 'preview' && <BlogPreview blogId={blogId} />}
    </div>
  );
}