"use client";



import { Suspense, useState } from "react";

import { FilterToolbar } from "@/components/design-system/filter-toolbar";

import { PageLayout } from "@/components/design-system/page-layout";

import { FilterSelect } from "@/components/ui/filter-select";

import { ListPagination } from "@/components/ui/list-pagination";

import { Button } from "@/components/ui/button";

import {

  DataTable,

  DataTableCell,

  DataTableEmpty,

  DataTableHead,

  DataTableLoading,

  DataTableRow,

} from "@/components/ui/data-table";

import { PriorityBadge } from "@/lib/status-badges";

import { useInstantList } from "@/hooks/use-instant-list";

import { useLocale } from "@/components/providers/locale-provider";

import { cn } from "@/lib/utils";



interface TaskRow {

  _id: string;

  title: string;

  status: string;

  priority: string;

  dueDate?: string;

  assignedTo?: { name?: string };

  relatedEntityType?: string;

  relatedEntityId?: string;

}



const DEFAULT_FILTERS = { status: "open", priority: "" };



function TasksListInner({

  initialData,

  initialPagination,

}: {

  initialData: TaskRow[];

  initialPagination?: { totalPages?: number };

}) {

  const { locale, t } = useLocale();

  const {

    data,

    loading,

    totalPages,

    page,

    setPage,

    values,

    setFilters,

    activeChips,

    refetch,

  } = useInstantList<TaskRow>({

    apiPath: "/api/tasks",

    defaultFilters: DEFAULT_FILTERS,

    initialData,

    initialPagination,

  });



  const [completing, setCompleting] = useState<string | null>(null);



  async function complete(id: string) {

    setCompleting(id);

    const res = await fetch(`/api/tasks/${id}/complete`, { method: "POST" });

    setCompleting(null);

    if (res.ok) await refetch();

  }



  return (

    <PageLayout

      title={locale === "ar" ? "المهام" : "Tasks"}

      description={

        locale === "ar"

          ? "متابعة المهام المفتوحة والمكتملة"

          : "Track open and completed tasks"

      }

    >

      <FilterToolbar

        chips={activeChips.map((c) => ({ key: c.key, value: c.value }))}

        onClear={() => setFilters({ status: "open", priority: "" })}

      >

        <FilterSelect

          value={values.status === "all" ? "" : values.status}

          onChange={(v) => setFilters({ status: v || "all" })}

          options={["open", "completed", "cancelled"]}

          allLabel={locale === "ar" ? "كل الحالات" : "All statuses"}

        />

        <FilterSelect

          value={values.priority}

          onChange={(v) => setFilters({ priority: v })}

          options={["critical", "high", "medium", "low"]}

          allLabel={locale === "ar" ? "كل الأولويات" : "All priorities"}

        />

      </FilterToolbar>



      <div className="space-y-3 md:hidden">

        {loading && data.length === 0 ? (

          <p className="py-8 text-center text-sm text-muted-foreground">{t.loading}</p>

        ) : data.length === 0 ? (

          <p className="py-8 text-center text-sm text-muted-foreground">{t.noResults}</p>

        ) : (

          data.map((row) => (

            <div key={row._id} className="surface-elevated flex items-center justify-between gap-3 p-4">

              <div className="min-w-0">

                <p className="font-semibold">{row.title}</p>

                <p className="mt-1 text-sm text-muted-foreground">

                  {row.dueDate

                    ? new Date(row.dueDate).toLocaleDateString(locale === "ar" ? "ar-SA" : "en-US")

                    : "—"}

                </p>

                <div className="mt-2">

                  <PriorityBadge value={row.priority} />

                </div>

              </div>

              <Button

                type="button"

                variant="outline"

                size="sm"

                disabled={completing === row._id}

                onClick={() => void complete(row._id)}

              >

                {locale === "ar" ? "إكمال" : "Done"}

              </Button>

            </div>

          ))

        )}

      </div>



      <DataTable className={cn("hidden md:block", loading && data.length > 0 && "opacity-70")}>

        <DataTableHead>

          <DataTableRow>

            <DataTableCell>{locale === "ar" ? "العنوان" : "Title"}</DataTableCell>

            <DataTableCell>{locale === "ar" ? "الأولوية" : "Priority"}</DataTableCell>

            <DataTableCell>{locale === "ar" ? "الاستحقاق" : "Due"}</DataTableCell>

            <DataTableCell>{locale === "ar" ? "إجراء" : "Action"}</DataTableCell>

          </DataTableRow>

        </DataTableHead>

        <tbody>

          {loading && data.length === 0 ? (

            <DataTableLoading colSpan={4} />

          ) : data.length === 0 ? (

            <DataTableEmpty colSpan={4} />

          ) : (

            data.map((row) => (

              <DataTableRow key={row._id}>

                <DataTableCell>{row.title}</DataTableCell>

                <DataTableCell>

                  <PriorityBadge value={row.priority} />

                </DataTableCell>

                <DataTableCell>

                  {row.dueDate

                    ? new Date(row.dueDate).toLocaleDateString(locale === "ar" ? "ar-SA" : "en-US")

                    : "—"}

                </DataTableCell>

                <DataTableCell>

                  <Button

                    type="button"

                    variant="outline"

                    size="sm"

                    disabled={completing === row._id}

                    onClick={() => void complete(row._id)}

                  >

                    {locale === "ar" ? "إكمال" : "Complete"}

                  </Button>

                </DataTableCell>

              </DataTableRow>

            ))

          )}

        </tbody>

      </DataTable>



      <ListPagination

        page={page}

        totalPages={totalPages}

        loading={loading}

        onPageChange={setPage}

      />

    </PageLayout>

  );

}



export function TasksList(props: {

  initialData: TaskRow[];

  initialPagination?: { totalPages?: number };

}) {

  return (

    <Suspense fallback={<div className="p-8 text-muted-foreground">...</div>}>

      <TasksListInner {...props} />

    </Suspense>

  );

}