import { Modal, Stack, Text, Group, Badge, Divider, Tabs } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { useAtom } from "jotai";
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
import type { BridgeRow, BridgeField } from "../types/database-view.types";
import { RowCommentsPanel } from "@/features/acadenice/comments/components/row-comments-panel";

interface RowDetailModalProps {
  row: BridgeRow | null;
  fields: BridgeField[];
  opened: boolean;
  onClose: () => void;
}

/**
 * Simple row detail modal — opened when the user clicks on a calendar event.
 *
 * Why simple in R3.1.d:
 * Full inline editing inside the modal is a larger UX investment (field-level
 * save, validation, optimistic feedback). The priority here is to make the
 * calendar renderer clickable and show meaningful data. Inline edit from the
 * modal is slated for R3.1.e / R3.2.
 */
export function RowDetailModal({ row, fields, opened, onClose }: RowDetailModalProps) {
  const { t } = useTranslation();
  const [currentUser] = useAtom(currentUserAtom);

  if (!row) return null;

  return (
    <Modal
      opened={opened}
      onClose={onClose}
      title={t("database_view.row_detail.title")}
      size="lg"
      centered
    >
      <Tabs defaultValue="fields">
        <Tabs.List>
          <Tabs.Tab value="fields">
            {t("database_view.row_detail.tab_fields")}
          </Tabs.Tab>
          <Tabs.Tab value="comments">
            {t("database_view.row_detail.tab_comments")}
          </Tabs.Tab>
        </Tabs.List>

        <Tabs.Panel value="fields" pt="xs">
          <Stack gap="xs">
            {fields.map((field) => {
              const rawValue = row.fields[field.name] ?? row.fields[field.id];
              return (
                <div key={field.id}>
                  <Group gap="xs" mb={2}>
                    <Text size="xs" fw={600} c="dimmed">
                      {field.name}
                    </Text>
                    {field.primary && (
                      <Badge size="xs" variant="light" color="blue">
                        {t("database_view.row_detail.primary_badge")}
                      </Badge>
                    )}
                  </Group>
                  <Text size="sm">{formatValue(rawValue)}</Text>
                  <Divider mt="xs" />
                </div>
              );
            })}

            {fields.length === 0 && (
              <Text size="sm" c="dimmed">
                {t("database_view.row_detail.no_fields")}
              </Text>
            )}
          </Stack>
        </Tabs.Panel>

        <Tabs.Panel value="comments" pt="xs">
          {currentUser && (
            <RowCommentsPanel
              tableId={String(row.tableId ?? "")}
              rowId={String(row.id)}
              currentUserId={currentUser.user.id}
            />
          )}
        </Tabs.Panel>
      </Tabs>
    </Modal>
  );
}

function formatValue(value: unknown): string {
  if (value === null || value === undefined) return "—";
  if (typeof value === "boolean") return value ? "true" : "false";
  if (Array.isArray(value)) {
    return value
      .map((v) =>
        typeof v === "object" && v !== null
          ? (v as { value?: string }).value ?? JSON.stringify(v)
          : String(v),
      )
      .join(", ");
  }
  if (typeof value === "object") {
    return (value as { value?: string }).value ?? JSON.stringify(value);
  }
  return String(value);
}