"use client";

import { FormEvent, useEffect, useMemo, useState } from "react";
import {
  approveWorkflowRequest,
  getWorkflowRequests,
  rejectWorkflowRequest,
  WorkflowFilters
} from "@/services/workflow";
import { useApiStore } from "@/store/uiStore";
import { useLocaleStore } from "@/store/uiStore";
import { t } from "@/lib/locale";
import DataTable from "@/components/ui/Table";
import StatusBadge from "@/components/workflow/StatusBadge";
import ApprovalActionModal from "@/components/workflow/ApprovalActionModal";
import PageHeader from "@/components/ui/PageHeader";
import EmptyState from "@/components/ui/EmptyState";
import { WorkflowRequestItem, WorkflowStatus } from "@/types/api";

const DEFAULT_FILTERS: WorkflowFilters = {
  status: "",
  resourceType: "",
  makerUsername: "",
  limit: 50
};

export default function WorkflowPage() {
  const [filters, setFilters] = useState<WorkflowFilters>(DEFAULT_FILTERS);
  const [requests, setRequests] = useState<WorkflowRequestItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [approvalRequest, setApprovalRequest] = useState<WorkflowRequestItem | null>(null);
  const [actionType, setActionType] = useState<"approve" | "reject">("approve");
  const [isOpen, setIsOpen] = useState(false);
  const addToast = useApiStore((s) => s.addToast);
  const locale = useLocaleStore((s) => s.locale);

  const filtered = useMemo(
    () =>
      requests.filter((item) => {
        const matchesStatus = !filters.status || item.status === filters.status;
        const matchesType = !filters.resourceType || item.resourceType === filters.resourceType;
        const matchesMaker = !filters.makerUsername || item.makerUsername.includes(filters.makerUsername);
        return matchesStatus && matchesType && matchesMaker;
      }),
    [filters, requests]
  );

  const load = async () => {
    setLoading(true);
    try {
      const response = await getWorkflowRequests(filters);
      setRequests(response);
    } catch (error) {
      addToast((error as { message?: string })?.message || t("loadFailed", locale), "error");
    } finally {
      setLoading(false);
    }
  };

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

  const onSubmitAction = async (notes?: string, checkerRole?: string) => {
    if (!approvalRequest) return;
    try {
      if (actionType === "approve") {
        await approveWorkflowRequest(approvalRequest.id, { notes, checkerRole });
        addToast(t("requestApproved", locale), "success");
      } else {
        await rejectWorkflowRequest(approvalRequest.id, { notes, checkerRole });
        addToast(t("requestRejected", locale), "success");
      }
      setIsOpen(false);
      load();
    } catch (error) {
      addToast((error as { message?: string })?.message || t("actionFailed", locale), "error");
    }
  };

  const submitFilters = (e: FormEvent) => {
    e.preventDefault();
    load();
  };

  return (
    <main className="vstack gap-3">
      <PageHeader
        title={t("workflow", locale)}
        breadcrumb={[
          { label: t("dashboard", locale), href: "/dashboard" },
          { label: t("workflow", locale), href: "/dashboard/workflow" }
        ]}
      />
      <form className="card page-card card-body" onSubmit={submitFilters}>
        <div className="form-grid">
          <select
            className="form-select"
            value={filters.status ?? ""}
            onChange={(e) => setFilters((prev) => ({ ...prev, status: e.target.value as WorkflowStatus | "" }))}
          >
            <option value="">{t("allStatuses", locale)}</option>
            <option value="DRAFT">DRAFT</option>
            <option value="PENDING">PENDING</option>
            <option value="APPROVED">APPROVED</option>
            <option value="REJECTED">REJECTED</option>
          </select>
          <input
            className="form-control"
            placeholder="Resource type"
            value={filters.resourceType ?? ""}
            onChange={(e) => setFilters((prev) => ({ ...prev, resourceType: e.target.value }))}
          />
          <input
            className="form-control"
            placeholder="Maker username"
            value={filters.makerUsername ?? ""}
            onChange={(e) => setFilters((prev) => ({ ...prev, makerUsername: e.target.value }))}
          />
          <input
            className="form-control"
            type="number"
            min={1}
            max={200}
            value={filters.limit ?? 50}
            onChange={(e) => setFilters((prev) => ({ ...prev, limit: Number(e.target.value) }))}
          />
          <button className="btn btn-outline-primary">Apply</button>
        </div>
      </form>
      <section className="card page-card">
        <div className="card-body">
          {filtered.length === 0 && !loading && (
            <EmptyState
              title={t("noData", locale)}
              description={t("noData", locale)}
            />
          )}
          <DataTable
            loading={loading}
            columns={[
              { key: "id", header: "Request Id" },
              { key: "resourceType", header: "Resource Type" },
              { key: "resourceId", header: "Resource Id" },
              { key: "makerUsername", header: "Maker" },
              {
                key: "status",
                header: "Status",
                render: (row) => <StatusBadge status={row.status} />
              },
              { key: "currentStep", header: "Current Step" },
              { key: "requiredSteps", header: "Required Steps" },
              { key: "updatedAt", header: "Updated At" },
              {
                key: "actions",
                header: "Actions",
                render: (row) => (
                  <div className="d-flex gap-2">
                    <button
                      className="btn btn-success btn-sm"
                      onClick={() => {
                        setApprovalRequest(row);
                        setActionType("approve");
                        setIsOpen(true);
                      }}
                    >
                      {t("approve", locale)}
                    </button>
                    <button
                      className="btn btn-danger btn-sm"
                      onClick={() => {
                        setApprovalRequest(row);
                        setActionType("reject");
                        setIsOpen(true);
                      }}
                    >
                      {t("reject", locale)}
                    </button>
                  </div>
                )
              }
            ]}
            data={filtered}
          />
        </div>
      </section>

      <ApprovalActionModal
        isOpen={isOpen}
        mode={actionType}
        onSubmit={onSubmitAction}
        onClose={() => setIsOpen(false)}
        title={actionType === "approve" ? t("approveRequest", locale) : t("rejectRequest", locale)}
      />
    </main>
  );
}