'use client';
import { FunctionComponent, useState } from 'react';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import MenuItem from '@mui/material/MenuItem';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { useLocale, useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import AppButton from '@/components/common/AppButton';
import { AppIcon } from '@/components/common';
import { ticketThreadPath } from '@/constants';
import { useOpenTicket } from '@/services/tickets';
import type { OpenTicketResult, TicketCategory } from '@/services/tickets/types';

export interface ContactSupportDialogProps {
  open: boolean;
  onClose: () => void;
  /** Which shell to route the new thread into on success. */
  role: 'customer' | 'nurse';
  /** Pre-link the ticket to a booking (from the booking-detail entry point). */
  bookingId?: number | null;
  /** Initial category — `coordination` from a booking, else `support`. */
  defaultCategory?: TicketCategory;
}

/** Categories a user may open directly (refund is staff-linked; emergency uses its own flow). */
const OPENABLE_CATEGORIES: TicketCategory[] = ['support', 'coordination'];

/**
 * The "Contact support" flow — open a new ticket (category select → subject/message → submit) and, on
 * success, show the new **`referenceCode`** with a link to the thread. Used from the inbox and the
 * booking-detail entry point (pre-linked to a `bookingId`; the mock's coordination idempotency **jumps to the
 * existing coordination thread** rather than duplicating). Domain 4xx keep the draft (never cleared on
 * failure). On success the inbox is invalidated, so the new ticket appears at the top without a manual refresh.
 * @component ContactSupportDialog
 */
const ContactSupportDialog: FunctionComponent<ContactSupportDialogProps> = ({
  open,
  onClose,
  role,
  bookingId,
  defaultCategory = 'support',
}) => {
  const t = useTranslations('tickets');
  const locale = useLocale();
  const router = useRouter();
  const openTicket = useOpenTicket();

  const [category, setCategory] = useState<TicketCategory>(defaultCategory);
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');
  const [created, setCreated] = useState<OpenTicketResult | null>(null);

  const reset = () => {
    setSubject('');
    setBody('');
    setCreated(null);
    setCategory(defaultCategory);
    openTicket.reset();
  };

  const handleClose = () => {
    reset();
    onClose();
  };

  const submit = () => {
    const trimmed = body.trim();
    if (!trimmed || openTicket.isPending) return;
    openTicket.mutate(
      { category, subject: subject.trim() || null, body: trimmed, bookingId: bookingId ?? null },
      { onSuccess: (result) => setCreated(result) },
    );
  };

  const goToThread = () => {
    if (!created) return;
    router.push(`/${locale}${ticketThreadPath(role, created.ticketId)}`);
    handleClose();
  };

  return (
    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
      {created ? (
        <>
          <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <AppIcon icon="verified" size={22} color="var(--bal-success)" />
            {t('created_title')}
          </DialogTitle>
          <DialogContent>
            <Stack sx={{ gap: 1 }}>
              <Typography variant="body2" sx={{ color: 'var(--bal-text-secondary)' }}>
                {t('created_body')}
              </Typography>
              <Stack direction="row" sx={{ gap: 1, alignItems: 'center' }}>
                <Typography variant="caption" sx={{ color: 'var(--bal-text-secondary)' }}>
                  {t('ref_code_label')}
                </Typography>
                <Typography variant="subtitle1" sx={{ fontWeight: 800, letterSpacing: 0.5, direction: 'ltr' }}>
                  {created.referenceCode}
                </Typography>
              </Stack>
            </Stack>
          </DialogContent>
          <DialogActions>
            <AppButton variant="text" color="primary" onClick={handleClose}>
              {t('close')}
            </AppButton>
            <AppButton variant="contained" color="primary" onClick={goToThread}>
              {t('view_thread')}
            </AppButton>
          </DialogActions>
        </>
      ) : (
        <>
          <DialogTitle>{t('new_ticket_title')}</DialogTitle>
          <DialogContent>
            <Stack sx={{ gap: 2, pt: 1 }}>
              <TextField
                select
                label={t('category_label')}
                value={category}
                onChange={(event) => setCategory(event.target.value as TicketCategory)}
                fullWidth
                size="small"
              >
                {OPENABLE_CATEGORIES.map((code) => (
                  <MenuItem key={code} value={code}>
                    {t(`category_${code}`)}
                  </MenuItem>
                ))}
              </TextField>
              <TextField
                label={t('subject_label')}
                value={subject}
                onChange={(event) => setSubject(event.target.value)}
                fullWidth
                size="small"
              />
              <TextField
                label={t('message_label')}
                value={body}
                onChange={(event) => setBody(event.target.value)}
                fullWidth
                required
                multiline
                minRows={3}
                size="small"
              />
              {openTicket.isError ? (
                <Typography variant="caption" sx={{ color: 'var(--bal-error)' }}>
                  {t('open_failed')}
                </Typography>
              ) : null}
            </Stack>
          </DialogContent>
          <DialogActions>
            <AppButton variant="text" color="primary" onClick={handleClose}>
              {t('cancel')}
            </AppButton>
            <AppButton
              variant="contained"
              color="primary"
              onClick={submit}
              disabled={openTicket.isPending || body.trim().length === 0}
            >
              {openTicket.isPending ? t('submitting') : t('submit')}
            </AppButton>
          </DialogActions>
        </>
      )}
    </Dialog>
  );
};

export default ContactSupportDialog;
