"use client";

import { Building2, CalendarDays, CircleDot, Flag, Mail, MessagesSquare, Phone, Tag, UserRound } from "lucide-react";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { useApiMutation } from "@/presentation/hooks/use-api-mutation";
import { useAuth } from "@/presentation/hooks/use-auth";
import { useRepositories } from "@/di/repository-provider";
import { HistoryTimeline } from "@/presentation/components/tickets/history-timeline";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/presentation/components/ui/select";
import { useT, useLocale } from "@/shared/i18n/client";
import { formatDateTime } from "@/shared/lib/format-date";
import { cn } from "@/shared/lib/utils";
import { displayName } from "@/shared/lib/user-display";
import { TICKET_STATUS_COLORS } from "@/shared/constants/status-colors";
import { PersonAvatar } from "./person-avatar";
import { formatListTime, lastMessagePreview, parseDate } from "./support-utils";
import type { TicketDetail } from "@/domain/entities/ticket";

interface ClientPanelProps {
  detail: TicketDetail;
  onOpenConversation: (id: number) => void;
  onUpdated: () => void;
  activityToken: number;
}

export function ClientPanel({ detail, onOpenConversation, onUpdated, activityToken }: ClientPanelProps) {
  const t = useT();
  const locale = useLocale();
  const container = useRepositories();
  const { user, hasPermission } = useAuth();
  const canManage = hasPermission("tickets.manage");
  const client = detail.created_by;

  const { data: others } = useApiQuery(
    () => container.ticketRepository.findAll({ created_by: client?.id, order_by: "last_activity", per_page: 6 }),
    { deps: [client?.id, detail.id, activityToken], enabled: !!client?.id },
  );
  const { data: categories } = useApiQuery(() => container.ticketRepository.getCategories(), { deps: [] });
  const { data: priorities } = useApiQuery(() => container.ticketRepository.getPriorityOptions(), { deps: [] });

  const update = useApiMutation(
    (data: { priority?: string; category_id?: number }) => container.ticketRepository.update(detail.id, data),
    { successMessage: t.tickets.toasts.updated, onSuccess: onUpdated },
  );

  const otherConversations = (others?.items ?? []).filter((c) => c.id !== detail.id).slice(0, 5);

  return (
    <aside className="flex h-full min-h-0 flex-col overflow-y-auto border-l border-border bg-card">
      <section className="flex shrink-0 flex-col items-center gap-2 border-b border-border px-5 pb-5 pt-6 text-center">
        <PersonAvatar name={client?.name} email={client?.email} initials={client?.initials} avatarUrl={client?.avatar_url} size={64} />
        <div>
          <p className="text-sm font-semibold text-foreground">{client ? displayName(client) : "—"}</p>
          <p className="text-xs text-muted-foreground">{detail.company?.name}</p>
        </div>
        <div className="mt-1 w-full space-y-1.5 text-left">
          {client?.email && (
            <InfoLine icon={Mail}>
              <a href={`mailto:${client.email}`} className="truncate hover:text-primary">{client.email}</a>
            </InfoLine>
          )}
          {client?.phone && (
            <InfoLine icon={Phone}>
              <a href={`tel:${client.phone}`} className="hover:text-primary">{client.phone}</a>
            </InfoLine>
          )}
          {detail.company && (
            <InfoLine icon={Building2}>
              <span className="truncate">{detail.company.name}</span>
            </InfoLine>
          )}
          <InfoLine icon={MessagesSquare}>{t.support.panel.conversationsCount(detail.client_conversations_count ?? 1)}</InfoLine>
        </div>
      </section>

      <section className="shrink-0 space-y-3 border-b border-border px-5 py-4">
        <h4 className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{t.support.panel.details}</h4>
        <DetailRow icon={CircleDot} label={t.support.panel.status}>
          <span className={cn("rounded-full px-2 py-0.5 text-[11px] font-medium", TICKET_STATUS_COLORS[detail.status.key])}>
            {t.support.statuses[detail.status.key] ?? (locale === "en" ? detail.status.label_en : detail.status.label)}
          </span>
        </DetailRow>
        <DetailRow icon={UserRound} label={t.support.panel.assignee}>
          {detail.assignee ? (
            <span className="flex items-center gap-1.5">
              <PersonAvatar name={detail.assignee.name} email={detail.assignee.email} initials={detail.assignee.initials} size={18} />
              <span className="truncate">{detail.assignee.id === user?.id ? t.support.you : displayName(detail.assignee)}</span>
            </span>
          ) : (
            <span className="italic text-muted-foreground">{t.support.unassigned}</span>
          )}
        </DetailRow>
        <DetailRow icon={Flag} label={t.support.panel.priority}>
          <Select
            value={detail.priority.key}
            disabled={!canManage || update.loading}
            onValueChange={(value) => update.mutate({ priority: value })}
          >
            <SelectTrigger size="sm" className="h-7 w-full border-none bg-muted/50 text-xs shadow-none">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {(priorities ?? []).map((option) => (
                <SelectItem key={option.value} value={option.value}>
                  {locale === "en" ? option.label_en : option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </DetailRow>
        <DetailRow icon={Tag} label={t.support.panel.category}>
          <Select
            value={detail.category ? String(detail.category.id) : undefined}
            disabled={!canManage || update.loading}
            onValueChange={(value) => update.mutate({ category_id: Number(value) })}
          >
            <SelectTrigger size="sm" className="h-7 w-full border-none bg-muted/50 text-xs shadow-none">
              <SelectValue placeholder={t.support.panel.noCategory} />
            </SelectTrigger>
            <SelectContent>
              {(categories ?? []).map((category) => (
                <SelectItem key={category.id} value={String(category.id)}>
                  {locale === "en" ? category.label_en : category.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </DetailRow>
        <DetailRow icon={CalendarDays} label={t.support.panel.createdAt}>
          {formatDateTime(parseDate(detail.created_at), locale)}
        </DetailRow>
      </section>

      <section className="shrink-0 border-b border-border px-5 py-4">
        <h4 className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{t.support.panel.otherConversations}</h4>
        {otherConversations.length === 0 ? (
          <p className="text-xs text-muted-foreground">{t.support.panel.noOtherConversations}</p>
        ) : (
          <ul className="-mx-2 space-y-0.5">
            {otherConversations.map((conversation) => (
              <li key={conversation.id}>
                <button
                  type="button"
                  onClick={() => onOpenConversation(conversation.id)}
                  className="w-full rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-muted"
                >
                  <div className="flex items-center gap-2">
                    <span className="truncate text-xs font-medium text-foreground">{conversation.title}</span>
                    <span className="ml-auto shrink-0 text-[10px] text-muted-foreground">
                      {formatListTime(conversation.last_message_at ?? parseDate(conversation.created_at).toISOString(), t, locale)}
                    </span>
                  </div>
                  <p className="truncate text-[11px] text-muted-foreground">
                    {lastMessagePreview(conversation.last_message, user?.id, t) || (locale === "en" ? conversation.status.label_en : conversation.status.label)}
                  </p>
                </button>
              </li>
            ))}
          </ul>
        )}
      </section>

      <section className="shrink-0 px-3 py-3 [&_[data-slot=card]]:border-none [&_[data-slot=card]]:shadow-none">
        <HistoryTimeline ticketId={detail.id} refreshToken={activityToken} pageSize={10} />
      </section>
    </aside>
  );
}

function InfoLine({ icon: Icon, children }: { icon: React.ComponentType<{ className?: string }>; children: React.ReactNode }) {
  return (
    <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
      <Icon className="h-3.5 w-3.5 shrink-0" />
      <span className="flex min-w-0 items-center">{children}</span>
    </div>
  );
}

function DetailRow({ icon: Icon, label, children }: { icon: React.ComponentType<{ className?: string }>; label: string; children: React.ReactNode }) {
  return (
    <div className="grid grid-cols-[110px_1fr] items-center gap-2 text-xs">
      <span className="flex items-center gap-1.5 text-muted-foreground">
        <Icon className="h-3.5 w-3.5" /> {label}
      </span>
      <div className="min-w-0 text-foreground">{children}</div>
    </div>
  );
}