'use client';

import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { MESSAGE_KEYS } from '@/lib/queries/use-messages';
import { MessageThread } from '@/components/messaging/message-thread';

interface Props {
  orderId: string;
  adminUserId: string;
  buyerLabel: string;
  storeLabel: string;
}

type Mode = 'view' | 'intervene' | 'select';

export function AdminMessagesPanel({
  orderId,
  adminUserId,
  buyerLabel,
  storeLabel,
}: Props) {
  const [mode, setMode] = useState<Mode>('view');
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const qc = useQueryClient();

  const bulkDelete = useMutation({
    mutationFn: (ids: string[]) => api.admin.bulkDeleteMessages(ids),
    onSuccess: () => {
      setSelectedIds(new Set());
      setMode('view');
      qc.invalidateQueries({ queryKey: MESSAGE_KEYS.thread(orderId) });
    },
  });

  const toggle = (id: string) => {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const selectionCount = selectedIds.size;

  const onBulkDelete = () => {
    if (selectionCount === 0) return;
    if (!confirm(`Delete ${selectionCount} selected message${selectionCount === 1 ? '' : 's'}?`)) return;
    bulkDelete.mutate([...selectedIds]);
  };

  return (
    <section className="mt-4 rounded-lg border border-slate-200 bg-white p-4">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="font-semibold text-sm text-slate-700">Messages</h2>
          <p className="mt-0.5 text-xs text-slate-500">
            Conversation between {buyerLabel} and {storeLabel}.
          </p>
        </div>
        <div className="flex items-center gap-2">
          {mode === 'view' && (
            <>
              <button
                type="button"
                onClick={() => setMode('intervene')}
                className="rounded-md border border-forest-600 px-3 py-1 text-xs font-medium text-forest-700 hover:bg-forest-50"
              >
                Intervene
              </button>
              <button
                type="button"
                onClick={() => setMode('select')}
                className="rounded-md border border-slate-300 px-3 py-1 text-xs font-medium text-slate-600 hover:bg-slate-50"
              >
                Select to delete
              </button>
            </>
          )}
          {mode !== 'view' && (
            <button
              type="button"
              onClick={() => {
                setMode('view');
                setSelectedIds(new Set());
              }}
              className="text-xs text-slate-500 hover:text-slate-700"
            >
              Cancel
            </button>
          )}
        </div>
      </div>

      {mode === 'intervene' && (
        <p className="mt-3 rounded-md bg-forest-50 p-2 text-xs text-forest-900">
          Posting as <strong>Alqove Support</strong>. The message will be visible to both buyer and seller and is recorded in the admin audit log.
        </p>
      )}

      {mode === 'select' && (
        <div className="mt-3 flex items-center justify-between rounded-md bg-amber-50 p-2 text-xs text-amber-900">
          <span>
            {selectionCount === 0
              ? 'Tick the messages you want to remove.'
              : `${selectionCount} selected.`}
          </span>
          <button
            type="button"
            onClick={onBulkDelete}
            disabled={selectionCount === 0 || bulkDelete.isPending}
            className="rounded-md bg-red-600 px-3 py-1 text-xs font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
          >
            {bulkDelete.isPending ? 'Deleting…' : `Delete ${selectionCount || ''}`.trim()}
          </button>
        </div>
      )}

      {bulkDelete.isError && (
        <p className="mt-2 rounded bg-red-50 p-2 text-xs text-red-700">
          Bulk delete failed: {(bulkDelete.error as Error).message}
        </p>
      )}

      <div className="mt-3">
        <MessageThread
          orderId={orderId}
          counterpartyName={`${buyerLabel} ↔ ${storeLabel}`}
          viewerRole="admin"
          viewerUserId={adminUserId}
          readOnly={mode !== 'intervene'}
          selection={mode === 'select' ? { selectedIds, onToggle: toggle } : undefined}
        />
      </div>
    </section>
  );
}