'use client';

import { useSuspenseQuery } from '@tanstack/react-query';
import { crmReferenceQueryOptions } from '../api/queries';
import { EmptyState, SectionCard } from './shared';

export function MasterOptionsPage() {
  const { data } = useSuspenseQuery(crmReferenceQueryOptions());

  return (
    <SectionCard
      title='Master Options'
      description='Status, product type, payment term, currency, tax rate'
    >
      <div className='grid gap-3 md:grid-cols-2 xl:grid-cols-3'>
        {data.masterOptions.map((item) => (
          <div key={item.id} className='rounded-lg border p-4'>
            <p className='text-muted-foreground text-xs uppercase tracking-[0.2em]'>{item.group}</p>
            <p className='mt-2 font-medium'>{item.label}</p>
            <p className='text-muted-foreground text-sm'>{item.code}</p>
          </div>
        ))}
      </div>
    </SectionCard>
  );
}

export function DocumentSequencesPage() {
  const { data } = useSuspenseQuery(crmReferenceQueryOptions());

  return (
    <SectionCard title='Document Sequences' description='Mock document sequence by branch'>
      <div className='space-y-3'>
        {data.sequences.map((item) => (
          <div key={item.id} className='rounded-lg border p-4'>
            <div className='flex items-center justify-between gap-3'>
              <p className='font-medium'>
                {item.prefix}
                {item.period}-{String(item.currentNumber).padStart(item.paddingLength, '0')}
              </p>
              <p className='text-muted-foreground text-sm'>{item.documentType}</p>
            </div>
            <p className='text-muted-foreground mt-1 text-sm'>Branch: {item.branchId}</p>
          </div>
        ))}
      </div>
    </SectionCard>
  );
}

export function TemplatesPage() {
  const { data } = useSuspenseQuery(crmReferenceQueryOptions());

  if (data.templates.length === 0) {
    return <EmptyState title='No templates' description='ยังไม่มี quotation templates' />;
  }

  return (
    <SectionCard title='Quotation Templates' description='Mock template and placeholder mappings'>
      <div className='space-y-4'>
        {data.templates.map((template) => (
          <div key={template.id} className='rounded-xl border p-4'>
            <div className='flex flex-wrap items-center justify-between gap-3'>
              <div>
                <p className='font-semibold'>{template.name}</p>
                <p className='text-muted-foreground text-sm'>{template.description}</p>
              </div>
              <p className='text-muted-foreground text-sm'>{template.version}</p>
            </div>
            <div className='mt-3 grid gap-3 md:grid-cols-2'>
              {template.mappings.map((mapping) => (
                <div key={mapping.id} className='rounded-lg bg-muted/20 p-3 text-sm'>
                  <p className='font-medium'>{mapping.placeholder}</p>
                  <p className='text-muted-foreground'>{mapping.sourceField}</p>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </SectionCard>
  );
}
