'use client';

import { useTranslation } from '@/hooks/useTranslation';

interface AttendanceChange {
  status: string;
  checkinTime?: string;
  isLate?: boolean;
}

interface UserChange {
  name?: string;
  email?: string;
  role?: string;
  department?: string;
  position?: string;
  isActive?: boolean;
}

interface MeetingChange {
  title?: string;
  location?: string;
  startTime?: string;
}

interface NewDataFields {
  seriesId?: string;
  title?: string;
  pattern?: string;
  meetingCount?: number;
  firstMeeting?: string;
  lastMeeting?: string;
  email?: string;
  name?: string;
  role?: string;
  department?: string;
  position?: string;
  meetingId?: string;
  meetingTitle?: string;
  location?: string;
  startTime?: string;
  [key: string]: unknown;
}

interface ChangesData {
  action?: string;
  before?: AttendanceChange | UserChange | MeetingChange | Record<string, unknown>;
  after?: AttendanceChange | UserChange | MeetingChange | Record<string, unknown>;
  userName?: string;
  userEmail?: string;
  meetingTitle?: string;
  seriesTitle?: string;
  reason?: string;
  newData?: NewDataFields;
}

function parseChanges(changesStr?: string | null): ChangesData | null {
  if (!changesStr) return null;
  try {
    return JSON.parse(changesStr);
  } catch {
    return null;
  }
}

interface Props {
  action: string;
  changesStr?: string | null;
}

export function AuditChangeDetails({ action, changesStr }: Props) {
  const { t } = useTranslation();
  const changes = parseChanges(changesStr);
  if (!changes) return null;

  const labels = t.meetingAttendance.auditLogs;
  const statusLabels = labels.attendanceStatusLabels as Record<string, string>;
  const roleLabels = labels.roleLabels as Record<string, string>;
  const patternLabels = labels.patternLabels as Record<string, string>;

  const statusText = (s: string) => statusLabels[s] || s;
  const roleText = (r: string) => roleLabels[r] || r;

  switch (action) {
    case 'ATTENDANCE_UPDATE':
    case 'ATTENDANCE_MANUAL':
      return renderAttendanceChanges(changes, labels, statusText);
    case 'USER_UPDATE':
      return renderUserChanges(changes, labels, roleText);
    case 'USER_DISABLE':
    case 'USER_ENABLE':
      return renderUserStatusChange(changes, labels);
    case 'MEETING_UPDATE':
      return renderMeetingChanges(changes, labels);
    case 'MEETING_CANCEL':
    case 'MEETING_DELETE':
      return renderMeetingDelete(changes, labels);
    default:
      return renderGenericChanges(changes, labels, patternLabels);
  }
}

type Labels = Record<string, any>;

function renderAttendanceChanges(
  changes: ChangesData,
  labels: Labels,
  statusText: (s: string) => string,
) {
  const before = changes.before as AttendanceChange | undefined;
  const after = changes.after as AttendanceChange | undefined;

  return (
    <div className="mt-3 bg-blue-50 p-3 rounded-lg border border-blue-200">
      <p className="text-sm font-semibold text-blue-900 mb-2">{labels.changeDetailsTitle}</p>
      <div className="space-y-2 text-sm">
        {changes.userName && (
          <div className="flex items-center gap-2">
            <span className="text-blue-700 font-medium min-w-[100px]">{labels.subjectLabel}</span>
            <span className="text-gray-900 font-semibold">{changes.userName}</span>
            <span className="text-gray-500">({changes.userEmail})</span>
          </div>
        )}

        {changes.meetingTitle && (
          <div className="flex items-center gap-2">
            <span className="text-blue-700 font-medium min-w-[100px]">{labels.meetingLabel}</span>
            <span className="text-gray-900">{changes.meetingTitle}</span>
          </div>
        )}

        {(() => {
          const hasStatusChange = after?.status && (!before?.status || before.status !== after.status);
          if (!hasStatusChange || !after?.status) return null;

          if (before?.status) {
            return (
              <div className="flex items-center gap-2 p-2 bg-white rounded border border-blue-300">
                <span className="text-blue-700 font-medium min-w-[100px]">{labels.attendanceLabel}</span>
                <div className="flex items-center gap-2">
                  <span className="px-3 py-1 bg-red-100 text-red-700 rounded-md line-through font-medium">
                    {statusText(before.status)}
                  </span>
                  <span className="text-blue-500 font-bold text-lg">→</span>
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-md font-bold">
                    {statusText(after.status)}
                  </span>
                </div>
              </div>
            );
          }

          return (
            <div className="flex items-center gap-2 p-2 bg-white rounded border border-blue-300">
              <span className="text-blue-700 font-medium min-w-[100px]">{labels.attendanceLabel}</span>
              <div className="flex items-center gap-2">
                <span className="px-3 py-1 bg-gray-100 text-gray-600 rounded-md line-through font-medium">
                  {labels.notRecorded}
                </span>
                <span className="text-blue-500 font-bold text-lg">→</span>
                <span className="px-3 py-1 bg-green-100 text-green-700 rounded-md font-bold">
                  {statusText(after.status)}
                </span>
              </div>
            </div>
          );
        })()}

        {before && after && (
          <>
            {before.checkinTime !== after.checkinTime && after.checkinTime && (
              <div className="flex items-center gap-2 text-xs text-gray-600">
                <span className="text-blue-700 font-medium min-w-[100px]">{labels.checkinTimeLabel}</span>
                <span>{new Date(after.checkinTime).toLocaleString('en-US')}</span>
              </div>
            )}
            {before.isLate !== after.isLate && (
              <div className="flex items-center gap-2 text-xs text-gray-600">
                <span className="text-blue-700 font-medium min-w-[100px]">{labels.lateLabel}</span>
                <span>{after.isLate ? labels.yes : labels.no}</span>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

function renderUserChanges(
  changes: ChangesData,
  labels: Labels,
  roleText: (r: string) => string,
) {
  const before = changes.before as UserChange | undefined;
  const after = changes.after as UserChange | undefined;
  if (!before || !after) return null;

  const changedFields: Array<{ field: string; before?: string; after?: string }> = [];
  if (before.name !== after.name) {
    changedFields.push({ field: labels.nameLabel, before: before.name, after: after.name });
  }
  if (before.email !== after.email) {
    changedFields.push({ field: labels.emailLabel, before: before.email, after: after.email });
  }
  if (before.role !== after.role) {
    changedFields.push({
      field: labels.roleLabel,
      before: roleText(before.role || ''),
      after: roleText(after.role || ''),
    });
  }
  if (before.department !== after.department) {
    changedFields.push({ field: labels.departmentLabel, before: before.department, after: after.department });
  }
  if (before.position !== after.position) {
    changedFields.push({ field: labels.positionLabel, before: before.position, after: after.position });
  }
  if (before.isActive !== after.isActive) {
    changedFields.push({
      field: labels.statusLabelText,
      before: before.isActive ? labels.statusActive : labels.statusDisabled,
      after: after.isActive ? labels.statusActive : labels.statusDisabled,
    });
  }

  if (changedFields.length === 0) return null;

  return (
    <div className="mt-3 bg-blue-50 p-3 rounded-lg border border-blue-200">
      <p className="text-sm font-semibold text-blue-900 mb-2">{labels.changeDetailsTitle}</p>
      <div className="space-y-2">
        <div className="text-sm">
          <span className="text-blue-700 font-medium">{labels.userLabelText}</span>
          <span className="text-gray-900 font-semibold ml-2">{after.name}</span>
          <span className="text-gray-500 ml-1">({after.email})</span>
        </div>
        {changedFields.map((change, idx) => (
          <div key={idx} className="flex items-center gap-2 text-sm">
            <span className="text-blue-700 font-medium min-w-[80px]">{change.field}</span>
            <span className="px-2 py-0.5 bg-red-100 text-red-700 rounded line-through">
              {change.before || labels.emptyValue}
            </span>
            <span className="text-gray-400">→</span>
            <span className="px-2 py-0.5 bg-green-100 text-green-700 rounded font-semibold">
              {change.after || labels.emptyValue}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function renderUserStatusChange(changes: ChangesData, labels: Labels) {
  return (
    <div className="mt-3 bg-blue-50 p-3 rounded-lg border border-blue-200">
      <p className="text-sm font-semibold text-blue-900 mb-2">{labels.changeDetailsTitle}</p>
      <div className="text-sm">
        <span className="text-blue-700 font-medium">{labels.userLabelText}</span>
        <span className="text-gray-900 font-semibold ml-2">{changes.userName}</span>
        <span className="text-gray-500 ml-1">({changes.userEmail})</span>
      </div>
    </div>
  );
}

function renderMeetingChanges(changes: ChangesData, labels: Labels) {
  const before = changes.before as MeetingChange | undefined;
  const after = changes.after as MeetingChange | undefined;
  if (!before || !after) return null;

  const changedFields: Array<{ field: string; before?: string; after?: string }> = [];
  if (before.title !== after.title) {
    changedFields.push({ field: labels.titleLabel, before: before.title, after: after.title });
  }
  if (before.location !== after.location) {
    changedFields.push({ field: labels.locationLabel, before: before.location, after: after.location });
  }
  if (before.startTime && after.startTime && before.startTime !== after.startTime) {
    changedFields.push({
      field: labels.startTimeLabel,
      before: new Date(before.startTime).toLocaleString('en-US'),
      after: new Date(after.startTime).toLocaleString('en-US'),
    });
  }

  if (changedFields.length === 0) return null;

  return (
    <div className="mt-3 bg-blue-50 p-3 rounded-lg border border-blue-200">
      <p className="text-sm font-semibold text-blue-900 mb-2">{labels.changeDetailsTitle}</p>
      <div className="space-y-2">
        {changedFields.map((change, idx) => (
          <div key={idx} className="flex items-center gap-2 text-sm">
            <span className="text-blue-700 font-medium min-w-[100px]">{change.field}</span>
            <span className="px-2 py-0.5 bg-red-100 text-red-700 rounded line-through max-w-xs truncate">
              {change.before || labels.emptyValue}
            </span>
            <span className="text-gray-400">→</span>
            <span className="px-2 py-0.5 bg-green-100 text-green-700 rounded font-semibold max-w-xs truncate">
              {change.after || labels.emptyValue}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function renderMeetingDelete(changes: ChangesData, labels: Labels) {
  return (
    <div className="mt-3 bg-blue-50 p-3 rounded-lg border border-blue-200">
      <p className="text-sm font-semibold text-blue-900 mb-2">{labels.changeDetailsTitle}</p>
      <div className="text-sm space-y-1">
        <div>
          <span className="text-blue-700 font-medium">{labels.meetingLabel}</span>
          <span className="text-gray-900 ml-2">{changes.meetingTitle || changes.seriesTitle}</span>
        </div>
        {changes.reason && (
          <div>
            <span className="text-blue-700 font-medium">{labels.reasonLabel}</span>
            <span className="text-gray-600 ml-2">{changes.reason}</span>
          </div>
        )}
      </div>
    </div>
  );
}

function renderGenericChanges(
  changes: ChangesData,
  labels: Labels,
  patternLabels: Record<string, string>,
) {
  if (changes.action !== 'create' || !changes.newData) return null;
  const data = changes.newData;

  const dateOpts: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  };

  return (
    <div className="mt-3 bg-green-50 p-3 rounded-lg border border-green-200">
      <p className="text-sm font-semibold text-green-900 mb-2">{labels.newContentTitle}</p>
      <div className="space-y-2">
        {data.seriesId && (
          <div className="space-y-1.5 text-sm">
            <div className="flex gap-2">
              <span className="text-green-700 font-medium min-w-[100px]">{labels.seriesTitleLabel}</span>
              <span className="text-gray-900 font-semibold">{data.title}</span>
            </div>
            <div className="flex gap-2">
              <span className="text-green-700 font-medium min-w-[100px]">{labels.patternLabel}</span>
              <span className="text-gray-700">{patternLabels[data.pattern || ''] || data.pattern}</span>
            </div>
            {data.meetingCount && (
              <div className="flex gap-2">
                <span className="text-green-700 font-medium min-w-[100px]">{labels.meetingCountLabel}</span>
                <span className="text-gray-700">
                  {labels.meetingCountValue.replace('{count}', String(data.meetingCount))}
                </span>
              </div>
            )}
            {data.firstMeeting && (
              <div className="flex gap-2">
                <span className="text-green-700 font-medium min-w-[100px]">{labels.firstMeetingLabel}</span>
                <span className="text-gray-700">{new Date(data.firstMeeting).toLocaleString('en-US', dateOpts)}</span>
              </div>
            )}
            {data.lastMeeting && (
              <div className="flex gap-2">
                <span className="text-green-700 font-medium min-w-[100px]">{labels.lastMeetingLabel}</span>
                <span className="text-gray-700">{new Date(data.lastMeeting).toLocaleString('en-US', dateOpts)}</span>
              </div>
            )}
          </div>
        )}

        {data.email && !data.seriesId && (
          <div className="space-y-1.5 text-sm">
            <div className="flex gap-2">
              <span className="text-green-700 font-medium min-w-[100px]">{labels.nameLabel}</span>
              <span className="text-gray-900 font-semibold">{data.name}</span>
            </div>
            <div className="flex gap-2">
              <span className="text-green-700 font-medium min-w-[100px]">{labels.emailLabel}</span>
              <span className="text-gray-700">{data.email}</span>
            </div>
            {data.role && (
              <div className="flex gap-2">
                <span className="text-green-700 font-medium min-w-[100px]">{labels.roleLabel}</span>
                <span className="text-gray-700">{data.role}</span>
              </div>
            )}
            {data.department && (
              <div className="flex gap-2">
                <span className="text-green-700 font-medium min-w-[100px]">{labels.departmentLabel}</span>
                <span className="text-gray-700">{data.department}</span>
              </div>
            )}
            {data.position && (
              <div className="flex gap-2">
                <span className="text-green-700 font-medium min-w-[100px]">{labels.positionLabel}</span>
                <span className="text-gray-700">{data.position}</span>
              </div>
            )}
          </div>
        )}

        {(data.meetingId || data.meetingTitle) && !data.seriesId && (
          <div className="space-y-1.5 text-sm">
            <div className="flex gap-2">
              <span className="text-green-700 font-medium min-w-[100px]">{labels.meetingTitleLabel}</span>
              <span className="text-gray-900 font-semibold">{data.meetingTitle || data.title}</span>
            </div>
            {data.location && (
              <div className="flex gap-2">
                <span className="text-green-700 font-medium min-w-[100px]">{labels.locationLabel}</span>
                <span className="text-gray-700">{data.location}</span>
              </div>
            )}
            {data.startTime && (
              <div className="flex gap-2">
                <span className="text-green-700 font-medium min-w-[100px]">{labels.startTimeLabel}</span>
                <span className="text-gray-700">{new Date(data.startTime).toLocaleString('en-US')}</span>
              </div>
            )}
          </div>
        )}

        {!data.seriesId && !data.email && !data.meetingId && !data.meetingTitle && (
          <div className="text-sm">
            {Object.entries(data).slice(0, 5).map(([key, value]) => (
              <div key={key} className="flex gap-2 mb-1">
                <span className="text-green-700 font-medium min-w-[100px]">{key}:</span>
                <span className="text-gray-700 truncate">
                  {typeof value === 'object' ? JSON.stringify(value) : String(value)}
                </span>
              </div>
            ))}
            {Object.keys(data).length > 5 && (
              <div className="text-xs text-gray-500 mt-2">
                {labels.moreFields.replace('{count}', String(Object.keys(data).length - 5))}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}