'use client';

import Link from 'next/link';
import { useSuspenseQuery } from '@tanstack/react-query';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { crmReportCatalogQueryOptions, crmReportFiltersQueryOptions } from '../api/queries';

const REPORT_LINKS: Record<string, string> = {
  lead_pipeline: '/dashboard/crm/reports/pipeline',
  opportunity_pipeline: '/dashboard/crm/reports/pipeline',
  lead_conversion: '/dashboard/crm/reports/pipeline',
  opportunity_conversion: '/dashboard/crm/reports/pipeline',
  pipeline_funnel: '/dashboard/crm/reports/pipeline',
  lead_aging: '/dashboard/crm/reports/lead-aging',
  opportunity_aging: '/dashboard/crm/reports/opportunity-aging'
};

export function ReportCatalog() {
  const { data: catalog } = useSuspenseQuery(crmReportCatalogQueryOptions());
  const { data: filterData } = useSuspenseQuery(crmReportFiltersQueryOptions());

  return (
    <div className='space-y-6'>
      <Card>
        <CardHeader>
          <CardTitle>Shared Report Filters</CardTitle>
          <CardDescription>
            Central filter metadata prepared for upcoming CRM report modules.
          </CardDescription>
        </CardHeader>
        <CardContent className='grid gap-3 md:grid-cols-2 xl:grid-cols-3'>
          <div className='rounded-lg border p-4 text-sm'>
            <div className='font-medium'>Date Range</div>
            <div className='text-muted-foreground mt-1'>Shared dateFrom/dateTo contract for all reports.</div>
          </div>
          {[
            ['Branches', filterData.filters.branches.length],
            ['Product Types', filterData.filters.productTypes.length],
            ['Sales', filterData.filters.sales.length],
            ['Customers', filterData.filters.customers.length],
            ['Customer Owners', filterData.filters.customerOwners.length],
            ['Lead Sources', filterData.filters.leadSources.length],
            ['Pipeline Stages', filterData.filters.pipelineStages.length],
            ['Outcomes', filterData.filters.outcomes.length],
            ['Lost Reasons', filterData.filters.lostReasons.length]
          ].map(([label, count]) => (
            <div key={String(label)} className='rounded-lg border p-4 text-sm'>
              <div className='font-medium'>{label}</div>
              <div className='text-muted-foreground mt-1'>{count} options available</div>
            </div>
          ))}
        </CardContent>
      </Card>

      <div className='grid gap-6 lg:grid-cols-2 xl:grid-cols-3'>
        {catalog.groups.map((group) => (
          <Card key={group.category} className='h-full'>
            <CardHeader>
              <CardTitle>{group.categoryLabel}</CardTitle>
              <CardDescription>
                {group.items.length} report definition{group.items.length === 1 ? '' : 's'} available in the CRM report center.
              </CardDescription>
            </CardHeader>
            <CardContent className='space-y-3'>
              {group.items.map((item) => (
                <div key={item.id} className='rounded-lg border p-4'>
                  <div className='flex items-start justify-between gap-3'>
                    <div>
                      <div className='font-medium'>{item.name}</div>
                      <div className='text-muted-foreground mt-1 text-sm'>{item.description}</div>
                    </div>
                    {item.isSystem ? <Badge variant='secondary'>System</Badge> : null}
                  </div>
                  <div className='text-muted-foreground mt-3 text-xs'>{item.code}</div>
                  {REPORT_LINKS[item.code] ? (
                    <Button asChild variant='outline' size='sm' className='mt-3'>
                      <Link href={REPORT_LINKS[item.code]}>Open Report</Link>
                    </Button>
                  ) : null}
                </div>
              ))}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

