"use client";

import Link from "next/link";
import { Bell, Headphones, User } from "lucide-react";

import { Button } from "@/components/ui/button";
import { CloseComplaintDialog } from "@/components/customer-service/CloseComplaintDialog";
import { ComplaintsHistory } from "@/components/customer-service/ComplaintsHistory";
import { CustomerContextCard } from "@/components/customer-service/CustomerContextCard";
import { CustomerSearchCard } from "@/components/customer-service/CustomerSearchCard";
import { CustomerServiceEmptyState } from "@/components/customer-service/CustomerServiceEmptyState";
import { ObservationDialog } from "@/components/customer-service/ObservationDialog";
import { RecentSalesCard } from "@/components/customer-service/RecentSalesCard";
import { TicketForm } from "@/components/customer-service/TicketForm";
import { useCustomerService } from "@/hooks/useCustomerService";
import { createPanelPageUrl } from "@/utils";

export default function CustomerService() {
  const cs = useCustomerService();

  return (
    <div className="min-h-screen bg-slate-50/80 p-4 lg:p-8 space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <div className="flex items-center gap-3">
          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-600 text-white shadow-sm">
            <Headphones className="h-5 w-5" />
          </div>
          <div>
            <h1 className="text-2xl font-bold tracking-tight text-slate-900">
              Atención y Reclamos
            </h1>
            <p className="text-sm text-slate-500">Gestión centralizada de tickets</p>
          </div>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <Button
            className="rounded-xl shadow-sm"
            disabled={!cs.hasSelectedComplaintId}
            type="button"
            variant="outline"
            onClick={() => cs.setCloseOpen(true)}
          >
            Cerrar Reclamo
          </Button>
          <Button
            className="rounded-xl shadow-sm"
            disabled={!cs.hasSelectedComplaintId}
            type="button"
            variant="outline"
            onClick={() => void cs.handleChangeStatusOnly()}
          >
            Cambiar Estado
          </Button>
          <Button
            className="rounded-xl border-blue-200 text-blue-700 shadow-sm hover:bg-blue-50"
            type="button"
            variant="outline"
            onClick={cs.openNewComplaint}
          >
            Crear Reclamo
          </Button>
          <Button className="rounded-xl shadow-sm" size="icon" variant="ghost" type="button">
            <Bell className="h-5 w-5 text-slate-600" />
          </Button>
          <Button className="rounded-xl shadow-sm" size="icon" variant="ghost" type="button">
            <User className="h-5 w-5 text-slate-600" />
          </Button>
        </div>
      </div>

      <CustomerSearchCard
        searchInput={cs.searchInput}
        onSearchInputChange={cs.setSearchInput}
        isSearchingCustomer={cs.isSearchingCustomer}
        onSearchSubmit={cs.onSearchSubmit}
        onSearchKeyDown={cs.onSearchKeyDown}
      />

      {!cs.selectedCustomer ? (
        <CustomerServiceEmptyState />
      ) : (
        <div className="grid grid-cols-12 gap-6">
          <div className="col-span-12 space-y-6 lg:col-span-4">
            <CustomerContextCard
              customer={cs.customer}
              showContextSkeleton={cs.showContextSkeleton}
            />
            <RecentSalesCard
              recentSales={cs.recentSales}
              showContextSkeleton={cs.showContextSkeleton}
            />
            <ComplaintsHistory
              complaintStats={cs.complaintStats}
              customerComplaints={cs.customerComplaints}
              selectedComplaintId={cs.selectedComplaint?.id}
              showComplaintsSkeleton={cs.showComplaintsSkeleton}
              onSelectComplaint={cs.selectComplaint}
            />
          </div>

          <div className="col-span-12 lg:col-span-8">
            <TicketForm
              customer={cs.customer}
              selectedComplaint={cs.selectedComplaint}
              types={cs.types}
              statuses={cs.statuses}
              title={cs.title}
              description={cs.description}
              typeId={cs.typeId}
              statusId={cs.statusId}
              onTitleChange={cs.setTitle}
              onDescriptionChange={cs.setDescription}
              onTypeChange={cs.setTypeId}
              onStatusChange={cs.setStatusId}
              catalogsLoading={cs.catalogsLoading}
              isLoading={cs.showContextSkeleton}
              onSave={cs.handleSaveTicket}
            />
          </div>
        </div>
      )}

      <CloseComplaintDialog
        open={cs.closeOpen}
        onOpenChange={cs.setCloseOpen}
        closeComment={cs.closeComment}
        onCloseCommentChange={cs.setCloseComment}
        onConfirm={cs.handleCloseComplaint}
      />

      <ObservationDialog
        open={cs.observationOpen}
        onOpenChange={cs.setObservationOpen}
        observationText={cs.observationText}
        onObservationTextChange={cs.setObservationText}
        observationInternal={cs.observationInternal}
        onObservationInternalChange={cs.setObservationInternal}
        isSaving={cs.isAddingComment}
        onSave={cs.handleAddObservation}
      />
    </div>
  );
}