'use client';

import { useCallback, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import {
  RiAddLine,
  RiSearchLine,
  RiPriceTag3Line,
  RiCheckboxCircleLine,
  RiMoneyDollarCircleLine,
} from '@remixicon/react';
import { Package, Pagination } from '@/network/apis/dashboard/packages/type';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Card,
  CardContent,
} from '@/components/ui/card';
import { Container } from '@/components/common/container';
import { Packages } from './packagesList/packagesList';
import PaginationComponent from './paginationComponent/paginationComponent';

const PackagesContainer = ({
  packages,
  pagination,
}: {
  packages: Package[];
  pagination: Pagination;
}) => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const currentPage =
    Number(searchParams?.get('page')) || pagination?.current_page || 1;
  const [search, setSearch] = useState('');

  const handlePageChange = useCallback(
    (page: number) => {
      const params = new URLSearchParams(searchParams?.toString());
      params.set('page', page.toString());
      router.push(`?${params.toString()}`);
    },
    [router, searchParams],
  );

  const filtered = search
    ? packages.filter(
        (p) =>
          p.name?.toLowerCase().includes(search.toLowerCase()) ||
          p.description?.toLowerCase().includes(search.toLowerCase()),
      )
    : packages;

  const activeCount = packages.filter((p) => p.is_active).length;
  const totalRevenue = packages.reduce((sum, p) => sum + (p.price ?? 0), 0);

  return (
    <>
      <Container>
        <div className="space-y-6">
          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div>
              <h1 className="text-2xl font-bold tracking-tight">Packages</h1>
              <p className="text-sm text-muted-foreground mt-1">
                Manage subscription packages, pricing, and platform configurations
              </p>
            </div>
            <Button onClick={() => router.push('/packages/add')}>
              <RiAddLine className="size-4 mr-1.5" />
              Create Package
            </Button>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <Card>
              <CardContent className="py-4 flex items-center gap-3">
                <div className="size-10 rounded-lg bg-blue-50 dark:bg-blue-950/30 flex items-center justify-center">
                  <RiPriceTag3Line className="size-5 text-blue-500" />
                </div>
                <div>
                  <div className="text-2xl font-bold">{packages.length}</div>
                  <div className="text-xs text-muted-foreground">Total Packages</div>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="py-4 flex items-center gap-3">
                <div className="size-10 rounded-lg bg-green-50 dark:bg-green-950/30 flex items-center justify-center">
                  <RiCheckboxCircleLine className="size-5 text-green-500" />
                </div>
                <div>
                  <div className="text-2xl font-bold">{activeCount}</div>
                  <div className="text-xs text-muted-foreground">Active Packages</div>
                </div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="py-4 flex items-center gap-3">
                <div className="size-10 rounded-lg bg-purple-50 dark:bg-purple-950/30 flex items-center justify-center">
                  <RiMoneyDollarCircleLine className="size-5 text-purple-500" />
                </div>
                <div>
                  <div className="text-2xl font-bold">${totalRevenue.toLocaleString()}</div>
                  <div className="text-xs text-muted-foreground">Combined Price</div>
                </div>
              </CardContent>
            </Card>
          </div>

          <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 packages..."
              className="pl-9"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>

          <Packages packages={filtered} />

          {pagination && pagination.last_page > 1 && !search && (
            <div className="flex justify-center mt-6">
              <PaginationComponent
                currentPage={currentPage}
                totalPages={pagination?.last_page ?? 1}
                onPageChange={handlePageChange}
              />
            </div>
          )}
        </div>
      </Container>
    </>
  );
};

export default PackagesContainer;