'use client';
import { ErrorState } from '@/components/ui/feedback/ErrorState';

/**
 * AdminTicketDetail — 2-column admin view for a support ticket.
 * Left: thread + composer; Right: context panel + actions.
 */

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { HydratedIsland } from '@/components/HydratedIsland';
import { useT } from '@/lib/i18n/react';
import { SupportThread } from '@/components/ui/domain/support/SupportThread';
import { SupportMessageComposer } from '@/components/ui/domain/support/SupportMessageComposer';
import { Button } from '@/components/ui/primitives/Button';
import { Badge } from '@/components/ui/primitives/Badge';
import { ConfidenceBar } from '@/components/ui/primitives/ConfidenceBar';
import { CaseDetailSkeleton } from '@/components/ui/feedback/Skeleton';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { Grid } from '@/components/ui/layout/Grid';
import { Stack } from '@/components/ui/layout/Stack';
import { Row } from '@/components/ui/layout/Row';
import { Breadcrumb } from '@/components/ui/layout/Breadcrumb/Breadcrumb';
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from '@/components/ui/overlays/AlertDialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/primitives/Select';
import { Label } from '@/components/ui/primitives/Label';
import { ContextPanel } from './internals/ContextPanel';
import { AdminRefundDialog } from './internals/AdminRefundDialog';
import {
  fetchAdminSupportTicketDetail,
  useClaim,
  useClose,
  usePostMessage,
} from './internals/useAdminSupport';
import type { AIInterventionView } from '@/server/support/types';
import { QueryBoundary } from '@platform-modules/ui-primitives';

function aiDecisionLabel(decision: string, tNav: (key: string) => string): string {
  switch (decision) {
    case 'propose':
      return tNav('ai_decision_propose');
    case 'act':
      return tNav('ai_decision_act');
    case 'escalate':
      return tNav('ai_decision_escalate');
    default:
      return decision;
  }
}

function TicketDetailInner({ parentId }: { parentId: string }) {
  const t = useT('admin');
  const tCommon = useT('common');
  const ts = t('support') as unknown as Record<string, string>;
  const tNav = useT('admin_support');
  const [visibility, setVisibility] = useState<'public' | 'site_internal'>('public');
  const [confirmClose, setConfirmClose] = useState(false);
  const [closeError, setCloseError] = useState<string | null>(null);
  const [aiRecDismissed, setAiRecDismissed] = useState(false);
  const [showRefundDialog, setShowRefundDialog] = useState(false);

  const ticketQuery = useQuery({
    queryKey: ['admin-support', 'ticket', parentId],
    queryFn: () => fetchAdminSupportTicketDetail(parentId),
    retry: 3,
    retryDelay: 1000,
  });

  const claim = useClaim('ticket', parentId);
  const close = useClose('ticket', parentId);
  const postMessage = usePostMessage('ticket', parentId);

  return (
    <QueryBoundary
      query={ticketQuery}
      skeleton={<CaseDetailSkeleton />}
      errorFallback={() => (
        <ErrorState
          title={ts.ticket_load_error ?? tCommon('error_loading')}
          action={
            <Button variant="secondary" size="sm" onClick={() => ticketQuery.refetch()}>
              {tCommon('retry')}
            </Button>
          }
        />
      )}
    >
      {(data) => {
        const ticket = data.ticket;
        if (!ticket) return <InlineNotice tone="danger" title="Not found" />;
        const isClosed = ticket.status === 'closed' || ticket.status === 'resolved';
        const isClaimed = !!ticket.assignedAgentId;
        const interventions = (data.interventions ?? []) as unknown as AIInterventionView[];
        const latestIntervention =
          interventions.length > 0 ? interventions[interventions.length - 1] : null;
        const showAiRec =
          !aiRecDismissed &&
          latestIntervention?.decision === 'propose' &&
          latestIntervention.output != null;
        const breadcrumbItems = [
          { label: ts.breadcrumb_admin ?? 'Admin', href: '/admin' },
          { label: ts.breadcrumb_support ?? 'Support', href: '/admin/support/inbox' },
          { label: `${ts.breadcrumb_ticket ?? 'Ticket'} #${parentId.slice(0, 8)}` },
        ];

        return (
          <Stack gap="4">
            <Breadcrumb items={breadcrumbItems} />

            <Grid cols={3} gap="6">
              {/* Left: thread + composer */}
              <div className="md:col-span-2">
                <Stack gap="4">
                  <SupportThread
                    messages={(data?.messages ?? []) as never[]}
                    attachments={(data?.attachments ?? []) as never[]}
                    viewerRole="admin"
                  />
                  {!isClosed && (
                    <div>
                      <div className="mb-2">
                        <Label className="mb-1 block text-xs">{ts.composer_visibility_label}</Label>
                        <Select
                          value={visibility}
                          onValueChange={(v) => setVisibility(v as 'public' | 'site_internal')}
                        >
                          <SelectTrigger className="w-48" aria-label={ts.composer_visibility_label}>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="public">{ts.visibility_public}</SelectItem>
                            <SelectItem value="site_internal">
                              {ts.visibility_site_internal}
                            </SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <SupportMessageComposer
                        ticketStatus={ticket.status}
                        parentId={parentId}
                        parentType="ticket"
                        onSubmit={async (body) => {
                          await postMessage.mutateAsync({
                            text: body,
                            visibility,
                            attachmentIds: [],
                          });
                          await ticketQuery.refetch();
                        }}
                      />
                    </div>
                  )}
                </Stack>
              </div>

              {/* Right: context + actions */}
              <aside>
                <Stack gap="4">
                  <Stack gap="2">
                    {!isClaimed && (
                      <Button
                        variant="primary"
                        size="sm"
                        aria-label={ts.action_claim}
                        title={ts.action_claim}
                        disabled={claim.isPending}
                        onClick={() => claim.mutate()}
                      >
                        {claim.isPending ? `${ts.action_claim}…` : ts.action_claim}
                      </Button>
                    )}
                    {!isClosed && (
                      <Button
                        variant="ghost"
                        size="sm"
                        data-testid="close-ticket-btn"
                        onClick={() => {
                          setCloseError(null);
                          setConfirmClose(true);
                        }}
                      >
                        {ts.action_close}
                      </Button>
                    )}
                    {closeError && (
                      <div role="alert" className="text-danger-600 text-sm">
                        {closeError}
                      </div>
                    )}
                  </Stack>

                  {showAiRec && latestIntervention && (
                    <div className="border-border-default rounded-lg border p-4">
                      <Stack gap="3">
                        <Row gap="2" align="center">
                          <Badge tone="info" size="sm">
                            {tNav('ai_rec_title')}
                          </Badge>
                          <Badge tone="neutral" size="sm">
                            {aiDecisionLabel(latestIntervention.decision, (k) => tNav(k as never))}
                          </Badge>
                        </Row>
                        <div>
                          <p className="text-text-muted mb-1 text-xs font-medium">
                            {tNav('ai_rec_reasoning')}
                          </p>
                          <p className="text-sm">{latestIntervention.output}</p>
                        </div>
                        {latestIntervention.confidence != null && (
                          <div>
                            <p className="text-text-muted mb-1 text-xs font-medium">
                              {tNav('ai_rec_confidence')}
                            </p>
                            <ConfidenceBar value={latestIntervention.confidence} />
                          </div>
                        )}
                        <Row gap="2">
                          <Button
                            variant="primary"
                            size="sm"
                            disabled={!ticket.relatedPurchaseId}
                            title={
                              !ticket.relatedPurchaseId ? tNav('ai_rec_no_purchase') : undefined
                            }
                            onClick={() => setShowRefundDialog(true)}
                          >
                            {tNav('ai_rec_execute_refund')}
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            title={tNav('ai_rec_dismiss_short')}
                            onClick={() => setAiRecDismissed(true)}
                          >
                            {tNav('ai_rec_dismiss_short')}
                          </Button>
                        </Row>
                      </Stack>
                    </div>
                  )}

                  <ContextPanel
                    parentType="ticket"
                    parentId={parentId}
                    purchaseId={ticket.relatedPurchaseId}
                    customerId={ticket.openerId}
                    vendorId={ticket.vendorId}
                    vendorName={data?.vendor?.displayName}
                    vendorBusinessName={data?.vendor?.businessName}
                    userTicketCount={data?.customer?.openTickets}
                    userPurchaseCount={data?.customer?.purchaseCount}
                    vendorOpenCaseCount={data?.vendor?.openCaseCount}
                    vendorActiveDealCount={data?.vendor?.activeDealCount}
                    ticketOpenedAt={data?.stats?.openedAt}
                    firstResponseMs={data?.stats?.firstResponseMs}
                    avgFirstResponseMs={data?.stats?.avgFirstResponseMs}
                    messageCount={data?.stats?.messageCount}
                    attachments={(data?.attachments ?? []) as never[]}
                    interventions={(data?.interventions ?? []) as never[]}
                    transitions={(data?.transitions ?? []) as never[]}
                  />
                </Stack>
              </aside>

              {ticket.relatedPurchaseId && (
                <AdminRefundDialog
                  open={showRefundDialog}
                  onOpenChange={setShowRefundDialog}
                  caseId={parentId}
                  purchaseId={ticket.relatedPurchaseId}
                  maxAmountCents={200_000}
                  onSuccess={() => void ticketQuery.refetch()}
                />
              )}

              <AlertDialog open={confirmClose} onOpenChange={setConfirmClose}>
                <AlertDialogContent>
                  <AlertDialogTitle>{ts.confirm_close_ticket_title}</AlertDialogTitle>
                  <AlertDialogDescription>{ts.confirm_close_ticket_body}</AlertDialogDescription>
                  <AlertDialogCancel>{ts.kb_cancel}</AlertDialogCancel>
                  <AlertDialogAction
                    data-testid="close-ticket-confirm-btn"
                    onClick={async () => {
                      try {
                        await close.mutateAsync();
                        setConfirmClose(false);
                        await ticketQuery.refetch();
                      } catch (err) {
                        setCloseError(
                          err instanceof Error ? err.message : (ts.error_generic ?? 'Failed'),
                        );
                        setConfirmClose(false);
                      }
                    }}
                  >
                    {ts.action_close}
                  </AlertDialogAction>
                </AlertDialogContent>
              </AlertDialog>
            </Grid>
          </Stack>
        );
      }}
    </QueryBoundary>
  );
}

export function AdminTicketDetail({ parentId }: { parentId: string }) {
  return (
    <HydratedIsland>
      <TicketDetailInner parentId={parentId} />
    </HydratedIsland>
  );
}