"use client";

import { useState } from "react";
import { useSuspenseQuery } from "@tanstack/react-query";
import { Badge } from "@/components/ui/badge";
import PageContainer from "@/components/layout/page-container";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Icons } from "@/components/icons";
import { formatDate } from "@/lib/format";
import { organizersQueryOptions } from "../api/queries";
import { OrganizerCardActions } from "./organizer-card-actions";
import { OrganizerFormSheet } from "./organizer-form-sheet";

interface OrganizersPageProps {
  canManage: boolean;
}

export function OrganizersPage({ canManage }: OrganizersPageProps) {
  const [createOpen, setCreateOpen] = useState(false);
  const { data } = useSuspenseQuery(
    organizersQueryOptions({ status: "active" }),
  );
  const organizers = data.organizers;
  const activeCount = organizers.length;

  return (
    <PageContainer
      pageTitle="Organizers"
      pageDescription={
        canManage
          ? "Manage organizer workspaces, keep inactive records out of runtime flows, and review status before switching."
          : "Review organizer workspaces and their current activation status."
      }
    >
      <OrganizerFormSheet open={createOpen} onOpenChange={setCreateOpen} />

      <div className="flex justify-end">
        {canManage && (
          <Button
            onClick={() => setCreateOpen(true)}
            className="shrink-0 whitespace-nowrap"
          >
            <Icons.add className="mr-2 h-4 w-4" />
            สร้างกลุ่มบริษัทใหม่
          </Button>
        )}
      </div>

      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px] mt-5">
        <Card>
          <CardHeader>
            <CardTitle>สังกัดบริษัททั้งหมด</CardTitle>
            <CardDescription>
              แสดงเฉพาะ organizer ที่ยังใช้งานอยู่เท่านั้น
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            {organizers.length ? (
              organizers.map((organization) => (
                <div key={organization.id} className="rounded-xl border p-4">
                  <div className="flex items-start justify-between gap-4">
                    <div className="min-w-0 space-y-2">
                      <div className="flex min-w-0 items-center gap-2">
                        <div
                          className="min-w-0 flex-1 truncate font-semibold"
                          title={organization.name}
                        >
                          {organization.name}
                        </div>

                        <Badge
                          variant={
                            organization.is_active ? "default" : "secondary"
                          }
                        >
                          {organization.is_active ? "ใช้งาน" : "ปิดใช้งาน"}
                        </Badge>
                      </div>

                      <div className="text-muted-foreground text-sm">
                        สร้างเมื่อ{" "}
                        {formatDate(organization.created_at, {
                          month: "short",
                        })}
                      </div>
                    </div>
                    {canManage && organization.is_active ? (
                      <div className="shrink-0">
                        <OrganizerCardActions organizer={organization} />
                      </div>
                    ) : null}
                  </div>
                </div>
              ))
            ) : (
              <div className="text-muted-foreground rounded-xl border border-dashed p-6 text-sm">
                ยังไม่มี organizer ในระบบ
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </PageContainer>
  );
}
