'use client';

import { useSuspenseQuery } from '@tanstack/react-query';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { quotationDocumentPreviewOptions } from '@/features/crm/quotations/document/queries';

function Field({ 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>
  );
}

export function QuotationDocumentPreview({ quotationId }: { quotationId: string }) {
  const { data } = useSuspenseQuery(quotationDocumentPreviewOptions(quotationId));
  const { documentData, template } = data.preview;
  const topicGroups: Array<{ key: 'scope' | 'exclusion' | 'payment'; title: string }> = [
    { key: 'scope', title: 'ขอบเขตงาน' },
    { key: 'exclusion', title: 'ข้อยกเว้น' },
    { key: 'payment', title: 'เงื่อนไขการชำระเงิน' }
  ];

  return (
    <div className='space-y-6'>
      <Card className='overflow-hidden'>
        <CardHeader className='border-b bg-muted/20'>
          <div className='flex flex-wrap items-start justify-between gap-4'>
            <div className='space-y-1'>
              <CardTitle className='text-2xl'>{documentData.company.name}</CardTitle>
              <CardDescription>
                ตัวอย่างใบเสนอราคา จากเทมเพลต {template.template.templateName} v
                {template.version.version}
              </CardDescription>
            </div>
            <div className='flex flex-wrap gap-2'>
              {documentData.watermarkStatus ? (
                <Badge variant='destructive'>{documentData.watermarkStatus}</Badge>
              ) : (
                <Badge>พร้อมใช้งานหลังอนุมัติ</Badge>
              )}
              <Badge variant='outline'>{template.template.fileType}</Badge>
            </div>
          </div>
        </CardHeader>
        <CardContent className='space-y-8 p-6'>
          <div className='grid gap-6 lg:grid-cols-2'>
            <Card>
              <CardHeader>
                <CardTitle>ข้อมูลหัวเอกสาร</CardTitle>
                <CardDescription>ข้อมูลอ้างอิงและวันออกเอกสารสำหรับใบเสนอราคา</CardDescription>
              </CardHeader>
              <CardContent className='grid gap-4 md:grid-cols-2'>
                <Field label='เลขที่ใบเสนอราคา' value={documentData.quotation.code} />
                <Field label='Revision' value={documentData.quotation.revisionLabel} />
                <Field
                  label='วันที่ออกใบเสนอราคา'
                  value={new Date(documentData.quotation.quotationDate).toLocaleDateString()}
                />
                <Field
                  label='ใช้ได้ถึง'
                  value={
                    documentData.quotation.validUntil
                      ? new Date(documentData.quotation.validUntil).toLocaleDateString()
                      : null
                  }
                />
                <Field label='ประเภทเอกสาร' value={documentData.quotation.quotationTypeLabel} />
                <Field label='สาขา' value={documentData.branch?.label} />
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>ข้อมูลลูกค้า</CardTitle>
                <CardDescription>ข้อมูลลูกค้าผู้รับใบเสนอราคาและผู้ติดต่อของเอกสาร</CardDescription>
              </CardHeader>
              <CardContent className='grid gap-4 md:grid-cols-2'>
                <Field label='ลูกค้าผู้รับใบเสนอราคา' value={documentData.customer.name} />
                <Field label='ผู้ติดต่อ' value={documentData.contact?.name} />
                <Field label='โทรศัพท์' value={documentData.customer.phone} />
                <Field label='อีเมล' value={documentData.customer.email} />
                <div className='md:col-span-2'>
                  <Field label='ที่อยู่' value={documentData.customer.address} />
                </div>
              </CardContent>
            </Card>
          </div>

          <Card>
            <CardHeader>
              <CardTitle>ข้อมูลโครงการ</CardTitle>
              <CardDescription>สรุปข้อมูลอ้างอิงของโครงการสำหรับลูกค้า</CardDescription>
            </CardHeader>
            <CardContent className='grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
              <Field label='ชื่อโครงการ' value={documentData.quotation.projectName} />
              <Field label='สถานที่ติดตั้ง' value={documentData.quotation.projectLocation} />
              <Field label='เรียน' value={documentData.quotation.attention} />
              <Field label='อ้างอิง' value={documentData.quotation.reference} />
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>ตารางรายการ</CardTitle>
              <CardDescription>รายการที่จัดรูปแบบแล้วเพื่อเตรียมใช้กับ template mapping</CardDescription>
            </CardHeader>
            <CardContent className='space-y-3'>
              <div className='grid grid-cols-[1.2fr_4fr_1fr_1.2fr_1.4fr_1.4fr] gap-3 rounded-lg border bg-muted/20 px-4 py-3 text-xs font-medium uppercase tracking-wide'>
                <div>ลำดับ</div>
                <div>รายละเอียด</div>
                <div>จำนวน</div>
                <div>หน่วย</div>
                <div>ราคาต่อหน่วย</div>
                <div>รวม</div>
              </div>
              {documentData.items.map((item) => (
                <div
                  key={item.id}
                  className='grid grid-cols-[1.2fr_4fr_1fr_1.2fr_1.4fr_1.4fr] gap-3 rounded-lg border px-4 py-3 text-sm'
                >
                  <div>{item.itemNumber}</div>
                  <div className='space-y-1'>
                    <div>{item.description}</div>
                    <div className='text-muted-foreground text-xs'>
                      {item.productTypeLabel || '-'}
                    </div>
                  </div>
                  <div>{item.quantity}</div>
                  <div>{item.unitLabel || '-'}</div>
                  <div>{item.unitPrice.toLocaleString()}</div>
                  <div>{item.totalPrice.toLocaleString()}</div>
                </div>
              ))}
            </CardContent>
          </Card>

          <div className='grid gap-6 lg:grid-cols-[2fr_1fr]'>
            <Card>
              <CardHeader>
                <CardTitle>หัวข้อเอกสาร</CardTitle>
                <CardDescription>
                  ขอบเขตงาน ข้อยกเว้น และเงื่อนไขการชำระเงินจากหัวข้อในระบบ
                </CardDescription>
              </CardHeader>
              <CardContent className='space-y-6'>
                {topicGroups.map((group) => {
                  const entries = documentData.topics[group.key];
                  return (
                    <div key={group.key} className='space-y-3'>
                      <div className='font-medium'>{group.title}</div>
                      {!entries.length ? (
                        <div className='text-muted-foreground text-sm'>ไม่มีข้อมูล</div>
                      ) : (
                        entries.map((entry) => (
                          <div
                            key={`${group.key}-${entry.title}`}
                            className='rounded-lg border p-4'
                          >
                            <div className='mb-2 text-sm font-medium'>{entry.title}</div>
                            <ul className='list-disc space-y-1 pl-5 text-sm'>
                              {entry.items.map((item) => (
                                <li key={item}>{item}</li>
                              ))}
                            </ul>
                          </div>
                        ))
                      )}
                    </div>
                  );
                })}
              </CardContent>
            </Card>

            <div className='space-y-6'>
              <Card>
                <CardHeader>
                  <CardTitle>สรุปมูลค่า</CardTitle>
                </CardHeader>
                <CardContent className='space-y-3 text-sm'>
                  <div className='flex items-center justify-between'>
                    <span className='text-muted-foreground'>ก่อนภาษี</span>
                    <span>{documentData.quotation.subtotal.toLocaleString()}</span>
                  </div>
                  <div className='flex items-center justify-between'>
                    <span className='text-muted-foreground'>ภาษี</span>
                    <span>{documentData.quotation.taxAmount.toLocaleString()}</span>
                  </div>
                  <div className='flex items-center justify-between'>
                    <span className='text-muted-foreground'>รวมทั้งสิ้น</span>
                    <span className='font-semibold'>
                      {documentData.quotation.totalAmount.toLocaleString()}
                    </span>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>ข้อมูลอนุมัติเอกสาร</CardTitle>
                  <CardDescription>ข้อมูลที่ใช้ประกอบ watermark และ approved snapshot</CardDescription>
                </CardHeader>
                <CardContent className='space-y-4'>
                  <Field label='สถานะ' value={documentData.approval.status} />
                  <Field label='Workflow' value={documentData.approval.workflowName} />
                  <Field label='อนุมัติเมื่อ' value={documentData.approval.approvedAt} />
                  <Separator />
                  {!documentData.approval.approvers.length ? (
                    <div className='text-muted-foreground text-sm'>ยังไม่มีประวัติการอนุมัติ</div>
                  ) : (
                    documentData.approval.approvers.map((item) => (
                      <div
                        key={`${item.stepNumber}-${item.roleCode}`}
                        className='rounded-lg border p-3 text-sm'
                      >
                        <div className='font-medium'>
                          ขั้น {item.stepNumber} - {item.roleName}
                        </div>
                        <div className='text-muted-foreground'>
                          {item.actorName || '-'}{' '}
                          {item.actedAt ? `เมื่อ ${new Date(item.actedAt).toLocaleString()}` : ''}
                        </div>
                      </div>
                    ))
                  )}
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Approval Signatures</CardTitle>
                </CardHeader>
                <CardContent className='space-y-3 text-sm'>
                  {[
                    { label: 'Prepared By', value: documentData.signatures.preparedBy },
                    { label: 'Approved By', value: documentData.signatures.approvedBy },
                    { label: 'Authorized By', value: documentData.signatures.authorizedBy }
                  ].map((item) => (
                    <div key={item.label} className='rounded-lg border p-3'>
                      <Field label={item.label} value={item.value.name} />
                      <Field label='Position' value={item.value.position} />
                      <Field label='Timestamp' value={item.value.actedAt} />
                    </div>
                  ))}
                </CardContent>
              </Card>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
