"use client";
import { useState, type ReactNode } from "react";
import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import { alpha, useTheme } from "@mui/material/styles";
import { dashboardAssets } from "@/components/dashboard/dashboard-assets";
import { DashboardAssetIcon } from "@/components/dashboard/dashboard-asset-icon";
import { DocumentLink } from "@/components/ui/document-link";
import { DocumentFileAttachment } from "@/components/ui/document-file-name";
import {
formatCalendarDate,
formatCalendarTimeRange,
} from "@/components/ui/month-calendar";
import type {
MeetingCalendarEvent,
MeetingCalendarIssue,
} from "@/features/pswg/meeting-request/service/meeting-calendar-service";
import {
getMeetingRequestFont,
i18n,
tText,
type UiLang,
} from "@/features/pswg/meeting-request/meeting-request-i18n";
import { isDocumentPlaceholder } from "@/lib/document-file";
type MeetingRequestDetailDialogProps = {
open: boolean;
event: MeetingCalendarEvent | null;
language?: UiLang;
onClose: () => void;
};
type DialogTab = "request" | "update";
function getUploadBaseUrl() {
const raw =
process.env.NEXT_PUBLIC_API_URL ??
process.env.NEXT_PUBLIC_API_BASE_URL ??
"http://localhost:3001";
return raw.replace(/\/api\/v1\/?$/, "").replace(/\/+$/, "");
}
function resolveUploadUrl(path?: string | null) {
if (!path) return null;
const value = String(path).trim();
if (!value) return null;
if (/^https?:\/\//i.test(value)) return value;
const normalizedPath = value.startsWith("/") ? value : `/${value}`;
return `${getUploadBaseUrl()}${normalizedPath}`;
}
function AgencyLogo({
logo,
name,
size = 18,
}: {
logo?: string | null;
name?: string | null;
size?: number;
}) {
const [failed, setFailed] = useState(false);
const src = !failed ? resolveUploadUrl(logo) : null;
if (!src) {
return (
);
}
return (
setFailed(true)}
sx={{
width: size,
height: size,
borderRadius: "50%",
objectFit: "cover",
flexShrink: 0,
bgcolor: "#ffffff",
border: "1px solid #e9eaeb",
}}
/>
);
}
function LineIcon({ type, size = 18 }: { type: "calendar" | "user" | "status" | "link" | "tag"; size?: number }) {
const common = {
width: size,
height: size,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: 1.8,
strokeLinecap: "round" as const,
strokeLinejoin: "round" as const,
};
if (type === "calendar") {
return (
);
}
if (type === "user") {
return (
);
}
if (type === "link") {
return (
);
}
if (type === "tag") {
return (
);
}
return (
);
}
function getStatusStyle(status: MeetingCalendarEvent["status"]) {
if (status === "Completed") {
return {
color: "#1a64a8",
bg: "#eff8ff",
border: "#b2ddff",
};
}
if (status === "Submitted") {
return {
color: "#12b76a",
bg: "#ecfdf3",
border: "#d1fadf",
};
}
if (status === "Under Review" || status === "Draft") {
return {
color: status === "Draft" ? "#f04438" : "#f79009",
bg: status === "Draft" ? "#fef3f2" : "#fffaeb",
border: status === "Draft" ? "#fee4e2" : "#fedf89",
};
}
if (status === "Scheduled") {
return {
color: "#667085",
bg: "#f9fafb",
border: "#eaecf0",
};
}
return {
color: "#717680",
bg: "#f5f5f5",
border: "#e9eaeb",
};
}
function DetailItem({
icon,
label,
value,
children,
}: {
icon?: ReactNode;
label: string;
value?: string;
children?: ReactNode;
}) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
{icon}
{label} :
{children ?? (
{value}
)}
);
}
function TabButton({
active,
label,
language,
onClick,
}: {
active: boolean;
label: string;
language: UiLang;
onClick: () => void;
}) {
return (
{label}
);
}
function DocumentCard({ path }: { path?: string | null }) {
if (isDocumentPlaceholder(path) || !path) {
return (
-
);
}
return (
);
}
function IssueDetailDialog({
open,
issue,
event,
language,
onClose,
}: {
open: boolean;
issue: MeetingCalendarIssue | null;
event: MeetingCalendarEvent;
language: UiLang;
onClose: () => void;
}) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const statusStyle = getStatusStyle(event.status);
if (!issue) return null;
return (
<>
);
}
export function MeetingRequestDetailDialog({
open,
event,
language = "km",
onClose,
}: MeetingRequestDetailDialogProps) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const t = i18n(language);
const [activeTab, setActiveTab] = useState("request");
const [selectedIssue, setSelectedIssue] =
useState(null);
if (!event) return null;
const statusStyle = getStatusStyle(event.status);
return (
<>
setSelectedIssue(null)}
/>
);
}