// src/features/admin-vendor-detail/EditActionPanel.tsx
// Lazy-loaded edit/action panel for VendorDetail — owns the form-bearing
// Message / Freeze / Ban dialogs plus their state and submit handlers.
//
// Mounted via React.lazy() in VendorDetail.tsx the moment any of the three
// dialog flags transitions to `true`. Trigger buttons remain eager in the
// parent so the action surface is always visible without an extra click.

'use client';

import { useState } from 'react';
import { getCsrfToken } from '@/lib/csrf';
import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { Stack } from '@/components/ui/layout/Stack';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/overlays/Dialog';
import { Input } from '@/components/ui/primitives/Input';
import { Textarea } from '@/components/ui/primitives/Textarea';
import { Label } from '@/components/ui/primitives/Label';
import { FreezeDialog } from '@/components/ui/overlays/FreezeDialog';

export interface EditActionPanelProps {
  vendorId: string;
  /** Open-state flags driven by the parent's eager trigger buttons. */
  messageOpen: boolean;
  freezeOpen: boolean;
  banOpen: boolean;
  onMessageOpenChange: (open: boolean) => void;
  onFreezeOpenChange: (open: boolean) => void;
  onBanOpenChange: (open: boolean) => void;
  /** Notify the parent when an action mutated server state so it can patch its local copy. */
  onFreezeApplied: () => void;
  onBanApplied: () => void;
  /** Surface load + error state through the parent for shared UI. */
  onLoadingChange: (action: 'send_message' | 'freeze' | 'ban' | null) => void;
  onError: (message: string | null) => void;
  loading: 'send_message' | 'freeze' | 'ban' | null;
}

export default function EditActionPanel({
  vendorId,
  messageOpen,
  freezeOpen,
  banOpen,
  onMessageOpenChange,
  onFreezeOpenChange,
  onBanOpenChange,
  onFreezeApplied,
  onBanApplied,
  onLoadingChange,
  onError,
  loading,
}: EditActionPanelProps) {
  const tAdmin = useT('admin');

  const [messageSubject, setMessageSubject] = useState('');
  const [messageBody, setMessageBody] = useState('');
  const [banReason, setBanReason] = useState('');

  async function handleMessageSend() {
    onLoadingChange('send_message');
    onError(null);
    try {
      const res = await fetch(`/api/admin/vendors/${vendorId}/message`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-csrf-token': getCsrfToken(),
        },
        body: JSON.stringify({ subject: messageSubject, body: messageBody }),
      });
      if (!res.ok) throw new Error(await res.text());
      onMessageOpenChange(false);
      setMessageSubject('');
      setMessageBody('');
    } catch (err) {
      onError(err instanceof Error ? err.message : String(err));
    } finally {
      onLoadingChange(null);
    }
  }

  async function handleBanSubmit() {
    if (!banReason.trim()) return;
    onLoadingChange('ban');
    onError(null);
    try {
      const res = await fetch(`/api/admin/vendors/${vendorId}/ban`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-csrf-token': getCsrfToken(),
        },
        body: JSON.stringify({ reason: banReason.trim() }),
      });
      if (!res.ok) throw new Error(await res.text());
      onBanApplied();
      onBanOpenChange(false);
      setBanReason('');
    } catch (err) {
      onError(err instanceof Error ? err.message : String(err));
    } finally {
      onLoadingChange(null);
    }
  }

  return (
    <>
      {/* Send Message Dialog */}
      <Dialog
        open={messageOpen}
        onOpenChange={(open) => {
          if (!open) {
            onMessageOpenChange(false);
            setMessageSubject('');
            setMessageBody('');
          }
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{tAdmin('send_message')}</DialogTitle>
            <DialogDescription className="sr-only">
              {tAdmin('message_body_label')}
            </DialogDescription>
          </DialogHeader>
          <Stack gap="4">
            <div>
              <Label htmlFor="detail-msg-subject">{tAdmin('message_subject_label')}</Label>
              <Input
                id="detail-msg-subject"
                value={messageSubject}
                onChange={(e) => setMessageSubject(e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="detail-msg-body">{tAdmin('message_body_label')}</Label>
              <Textarea
                id="detail-msg-body"
                rows={4}
                value={messageBody}
                onChange={(e) => setMessageBody(e.target.value)}
              />
            </div>
          </Stack>
          <DialogFooter>
            <Button
              variant="primary"
              loading={loading === 'send_message'}
              disabled={!messageSubject || !messageBody}
              onClick={handleMessageSend}
            >
              {tAdmin('send_message')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Freeze Dialog */}
      <FreezeDialog
        entityType="vendor"
        entityId={vendorId}
        isOpen={freezeOpen}
        onClose={() => onFreezeOpenChange(false)}
        onSuccess={() => {
          onFreezeApplied();
          onFreezeOpenChange(false);
        }}
        showDuration
        description={tAdmin('freeze_reason_label')}
      />

      {/* Ban Dialog */}
      <Dialog
        open={banOpen}
        onOpenChange={(open) => {
          if (!open) {
            onBanOpenChange(false);
            setBanReason('');
          }
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{tAdmin('ban')}</DialogTitle>
            <DialogDescription className="sr-only">{tAdmin('ban_reason_label')}</DialogDescription>
          </DialogHeader>
          <Stack gap="4">
            <div>
              <Label htmlFor="detail-ban-reason">{tAdmin('ban_reason_label')}</Label>
              <Textarea
                id="detail-ban-reason"
                rows={3}
                value={banReason}
                onChange={(e) => setBanReason(e.target.value)}
                placeholder={tAdmin('ban_reason_placeholder')}
              />
            </div>
          </Stack>
          <DialogFooter>
            <Button
              variant="danger"
              loading={loading === 'ban'}
              disabled={!banReason.trim()}
              onClick={handleBanSubmit}
            >
              {tAdmin('ban')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}