'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import {
  RiAddLine,
  RiEditLine,
  RiDeleteBinLine,
  RiEyeLine,
  RiMore2Line,
  RiSearchLine,
} from '@remixicon/react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardHeader,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Spinner } from '@/components/ui/spinners';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import { useBlogs, useDeleteBlog } from '../hooks';
import type { Blog } from '../types';

export default function BlogList() {
  const router = useRouter();
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [deleteTarget, setDeleteTarget] = useState<Blog | null>(null);

  const { data, isLoading, isFetching } = useBlogs({ page, per_page: 15, search: search || undefined });
  const deleteMutation = useDeleteBlog();

  const blogs = data?.data ?? [];
  const lastPage = data?.last_page ?? 1;
  const total = data?.total ?? 0;

  const handleDelete = () => {
    if (!deleteTarget) return;
    deleteMutation.mutate(deleteTarget.id, {
      onSuccess: () => {
        toast.success('Blog deleted successfully');
        setDeleteTarget(null);
      },
      onError: () => toast.error('Failed to delete blog'),
    });
  };

  const formatDate = (d: string | null) => {
    if (!d) return '-';
    return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
  };

  return (
    <>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between gap-4 space-y-0 pb-4">
          <div>
            <h2 className="text-xl font-semibold">Blog Management</h2>
            <p className="text-sm text-muted-foreground mt-1">{total} blog{total !== 1 ? 's' : ''} total</p>
          </div>
          <Button size="sm" onClick={() => router.push('/blogs/create')}>
            <RiAddLine className="size-4 mr-1.5" />
            New Blog
          </Button>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="relative max-w-sm">
            <RiSearchLine className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
            <Input
              placeholder="Search blogs..."
              className="pl-9"
              value={search}
              onChange={(e) => {
                setSearch(e.target.value);
                setPage(1);
              }}
            />
          </div>

          <div className="border rounded-lg overflow-hidden">
            <Table>
              <TableHeader>
                <TableRow className="bg-muted/50">
                  <TableHead className="w-12 h-10 font-semibold">ID</TableHead>
                  <TableHead className="w-16 h-10 font-semibold">Image</TableHead>
                  <TableHead className="min-w-[200px] h-10 font-semibold">Title</TableHead>
                  <TableHead className="min-w-[120px] h-10 font-semibold">Created By</TableHead>
                  <TableHead className="min-w-[100px] h-10 font-semibold">Created</TableHead>
                  <TableHead className="min-w-[80px] h-10 font-semibold">Sections</TableHead>
                  <TableHead className="w-20 h-10 font-semibold text-center">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isLoading ? (
                  <TableRow>
                    <TableCell colSpan={7} className="text-center py-12">
                      <div className="flex items-center justify-center gap-2 text-muted-foreground">
                        <Spinner className="size-4 animate-spin" />
                        Loading blogs...
                      </div>
                    </TableCell>
                  </TableRow>
                ) : blogs.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={7} className="text-center py-12 text-muted-foreground">
                      <p className="font-medium">No blogs found</p>
                      <p className="text-sm mt-1">Create your first blog post to get started.</p>
                    </TableCell>
                  </TableRow>
                ) : (
                  blogs.map((blog) => {
                    let imgSrc = '';
                    if (blog.image && typeof blog.image === 'string') {
                      if (blog.image.startsWith('http')) {
                        imgSrc = blog.image;
                      } else if (blog.image.includes('/')) {
                        imgSrc = `https://sanad.work/${blog.image.replace(/^\//, '')}`;
                      } else {
                        imgSrc = `https://sanad.work/production/storage/blogs/attachments/${blog.image}`;
                      }
                    }
                    return (
                    <TableRow
                      key={blog.id}
                      className="cursor-pointer hover:bg-muted/30"
                      onClick={() => router.push(`/blogs/${blog.id}/edit`)}
                    >
                      <TableCell className="text-sm font-mono text-muted-foreground">{blog.id}</TableCell>
                      <TableCell>
                        {imgSrc ? (
                          <img src={imgSrc} alt="" className="w-10 h-10 rounded object-cover" />
                        ) : (
                          <div className="w-10 h-10 rounded bg-muted flex items-center justify-center text-xs text-muted-foreground">—</div>
                        )}
                      </TableCell>
                      <TableCell className="text-sm font-medium">
                        {typeof blog.title === 'object' && blog.title !== null
                          ? ((blog.title as unknown as Record<string, string>).en ?? JSON.stringify(blog.title))
                          : blog.title}
                      </TableCell>
                      <TableCell className="text-sm">
                        {blog.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 as string) ?? (cb?.name as string) ?? '-';
                            })()
                          : '-'}
                      </TableCell>
                      <TableCell className="text-sm text-muted-foreground">{formatDate(blog.created_at)}</TableCell>
                      <TableCell className="text-sm text-muted-foreground">
                        {((blog as unknown as Record<string, unknown>).blog_contents as unknown[] | undefined)?.length ?? 0}
                      </TableCell>
                      <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="sm" className="size-8 p-0">
                              <RiMore2Line className="size-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end" className="w-40">
                            <DropdownMenuItem onClick={() => router.push(`/blogs/${blog.id}/edit`)}>
                              <RiEditLine className="size-4 mr-2" />
                              Edit
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => router.push(`/blogs/${blog.id}/preview`)}>
                              <RiEyeLine className="size-4 mr-2" />
                              Preview
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem
                              className="text-destructive focus:text-destructive"
                              onClick={() => setDeleteTarget(blog)}
                            >
                              <RiDeleteBinLine className="size-4 mr-2" />
                              Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>
                    );
                  })
                )}
              </TableBody>
            </Table>
          </div>

          {lastPage > 1 && (
            <div className="flex items-center justify-between pt-2">
              <p className="text-sm text-muted-foreground">
                Page {page} of {lastPage}
              </p>
              <div className="flex gap-2">
                <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
                  Previous
                </Button>
                <Button variant="outline" size="sm" disabled={page >= lastPage} onClick={() => setPage((p) => p + 1)}>
                  Next
                </Button>
              </div>
            </div>
          )}

          {isFetching && !isLoading && (
            <div className="flex items-center gap-2 text-xs text-muted-foreground">
              <Spinner className="size-3 animate-spin" /> Refreshing...
            </div>
          )}
        </CardContent>
      </Card>

      <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Delete Blog</DialogTitle>
          </DialogHeader>
          <p className="text-sm text-muted-foreground py-2">
            Are you sure you want to delete <strong>{deleteTarget?.title}</strong>? This action cannot be undone and will also remove all associated content and FAQs.
          </p>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button variant="outline" size="sm" onClick={() => setDeleteTarget(null)}>
              Cancel
            </Button>
            <Button
              variant="destructive"
              size="sm"
              onClick={handleDelete}
              disabled={deleteMutation.isPending}
            >
              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}