'use client';

import { FileText, Plus } from 'lucide-react';
import * as React from 'react';
import { ReportCard } from '@/components/reports/report-card';
import { REPORT_TYPES } from '@/components/reports/report-type-badge';
import { Button } from '@/components/ui/button';
import { Link } from '@/i18n/navigation';
import { useDeleteReport, useReportsList } from '@/lib/hooks/use-reports';
import type { ReportType } from '@/lib/reports-api';

export default function ReportsHubPage() {
  const [activeType, setActiveType] = React.useState<ReportType | undefined>();
  const { data, isLoading } = useReportsList({ type: activeType, limit: 20 });
  const { mutate: triggerDelete } = useDeleteReport();

  const handleDelete = (id: string) => {
    triggerDelete(id);
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Báo cáo AI</h1>
          <p className="text-sm text-muted-foreground">
            Tạo và quản lý báo cáo phân tích thị trường bất động sản
          </p>
        </div>
        <Link href="/dashboard/reports/new">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            Tạo báo cáo mới
          </Button>
        </Link>
      </div>

      {/* Type filter tabs */}
      <div className="flex flex-wrap gap-2">
        <Button
          variant={activeType === undefined ? 'default' : 'outline'}
          size="sm"
          onClick={() => setActiveType(undefined)}
        >
          Tất cả
        </Button>
        {REPORT_TYPES.map((rt) => (
          <Button
            key={rt.value}
            variant={activeType === rt.value ? 'default' : 'outline'}
            size="sm"
            onClick={() => setActiveType(rt.value)}
          >
            <rt.icon className="mr-1 h-3.5 w-3.5" />
            {rt.label}
          </Button>
        ))}
      </div>

      {/* Reports list */}
      {isLoading && (
        <div className="flex items-center justify-center py-12 text-muted-foreground">
          <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
          <span className="ml-2">Đang tải...</span>
        </div>
      )}

      {!isLoading && data && data.data.length > 0 && (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {data.data.map((report) => (
            <ReportCard key={report.id} report={report} onDelete={handleDelete} />
          ))}
        </div>
      )}

      {!isLoading && data && data.data.length === 0 && (
        <div className="flex flex-col items-center justify-center py-16 text-center">
          <FileText className="mb-4 h-12 w-12 text-muted-foreground/50" />
          <h3 className="text-lg font-medium">Chưa có báo cáo nào</h3>
          <p className="mt-1 text-sm text-muted-foreground">
            Tạo báo cáo AI đầu tiên để phân tích thị trường bất động sản.
          </p>
          <Link href="/dashboard/reports/new" className="mt-4">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Tạo báo cáo mới
            </Button>
          </Link>
        </div>
      )}

      {data && data.total > 0 && (
        <p className="text-xs text-muted-foreground">
          Hiển thị {data.data.length} / {data.total} báo cáo
        </p>
      )}
    </div>
  );
}
