'use client';

import { Inbox } from 'lucide-react';
import * as React from 'react';
import { InquiryDetailDialog } from '@/components/inquiries/inquiry-detail-dialog';
import { InquiryRow, InquiryStatusBadge } from '@/components/inquiries/inquiry-row';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Select } from '@/components/ui/select';
import { useMyInquiries } from '@/lib/hooks/use-inquiries';
import type { InquiryReadDto } from '@/lib/inquiries-api';

type ReadFilter = 'all' | 'unread' | 'read';

export default function InquiriesPage() {
  const [page, setPage] = React.useState(1);
  const [readFilter, setReadFilter] = React.useState<ReadFilter>('all');
  const [selectedInquiry, setSelectedInquiry] = React.useState<InquiryReadDto | null>(null);
  const [dialogOpen, setDialogOpen] = React.useState(false);

  const { data: result, isLoading: loading } = useMyInquiries({ page, limit: 20 });

  // Client-side filter for read/unread since API doesn't support it directly
  const filteredData = React.useMemo(() => {
    if (!result) return [];
    if (readFilter === 'all') return result.data;
    if (readFilter === 'unread') return result.data.filter((i) => !i.isRead);
    return result.data.filter((i) => i.isRead);
  }, [result, readFilter]);

  const stats = React.useMemo(() => {
    if (!result) return { total: 0, unread: 0, read: 0 };
    return {
      total: result.total,
      unread: result.data.filter((i) => !i.isRead).length,
      read: result.data.filter((i) => i.isRead).length,
    };
  }, [result]);

  const handleSelectInquiry = (inquiry: InquiryReadDto) => {
    setSelectedInquiry(inquiry);
    setDialogOpen(true);
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold">Quản lý liên hệ</h1>
        <p className="text-sm text-muted-foreground">
          Xem và phản hồi các yêu cầu tư vấn từ khách hàng
        </p>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-3 gap-3">
        <Card>
          <CardHeader className="pb-2">
            <CardDescription>Tổng liên hệ</CardDescription>
            <CardTitle className="text-xl">{loading ? '...' : stats.total}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardDescription>Chưa đọc</CardDescription>
            <CardTitle className="text-xl text-blue-600">
              {loading ? '...' : stats.unread}
            </CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardDescription>Đã đọc</CardDescription>
            <CardTitle className="text-xl text-green-600">
              {loading ? '...' : stats.read}
            </CardTitle>
          </CardHeader>
        </Card>
      </div>

      {/* Filters */}
      <div className="flex items-center gap-3">
        <Select
          value={readFilter}
          onChange={(e) => {
            setReadFilter(e.target.value as ReadFilter);
            setPage(1);
          }}
          className="w-40"
        >
          <option value="all">Tất cả</option>
          <option value="unread">Chưa đọc</option>
          <option value="read">Đã đọc</option>
        </Select>
        <span className="text-sm text-muted-foreground">
          {filteredData.length} liên hệ
        </span>
      </div>

      {/* Content */}
      {loading ? (
        <div className="flex min-h-[300px] items-center justify-center">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
        </div>
      ) : filteredData.length === 0 ? (
        <div className="flex min-h-[300px] flex-col items-center justify-center text-muted-foreground">
          <Inbox className="mb-3 h-12 w-12" aria-hidden="true" />
          <p>Chưa có liên hệ nào</p>
          <p className="text-xs mt-1">
            Khi khách hàng gửi yêu cầu tư vấn, chúng sẽ xuất hiện ở đây
          </p>
        </div>
      ) : (
        <>
          {/* Mobile card view */}
          <div className="space-y-3 sm:hidden">
            {filteredData.map((inquiry) => (
              <Card
                key={inquiry.id}
                className="cursor-pointer transition-shadow hover:shadow-md"
                onClick={() => handleSelectInquiry(inquiry)}
              >
                <CardContent className="p-4">
                  <div className="flex items-start justify-between gap-2">
                    <div className="min-w-0 flex-1">
                      <p className="font-medium">{inquiry.userName}</p>
                      <p className="text-xs text-muted-foreground">{inquiry.userPhone}</p>
                    </div>
                    <InquiryStatusBadge isRead={inquiry.isRead} />
                  </div>
                  <p className="mt-2 text-sm text-muted-foreground line-clamp-1">
                    {inquiry.listingTitle}
                  </p>
                  <p className="mt-1 text-sm line-clamp-2">{inquiry.message}</p>
                  <p className="mt-2 text-xs text-muted-foreground">
                    {new Date(inquiry.createdAt).toLocaleDateString('vi-VN', {
                      day: '2-digit',
                      month: '2-digit',
                      year: 'numeric',
                      hour: '2-digit',
                      minute: '2-digit',
                    })}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Desktop table view */}
          <Card className="hidden sm:block">
            <CardContent className="p-0">
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b text-left">
                      <th className="p-3 font-medium">Khách hàng</th>
                      <th className="p-3 font-medium">Tin đăng</th>
                      <th className="hidden p-3 font-medium sm:table-cell">Nội dung</th>
                      <th className="p-3 font-medium text-center">Trạng thái</th>
                      <th className="p-3 font-medium text-right">Ngày gửi</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredData.map((inquiry) => (
                      <InquiryRow
                        key={inquiry.id}
                        inquiry={inquiry}
                        onSelect={handleSelectInquiry}
                      />
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        </>
      )}

      {/* Pagination */}
      {result && result.totalPages > 1 && (
        <div className="flex items-center justify-center gap-2">
          <Button
            variant="outline"
            size="sm"
            disabled={page <= 1}
            onClick={() => setPage((p) => p - 1)}
          >
            Trước
          </Button>
          <span className="text-sm text-muted-foreground">
            Trang {result.page} / {result.totalPages}
          </span>
          <Button
            variant="outline"
            size="sm"
            disabled={page >= result.totalPages}
            onClick={() => setPage((p) => p + 1)}
          >
            Tiếp
          </Button>
        </div>
      )}

      {/* Detail Dialog */}
      <InquiryDetailDialog
        inquiry={selectedInquiry}
        open={dialogOpen}
        onOpenChange={(open) => {
          setDialogOpen(open);
          if (!open) setSelectedInquiry(null);
        }}
      />
    </div>
  );
}