'use client';

import Link from 'next/link';
import { useMemo, useState } from 'react';
import { useSuspenseQuery } from '@tanstack/react-query';
import { Icons } from '@/components/icons';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import type { QuotationRelationItem } from '@/features/crm/quotations/api/types';
import { getPipelineStageThaiLabel } from '@/features/crm/shared/terminology';
import { enquiryByIdOptions, enquiryProjectPartiesOptions } from '../api/queries';
import type { EnquiryRecord, EnquiryReferenceData } from '../api/types';
import { EnquiryAssignmentDialog } from './enquiry-assignment-dialog';
import { EnquiryFollowupsTab } from './enquiry-followups-tab';
import { EnquiryFormSheet } from './enquiry-form-sheet';
import { EnquiryStatusBadge } from './enquiry-status-badge';

function FieldItem({ label, value }: { label: string; value: string | null | undefined }) {
  return (
    <div className='space-y-1'>
      <div className='text-muted-foreground text-xs'>{label}</div>
      <div className='text-sm'>{value || '-'}</div>
    </div>
  );
}

function getPipelineStageLabel(stage: EnquiryRecord['pipelineStage']) {
  return getPipelineStageThaiLabel(stage);
}

interface EnquiryDetailProps {
  enquiryId: string;
  referenceData: EnquiryReferenceData;
  relatedQuotations: QuotationRelationItem[];
  workspace: 'lead' | 'enquiry';
  canUpdate: boolean;
  canAssign: boolean;
  canReassign: boolean;
  canViewRelatedQuotations: boolean;
  canManageFollowups: {
    create: boolean;
    update: boolean;
    delete: boolean;
  };
}

export function EnquiryDetail({
  enquiryId,
  referenceData,
  relatedQuotations,
  workspace,
  canUpdate,
  canAssign,
  canReassign,
  canViewRelatedQuotations,
  canManageFollowups
}: EnquiryDetailProps) {
  const { data } = useSuspenseQuery(enquiryByIdOptions(enquiryId));
  const { data: projectPartiesData } = useSuspenseQuery(enquiryProjectPartiesOptions(enquiryId));
  const [editOpen, setEditOpen] = useState(false);
  const [assignmentOpen, setAssignmentOpen] = useState(false);
  const enquiry = data.enquiry;
  const branchMap = useMemo(
    () => new Map(referenceData.branches.map((item) => [item.id, item.name])),
    [referenceData]
  );
  const customerMap = useMemo(
    () => new Map(referenceData.customers.map((item) => [item.id, item])),
    [referenceData]
  );
  const contactMap = useMemo(
    () => new Map(referenceData.contacts.map((item) => [item.id, item])),
    [referenceData]
  );
  const statusMap = useMemo(
    () => new Map(referenceData.statuses.map((item) => [item.id, item])),
    [referenceData]
  );
  const productTypeMap = useMemo(
    () => new Map(referenceData.productTypes.map((item) => [item.id, item])),
    [referenceData]
  );
  const priorityMap = useMemo(
    () => new Map(referenceData.priorities.map((item) => [item.id, item])),
    [referenceData]
  );
  const leadChannelMap = useMemo(
    () => new Map(referenceData.leadChannels.map((item) => [item.id, item])),
    [referenceData]
  );
  const customer = customerMap.get(enquiry.customerId);
  const contact = enquiry.contactId ? contactMap.get(enquiry.contactId) : null;
  const status = statusMap.get(enquiry.status);
  const canManageAssignment = enquiry.assignedToUserId ? canReassign : canAssign;
  const assignmentMode = enquiry.assignedToUserId ? 'reassign' : 'assign';
  const pipelineStageLabel = getPipelineStageLabel(enquiry.pipelineStage);
  const isLeadWorkspace = workspace === 'lead';
  const backHref = isLeadWorkspace ? '/dashboard/crm/leads' : '/dashboard/crm/enquiries';
  const recordLabel = isLeadWorkspace ? 'ลีด' : 'โอกาสขาย';
  const ownerLabel = isLeadWorkspace ? 'ฝ่ายขายที่รับผิดชอบ' : 'ผู้ดูแลโอกาสขาย';
  const infoCardTitle = isLeadWorkspace ? 'ข้อมูลลีด' : 'ข้อมูลโอกาสขาย';
  const infoCardDescription = isLeadWorkspace
    ? 'ที่มาของลีด ข้อมูลการคัดกรอง และความพร้อมในการส่งต่อให้ฝ่ายขาย'
    : 'ขอบเขตงาน ข้อมูลผู้รับผิดชอบ และรายละเอียดการดูแลของฝ่ายขาย';
  const assignmentButtonLabel =
    assignmentMode === 'assign'
      ? isLeadWorkspace
        ? 'ส่งต่อให้ฝ่ายขาย'
        : 'มอบหมายผู้ดูแลโอกาสขาย'
      : isLeadWorkspace
        ? 'เปลี่ยนฝ่ายขายที่รับผิดชอบ'
        : 'เปลี่ยนผู้ดูแลโอกาสขาย';
  const projectSectionLabel = isLeadWorkspace ? 'ขอบเขตลีด' : 'ข้อมูลโครงการ';
  const followupTabLabel = isLeadWorkspace ? 'งานติดตามลีด' : 'งานติดตาม';
  const relatedTabLabel = isLeadWorkspace ? 'ใบเสนอราคาที่เกี่ยวข้อง' : 'ใบเสนอราคา';
  const snapshotDescription = isLeadWorkspace
    ? 'ข้อมูลระบบและสถานะการส่งต่อของลีดรายการนี้'
    : 'ข้อมูลระบบและสถานะการรับผิดชอบของโอกาสขายรายการนี้';

  return (
    <div className='space-y-6'>
      <div className='flex flex-col gap-4 rounded-xl border p-5 lg:flex-row lg:items-start lg:justify-between'>
        <div className='space-y-3'>
          <div className='flex items-center gap-2'>
            <Button asChild variant='ghost' size='icon'>
              <Link href={backHref}>
                <Icons.chevronLeft className='h-4 w-4' />
              </Link>
            </Button>
            <span className='text-muted-foreground font-mono text-sm'>{enquiry.code}</span>
            <EnquiryStatusBadge code={status?.code} label={status?.label ?? 'Unknown'} />
            {enquiry.isHotProject ? <Badge>Hot</Badge> : null}
          </div>
          <div>
            <h2 className='text-2xl font-semibold'>{enquiry.title}</h2>
            <p className='text-muted-foreground text-sm'>
              {pipelineStageLabel} | {customer?.name ?? 'ไม่ทราบชื่อลูกค้า'}
              {contact ? ` | ${contact.name}` : ''}
            </p>
          </div>
        </div>
        <div className='flex flex-wrap gap-2'>
          {canManageAssignment ? (
            <Button variant='outline' onClick={() => setAssignmentOpen(true)}>
              <Icons.userPen className='mr-2 h-4 w-4' />
              {assignmentButtonLabel}
            </Button>
          ) : null}
          {canUpdate ? (
            <Button variant='outline' onClick={() => setEditOpen(true)}>
              <Icons.edit className='mr-2 h-4 w-4' />
              {`Edit ${recordLabel}`}
            </Button>
          ) : null}
        </div>
      </div>

      <div className='grid gap-6 lg:grid-cols-3'>
        <div className='space-y-6 lg:col-span-2'>
          <Card>
            <CardContent className='pt-6'>
              <Tabs defaultValue='overview' className='gap-4'>
                <TabsList>
                  <TabsTrigger value='overview'>ภาพรวม</TabsTrigger>
                  <TabsTrigger value='followups'>{followupTabLabel}</TabsTrigger>
                  <TabsTrigger value='activity'>กิจกรรม</TabsTrigger>
                  {canViewRelatedQuotations ? (
                    <TabsTrigger value='related'>{relatedTabLabel}</TabsTrigger>
                  ) : null}
                </TabsList>
                <TabsContent value='overview'>
                  <Card>
                    <CardHeader>
                      <CardTitle>{infoCardTitle}</CardTitle>
                      <CardDescription>{infoCardDescription}</CardDescription>
                    </CardHeader>
                    <CardContent className='grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
                      <FieldItem
                        label={isLeadWorkspace ? 'ลูกค้า' : 'ลูกค้าผู้รับใบเสนอราคา'}
                        value={customer?.name}
                      />
                      <FieldItem label='ผู้ติดต่อ' value={contact?.name} />
                      <FieldItem
                        label='สาขา'
                        value={enquiry.branchId ? branchMap.get(enquiry.branchId) : null}
                      />
                      <FieldItem label='ใช้งานอยู่' value={enquiry.isActive ? 'ใช่' : 'ไม่ใช่'} />
                      <FieldItem
                        label='ประเภทสินค้า'
                        value={productTypeMap.get(enquiry.productType)?.label}
                      />
                      <FieldItem
                        label='ความสำคัญ'
                        value={priorityMap.get(enquiry.priority)?.label}
                      />
                      <FieldItem
                        label='ที่มาของลีด'
                        value={leadChannelMap.get(enquiry.leadChannel ?? '')?.label}
                      />
                      <FieldItem
                        label='วันที่คาดว่าจะปิดการขาย'
                        value={
                          enquiry.expectedCloseDate
                            ? new Date(enquiry.expectedCloseDate).toLocaleDateString()
                            : null
                        }
                      />
                      <FieldItem
                        label='มูลค่าประมาณการ'
                        value={
                          enquiry.estimatedValue !== null
                            ? enquiry.estimatedValue.toLocaleString()
                            : null
                        }
                      />
                      <FieldItem
                        label='โอกาสปิดการขาย %'
                        value={enquiry.chancePercent !== null ? `${enquiry.chancePercent}%` : null}
                      />
                      <FieldItem label='คู่แข่ง' value={enquiry.competitor} />
                      <FieldItem label='ที่มา' value={enquiry.source} />
                      <FieldItem label='ขั้นตอนใน Pipeline' value={pipelineStageLabel} />
                      <FieldItem label={ownerLabel} value={enquiry.assignedToName} />
                      <FieldItem
                        label='มอบหมายเมื่อ'
                        value={
                          enquiry.assignedAt ? new Date(enquiry.assignedAt).toLocaleString() : null
                        }
                      />
                      <FieldItem label='มอบหมายโดย' value={enquiry.assignedByName} />
                      <FieldItem label='หมายเหตุการมอบหมาย' value={enquiry.assignmentRemark} />
                      <div className='md:col-span-2 xl:col-span-4'>
                        <div className='space-y-3'>
                          <div className='text-muted-foreground text-xs'>
                            {isLeadWorkspace ? 'ผู้เกี่ยวข้องของลีด' : 'ผู้เกี่ยวข้องในโครงการ'}
                          </div>
                          {!projectPartiesData.items.length ? (
                            <div className='text-muted-foreground rounded-lg border border-dashed p-4 text-sm'>
                              {isLeadWorkspace
                                ? 'ยังไม่มีผู้เกี่ยวข้องของลีด'
                                : 'ยังไม่มีผู้เกี่ยวข้องในโครงการ'}
                            </div>
                          ) : (
                            <div className='space-y-3'>
                              {projectPartiesData.items.map((item) => (
                                <div key={item.id} className='rounded-lg border p-4 text-sm'>
                                  <div className='font-medium'>{item.customerName}</div>
                                  <div className='text-muted-foreground'>
                                    บทบาท: {item.roleLabel ?? item.roleCode}
                                  </div>
                                  {item.remark ? <div className='mt-1'>{item.remark}</div> : null}
                                </div>
                              ))}
                            </div>
                          )}
                        </div>
                      </div>
                      <div className='md:col-span-2 xl:col-span-4'>
                        <FieldItem
                          label={projectSectionLabel}
                          value={
                            [enquiry.projectName, enquiry.projectLocation].filter(Boolean).join(' | ') ||
                            null
                          }
                        />
                      </div>
                      <div className='md:col-span-2 xl:col-span-4'>
                        <FieldItem label='รายละเอียด' value={enquiry.description} />
                      </div>
                      <div className='md:col-span-2 xl:col-span-4'>
                        <FieldItem label='ความต้องการ' value={enquiry.requirement} />
                      </div>
                      <div className='md:col-span-2 xl:col-span-4'>
                        <FieldItem label='หมายเหตุ' value={enquiry.notes} />
                      </div>
                    </CardContent>
                  </Card>
                </TabsContent>
                <TabsContent value='followups'>
                  <EnquiryFollowupsTab
                    enquiryId={enquiryId}
                    customerId={enquiry.customerId}
                    referenceData={referenceData}
                    canCreate={canManageFollowups.create}
                    canUpdate={canManageFollowups.update}
                    canDelete={canManageFollowups.delete}
                  />
                </TabsContent>
                <TabsContent value='activity'>
                  <Card>
                    <CardHeader>
                      <CardTitle>{isLeadWorkspace ? 'กิจกรรมของลีด' : 'กิจกรรม'}</CardTitle>
                      <CardDescription>ประวัติการเปลี่ยนแปลงของรายการนี้และงานติดตามที่เกี่ยวข้อง</CardDescription>
                    </CardHeader>
                    <CardContent className='space-y-4'>
                      {!data.activity.length ? (
                        <div className='text-muted-foreground rounded-lg border border-dashed p-8 text-center text-sm'>
                          ยังไม่มีกิจกรรม
                        </div>
                      ) : (
                        data.activity.map((item, index) => (
                          <div key={item.id} className='space-y-4'>
                            <div className='flex items-start gap-3'>
                              <div className='bg-primary mt-2 h-2 w-2 rounded-full' />
                              <div className='space-y-1'>
                                <div className='flex items-center gap-2'>
                                  <Badge variant='outline' className='capitalize'>
                                    {item.action}
                                  </Badge>
                                  <Badge variant='secondary'>
                                    {item.entityType.replaceAll('_', ' ')}
                                  </Badge>
                                  <span className='text-sm font-medium'>
                                    {item.actorName ?? item.userId}
                                  </span>
                                </div>
                                <div className='text-muted-foreground text-xs'>
                                  {new Date(item.createdAt).toLocaleString()}
                                </div>
                              </div>
                            </div>
                            {index < data.activity.length - 1 ? <Separator /> : null}
                          </div>
                        ))
                      )}
                    </CardContent>
                  </Card>
                </TabsContent>
                {canViewRelatedQuotations ? (
                  <TabsContent value='related'>
                    <Card>
                      <CardHeader>
                        <CardTitle>{relatedTabLabel}</CardTitle>
                        <CardDescription>
                          ใบเสนอราคาที่เชื่อมกับรายการนี้แล้ว
                        </CardDescription>
                      </CardHeader>
                      <CardContent>
                        {!relatedQuotations.length ? (
                          <div className='text-muted-foreground rounded-lg border border-dashed p-8 text-center text-sm'>
                            ยังไม่มีใบเสนอราคาที่เชื่อมกับรายการนี้
                          </div>
                        ) : (
                          <div className='space-y-3'>
                            {relatedQuotations.map((quotation) => (
                              <Link
                                key={quotation.id}
                                href={`/dashboard/crm/quotations/${quotation.id}`}
                                className='block rounded-lg border p-4 transition-colors hover:bg-muted/40'
                              >
                                <div className='flex items-center justify-between gap-3'>
                                  <div className='space-y-1'>
                                    <div className='font-medium'>{quotation.code}</div>
                                    <div className='text-muted-foreground text-sm'>
                                      {quotation.totalAmount.toLocaleString()}
                                    </div>
                                  </div>
                                  <Icons.arrowRight className='text-muted-foreground h-4 w-4' />
                                </div>
                              </Link>
                            ))}
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  </TabsContent>
                ) : null}
              </Tabs>
            </CardContent>
          </Card>
        </div>

        <div className='space-y-6'>
          <Card>
            <CardHeader>
              <CardTitle>ข้อมูลระบบ</CardTitle>
              <CardDescription>{snapshotDescription}</CardDescription>
            </CardHeader>
            <CardContent className='space-y-4'>
              <FieldItem label='ขั้นตอนใน Pipeline' value={pipelineStageLabel} />
              <FieldItem label={ownerLabel} value={enquiry.assignedToName} />
              <FieldItem label='มอบหมายโดย' value={enquiry.assignedByName} />
              <FieldItem label='สร้างโดย' value={enquiry.createdBy} />
              <FieldItem label='อัปเดตโดย' value={enquiry.updatedBy} />
              <FieldItem
                label='มอบหมายเมื่อ'
                value={enquiry.assignedAt ? new Date(enquiry.assignedAt).toLocaleString() : null}
              />
              <FieldItem label='สร้างเมื่อ' value={new Date(enquiry.createdAt).toLocaleString()} />
              <FieldItem label='อัปเดตเมื่อ' value={new Date(enquiry.updatedAt).toLocaleString()} />
            </CardContent>
          </Card>
        </div>
      </div>

      <EnquiryAssignmentDialog
        enquiry={enquiry}
        referenceData={referenceData}
        mode={assignmentMode}
        open={assignmentOpen}
        onOpenChange={setAssignmentOpen}
      />
      <EnquiryFormSheet
        enquiry={enquiry}
        open={editOpen}
        onOpenChange={setEditOpen}
        referenceData={referenceData}
        workspace={workspace}
      />
    </div>
  );
}
