"use client";

import React from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { User, Calendar, MessageSquare, Package, Ticket, History, Wallet } from "lucide-react";
import { format } from "date-fns";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import Link from "next/link";
import { getStatusBadge } from "../../utils";
import { PANEL_SETTING } from "@/config/panelSetting";

interface UserInfoCardProps {
  user: TelegramUser
  handleRespondentChange: (isAi: boolean) => void;
}

export function UserInfoCard({ user, handleRespondentChange }: UserInfoCardProps) {
  return (
    <Card className="md:col-span-3">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <User className="h-5 w-5" />
          اطلاعات کاربر
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Basic User Info Section */}
        <div className="rounded-md border p-4">
          <h3 className="text-md font-semibold mb-3">اطلاعات پایه</h3>

          <div>
            <div className="text-sm font-medium text-muted-foreground mb-1">پاسخ‌دهنده</div>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Label htmlFor="respondent-mode">هوش مصنوعی</Label>
                <Switch
                  style={{ direction: "ltr" }}
                  id="respondent-mode"
                  checked={user.respondent === "ai"}
                  onCheckedChange={() => handleRespondentChange(user.respondent === "ai")}
                />
              </div>
              <Badge variant={user.respondent === "ai" ? "default" : "secondary"}>
                {user.respondent === "admin" ? "دستی" : "خودکار"}
              </Badge>
            </div>
          </div>

          <div className="mt-3">
            <div className="text-sm font-medium text-muted-foreground mb-1">شناسه تلگرام</div>
            <div className="flex items-center">{user.telegramId}</div>
          </div>

          <div className="mt-3">
            <div className="text-sm font-medium text-muted-foreground mb-1">نام</div>
            <div>
              {user.firstName} {user.lastName}
            </div>
          </div>

          {user.username && (
            <div className="mt-3">
              <div className="text-sm font-medium text-muted-foreground mb-1">نام کاربری</div>
              <div>@{user.username}</div>
            </div>
          )}
        </div>



        {/* Financial Info Section */}
        {PANEL_SETTING.template === "prop_firms" && (
          <div className="rounded-md border p-4">
            <h3 className="text-md font-semibold mb-3">اطلاعات مالی</h3>
            <div>
              <div className="text-sm font-medium text-muted-foreground mb-1">موجودی</div>
              <div className="flex items-center">
                <Wallet className="h-4 w-4 ml-2" />
                {user.balance.toLocaleString()} تومان
              </div>
            </div>
            <div className="mt-3">
              <div className="text-sm font-medium text-muted-foreground mb-1">تراکنش‌ها</div>
              <div className="flex items-center">
                <History className="h-4 w-4 ml-2" />
                {user._count?.userTransactions || 0} تراکنش
                {user.userTransactions && user.userTransactions.length > 0 && (
                  <div className="text-xs text-muted-foreground mr-2">
                    (آخرین: {format(new Date(user.userTransactions[0].createdAt), "PPP")})
                  </div>
                )}
              </div>
            </div>

            <div className="mt-3">
              <div className="text-sm font-medium text-muted-foreground mb-1">محصولات خریداری شده</div>
              <div className="flex items-center">
                <Package className="h-4 w-4 ml-2" />
                {user._count?.userProducts || 0} محصول
              </div>
              {user.userProducts && user.userProducts.length > 0 && (
                <div className="mt-2 space-y-1">
                  {user.userProducts.slice(0, 3).map(product => (
                    <div key={product.id} className="mr-1 text-xs">
                      {product.product.plan} ({product.product.firm}) {getStatusBadge(product.challengeStatus)}
                    </div>
                  ))}
                  {user.userProducts.length > 3 && (
                    <Badge variant="outline">+{user.userProducts.length - 3}</Badge>
                  )}
                </div>
              )}
            </div>
          </div>
        )}

        {/* Activity Info Section */}
        <div className="rounded-md border p-4">
          <h3 className="text-md font-semibold mb-3">فعالیت‌ها</h3>


          <div className="mt-3">
            <div className="text-sm font-medium text-muted-foreground mb-1">تیکت‌ها</div>
            <div className="flex items-center">
              <Ticket className="h-4 w-4 ml-2" />
              {user._count?.UserTicket || 0} تیکت
              {user._count?.UserTicket && user._count?.UserTicket > 0 && (
                <Link href="/dashboard/users/ticket" className="text-xs text-muted-foreground mr-2">
                  <Badge variant="default" className="mr-2">
                    {user.UserTicket?.filter(ticket => !ticket.checked).length || 0} بررسی نشده
                  </Badge>
                </Link>
              )}
            </div>
          </div>

          <div className="mt-3">
            <div className="text-sm font-medium text-muted-foreground mb-1">مکالمات</div>
            <div className="flex items-center">
              <MessageSquare className="h-4 w-4 ml-2" />
              {user._count?.conversations || 0} کل
            </div>
          </div>

          <div className="mt-3">
            <div className="text-sm font-medium text-muted-foreground mb-1">آخرین تعامل</div>
            <div className="flex items-center">
              <Calendar className="h-4 w-4 ml-2" />
              {format(new Date(user.lastInteraction), "PPP p")}
            </div>
          </div>

          <div className="mt-3">
            <div className="text-sm font-medium text-muted-foreground mb-1">تاریخ ثبت نام</div>
            <div className="flex items-center">
              <Calendar className="h-4 w-4 ml-2" />
              {format(new Date(user.createdAt), "PPP")}
            </div>
          </div>
        </div>
      </CardContent>

    </Card>
  );
}