tenantpilot/components/policy-explorer/PolicyDetailSheet.tsx

'use client';

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet';
import type { PolicySettingSearchResult } from '@/lib/actions/policySettings';
import { formatDistanceToNow } from 'date-fns';
import { de } from 'date-fns/locale';

interface PolicyDetailSheetProps {
  policy: PolicySettingSearchResult | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

function isJsonString(str: string): boolean {
  if (!str || typeof str !== 'string') return false;
  const trimmed = str.trim();
  return trimmed.startsWith('{') || trimmed.startsWith('[');
}

function formatJson(value: string): string {
  try {
    const parsed = JSON.parse(value);
    return JSON.stringify(parsed, null, 2);
  } catch {
    return value;
  }
}

export function PolicyDetailSheet({
  policy,
  open,
  onOpenChange,
}: PolicyDetailSheetProps) {
  if (!policy) return null;

  const isJson = isJsonString(policy.settingValue);
  const displayValue = isJson
    ? formatJson(policy.settingValue)
    : policy.settingValue;

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="w-[600px] sm:max-w-[600px] overflow-y-auto">
        <SheetHeader>
          <SheetTitle>{policy.settingName}</SheetTitle>
          <SheetDescription>
            Policy Setting Details
          </SheetDescription>
        </SheetHeader>

        <div className="mt-6 space-y-6">
          {/* Policy Name */}
          <div>
            <h3 className="text-sm font-medium text-muted-foreground mb-1">
              Policy Name
            </h3>
            <p className="text-sm">{policy.policyName}</p>
          </div>

          {/* Policy Type */}
          <div>
            <h3 className="text-sm font-medium text-muted-foreground mb-1">
              Policy Type
            </h3>
            <p className="text-sm capitalize">
              {policy.policyType.replace(/([A-Z])/g, ' $1').trim()}
            </p>
          </div>

          {/* Setting Name */}
          <div>
            <h3 className="text-sm font-medium text-muted-foreground mb-1">
              Setting Name
            </h3>
            <p className="text-sm font-mono">{policy.settingName}</p>
          </div>

          {/* Setting Value */}
          <div>
            <h3 className="text-sm font-medium text-muted-foreground mb-2">
              Setting Value
            </h3>
            {isJson ? (
              <pre className="text-xs bg-muted p-4 rounded-md overflow-x-auto max-h-96 overflow-y-auto">
                <code>{displayValue}</code>
              </pre>
            ) : (
              <p className="text-sm whitespace-pre-wrap break-words">
                {displayValue}
              </p>
            )}
          </div>

          {/* Last Synced */}
          <div>
            <h3 className="text-sm font-medium text-muted-foreground mb-1">
              Last Synced
            </h3>
            <p className="text-sm">
              {formatDistanceToNow(new Date(policy.lastSyncedAt), {
                addSuffix: true,
                locale: de,
              })}
            </p>
            <p className="text-xs text-muted-foreground mt-1">
              {new Date(policy.lastSyncedAt).toLocaleString('de-DE')}
            </p>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  );
}