"use client";

import { useMutation, useQueryClient } from "@tanstack/react-query";
import {
  ArrowLeft,
  Banknote,
  Boxes,
  CircleUserRound,
  Clock3,
  FileText,
  History,
  Mail,
  MapPin,
  MessageSquareText,
  PackageCheck,
  Phone,
  RefreshCw,
  ShieldAlert,
  Truck,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import type { OrderDetailsData } from "@/components/dashboard/data-types";
import { usePreferences, useToast } from "@/components/providers/app-providers";

export function OrderDetailsPage({ order }: { order: OrderDetailsData }) {
  const { dictionary: t, locale } = usePreferences();
  const notify = useToast();
  const router = useRouter();
  const queryClient = useQueryClient();
  const copy = t.dashboard.orderDetails;
  const date = new Intl.DateTimeFormat(locale === "ar" ? "ar-EG" : "en-GB", {
    dateStyle: "medium",
    timeStyle: "short",
  });
  const money = (value: string) => new Intl.NumberFormat(locale === "ar" ? "ar-EG" : "en-US", {
    style: "currency",
    currency: order.currency,
    maximumFractionDigits: 2,
  }).format(Number(value));
  const statusLabel = (status: string | null) => status
    ? t.dashboard.status[status as keyof typeof t.dashboard.status] ?? status
    : "—";

  const statusMutation = useMutation({
    mutationFn: async (status: string) => {
      const response = await fetch(`/api/dashboard/orders/${encodeURIComponent(order.id)}/status`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status }),
      });
      const result = await response.json();
      if (!response.ok) throw new Error(result.details || `HTTP ${response.status}`);
      return result;
    },
    onSuccess: async () => {
      notify(copy.updateSuccess, "success");
      await queryClient.invalidateQueries({ queryKey: ["orders"] });
      router.refresh();
    },
    onError: (error) => notify(`${copy.updateFailed}: ${error.message}`, "error"),
  });

  return (
    <div className="data-page order-details-page">
      <Link className="back-link" href="/board"><ArrowLeft size={15} />{copy.back}</Link>
      <header className="order-detail-header data-panel">
        <div>
          <div className="order-heading-line">
            <span className={`order-status status-chip-${order.status.toLowerCase()}`}>{statusLabel(order.status)}</span>
            <span className={`risk-chip risk-${order.riskLevel.toLowerCase()}`}>
              {t.dashboard.board.riskLevels[order.riskLevel as keyof typeof t.dashboard.board.riskLevels]} · {order.riskScore}
            </span>
          </div>
          <p className="eyebrow">{copy.eyebrow}</p>
          <h1 className="mono">{order.id}</h1>
          <p>{copy.createdAt} {date.format(new Date(order.createdAt))} · {copy.source}: {order.source}</p>
        </div>
        <div className="order-detail-actions">
          {order.awbNumber ? (
            <a className="secondary-button" href={`/api/labels/${encodeURIComponent(order.awbNumber)}`} target="_blank" rel="noreferrer">
              <FileText size={15} />{copy.openLabel}
            </a>
          ) : null}
          <select
            value={order.status}
            disabled={statusMutation.isPending || order.allowedTransitions.length === 0}
            onChange={(event) => statusMutation.mutate(event.target.value)}
            aria-label={copy.changeStatus}
          >
            <option value={order.status}>{statusLabel(order.status)}</option>
            {order.allowedTransitions.map((status) => <option value={status} key={status}>{statusLabel(status)}</option>)}
          </select>
          {statusMutation.isPending ? <RefreshCw className="spin" size={15} /> : null}
        </div>
      </header>

      <section className="summary-grid order-summary-grid">
        <Summary icon={Banknote} label={copy.cod} value={money(order.codAmount)} tone="green" />
        <Summary icon={Truck} label={copy.carrier} value={order.carrier ?? copy.notAssigned} tone="blue" />
        <Summary icon={FileText} label={copy.awb} value={order.awbNumber ?? copy.draft} tone="cyan" mono />
        <Summary icon={Boxes} label={copy.inventory} value={order.inventoryReserved ? copy.reserved : copy.settled} tone="violet" />
      </section>

      <section className="order-details-grid">
        <div className="order-main-column">
          <DetailPanel icon={CircleUserRound} title={copy.customer} subtitle={copy.customerSubtitle}>
            <div className="customer-detail-grid">
              <DetailValue label={copy.name} value={order.customer.name} />
              <DetailValue label={copy.phone} value={order.customer.phoneE164} icon={Phone} mono />
              <DetailValue label={copy.email} value={order.customer.email ?? "—"} icon={Mail} />
              <DetailValue label={copy.preferredChannel} value={copy.channels[order.customer.preferredChannel as keyof typeof copy.channels] ?? order.customer.preferredChannel} />
            </div>
            <div className="customer-history-stats">
              <span><strong>{order.customer.ordersTotal}</strong>{copy.totalOrders}</span>
              <span><strong>{order.customer.delivered}</strong>{copy.delivered}</span>
              <span><strong>{order.customer.cancelled}</strong>{copy.cancelled}</span>
              <span><strong>{order.customer.returned}</strong>{copy.returned}</span>
            </div>
          </DetailPanel>

          <DetailPanel icon={MapPin} title={copy.delivery} subtitle={copy.deliverySubtitle}>
            <p className="full-address">{order.addressRaw || order.addressLine}</p>
            <div className="customer-detail-grid">
              <DetailValue label={copy.city} value={order.city ?? "—"} />
              <DetailValue label={copy.governorate} value={order.governorate ?? "—"} />
              <DetailValue label={copy.country} value={order.country} mono />
              <DetailValue label={copy.zone} value={order.zone ?? "—"} />
            </div>
          </DetailPanel>

          <DetailPanel icon={PackageCheck} title={copy.items} subtitle={copy.itemsSubtitle}>
            <div className="data-table-wrap">
              <table className="data-table order-items-table">
                <thead><tr><th>{copy.sku}</th><th>{copy.item}</th><th>{copy.quantity}</th><th>{copy.unitPrice}</th><th>{copy.total}</th></tr></thead>
                <tbody>{order.items.map((item) => (
                  <tr key={item.sku}>
                    <td><strong className="mono">{item.sku}</strong></td>
                    <td>{item.name}</td>
                    <td>{item.qty}</td>
                    <td>{money(item.unitPrice)}</td>
                    <td><strong>{money(String(Number(item.unitPrice) * item.qty))}</strong></td>
                  </tr>
                ))}</tbody>
              </table>
            </div>
            <dl className="payment-summary">
              <div><dt>{copy.subtotal}</dt><dd>{money(order.subtotal)}</dd></div>
              <div><dt>{copy.shippingFee}</dt><dd>{money(order.shippingFee)}</dd></div>
              <div><dt>{copy.discount}</dt><dd>- {money(order.discount)}</dd></div>
              <div className="payment-total"><dt>{copy.cod}</dt><dd>{money(order.codAmount)}</dd></div>
            </dl>
          </DetailPanel>

          <DetailPanel icon={History} title={copy.timeline} subtitle={copy.timelineSubtitle}>
            <div className="order-timeline">
              {order.events.map((event) => (
                <article key={event.id}>
                  <i />
                  <div>
                    <div><strong>{event.type}</strong><time>{date.format(new Date(event.createdAt))}</time></div>
                    <p>{event.message}</p>
                    <small>{event.fromStatus ? `${statusLabel(event.fromStatus)} → ` : ""}{statusLabel(event.toStatus)} · {event.actor}</small>
                  </div>
                </article>
              ))}
              {order.events.length === 0 ? <p className="detail-empty">{copy.noEvents}</p> : null}
            </div>
          </DetailPanel>
        </div>

        <aside className="order-side-column">
          <DetailPanel icon={ShieldAlert} title={copy.risk} subtitle={copy.riskSubtitle}>
            <div className="risk-score-display">
              <strong>{order.riskScore}</strong><span>/ 100</span>
              <small className={`risk-${order.riskLevel.toLowerCase()}`}>{t.dashboard.board.riskLevels[order.riskLevel as keyof typeof t.dashboard.board.riskLevels]}</small>
            </div>
            <div className="risk-reasons">
              {order.riskReasons.map((reason, index) => (
                <div key={`${reason.code}-${index}`}><strong>{reason.code}</strong>{reason.detail ? <span>{reason.detail}</span> : null}{reason.points !== null ? <em>+{reason.points}</em> : null}</div>
              ))}
              {order.riskReasons.length === 0 ? <p className="detail-empty">{copy.noRiskReasons}</p> : null}
            </div>
          </DetailPanel>

          <DetailPanel icon={Truck} title={copy.shipment} subtitle={copy.shipmentSubtitle}>
            <div className="detail-list">
              <DetailValue label={copy.carrier} value={order.carrier ?? copy.notAssigned} />
              <DetailValue label={copy.service} value={order.carrierService ?? "—"} />
              <DetailValue label={copy.awb} value={order.awbNumber ?? copy.draft} mono />
              {order.trackingUrl ? <a className="table-link" href={order.trackingUrl} target="_blank" rel="noreferrer">{copy.openTracking}</a> : null}
            </div>
            <div className="compact-events">
              {order.shipmentEvents.map((event) => <div key={event.id}><Truck size={13} /><span><strong>{event.status}</strong><small>{event.location ?? event.carrier} · {date.format(new Date(event.occurredAt))}</small></span></div>)}
              {order.shipmentEvents.length === 0 ? <p className="detail-empty">{copy.noShipmentEvents}</p> : null}
            </div>
          </DetailPanel>

          <DetailPanel icon={MessageSquareText} title={copy.conversations} subtitle={copy.conversationsSubtitle}>
            <div className="conversation-thread">
              {order.conversations.map((message) => (
                <article className={`conversation-message message-${message.direction.toLowerCase()}`} key={message.id}>
                  <div><strong>{t.dashboard.aiLogs.channels[message.channel as keyof typeof t.dashboard.aiLogs.channels] ?? message.channel}</strong><time>{date.format(new Date(message.createdAt))}</time></div>
                  <p>{message.transcript || message.content || t.dashboard.aiLogs.noContent}</p>
                  {message.intent ? <small>{copy.intent}: {message.intent}</small> : null}
                </article>
              ))}
              {order.conversations.length === 0 ? <p className="detail-empty">{copy.noConversations}</p> : null}
            </div>
          </DetailPanel>

          <DetailPanel icon={Clock3} title={copy.inventoryMovements} subtitle={copy.inventoryMovementsSubtitle}>
            <div className="compact-events">
              {order.inventoryMovements.map((movement) => (
                <div key={movement.id}><Boxes size={13} /><span><strong>{t.dashboard.inventory.movementTypes[movement.type as keyof typeof t.dashboard.inventory.movementTypes] ?? movement.type} · {movement.sku}</strong><small>{movement.qty} · {date.format(new Date(movement.createdAt))}</small></span></div>
              ))}
              {order.inventoryMovements.length === 0 ? <p className="detail-empty">{copy.noInventoryMovements}</p> : null}
            </div>
          </DetailPanel>

          <DetailPanel icon={History} title={copy.previousOrders} subtitle={copy.previousOrdersSubtitle}>
            <div className="previous-orders">
              {order.customer.previousOrders.map((previousOrder) => (
                <Link href={`/orders/${encodeURIComponent(previousOrder.id)}`} key={previousOrder.id}>
                  <span><strong className="mono">{previousOrder.id}</strong><small>{date.format(new Date(previousOrder.createdAt))}</small></span>
                  <span>{statusLabel(previousOrder.status)}<small>{money(previousOrder.codAmount)}</small></span>
                </Link>
              ))}
            </div>
          </DetailPanel>
        </aside>
      </section>
    </div>
  );
}

function Summary({ icon: Icon, label, value, tone, mono = false }: { icon: typeof Banknote; label: string; value: string; tone: string; mono?: boolean }) {
  return <article className={`summary-card tone-${tone}`}><span><Icon size={19} /></span><div><small>{label}</small><strong className={mono ? "mono" : ""}>{value}</strong></div></article>;
}

function DetailPanel({ icon: Icon, title, subtitle, children }: { icon: typeof Banknote; title: string; subtitle: string; children: React.ReactNode }) {
  return <section className="data-panel detail-panel"><header className="panel-heading"><div><Icon size={18} /><div><h2>{title}</h2><p>{subtitle}</p></div></div></header><div className="detail-panel-body">{children}</div></section>;
}

function DetailValue({ label, value, icon: Icon, mono = false }: { label: string; value: string; icon?: typeof Phone; mono?: boolean }) {
  return <div className="detail-value">{Icon ? <Icon size={13} /> : null}<span><small>{label}</small><strong className={mono ? "mono" : ""}>{value}</strong></span></div>;
}