"use client";

import { useState } from "react";
import {
  Card,
  CardHeader,
  CardBody,
  Button,
  Divider,
  Tabs,
  Tab,
  Avatar,
} from "@heroui/react";
import { Star, StarHalf, User, MessageSquare } from "lucide-react";

export default function MyReviewsSection() {
  const [filter, setFilter] = useState("all");

  const reviews = [
    {
      id: 1,
      name: "عبدالله الراشد",
      rate: 5,
      note: "تعامل راقٍ وتسليم سريع جداً، أنصح بالتعامل معه.",
      time: "منذ 3 أيام",
    },
    {
      id: 2,
      name: "سالم العتيبي",
      rate: 4,
      note: "جيد جداً ولكن التواصل تأخر قليلاً.",
      time: "منذ أسبوع",
    },
    {
      id: 3,
      name: "ناصر القحطاني",
      rate: 3,
      note: "متوسط، تم التسليم لكن تأخر.",
      time: "منذ أسبوعين",
    },
    {
      id: 4,
      name: "محمد الحربي",
      rate: 2,
      note: "لم يكن التجربة كما توقعت، تأخير كبير في الرد.",
      time: "منذ شهر",
    },
  ];

  const filtered =
    filter === "all"
      ? reviews
      : filter === "excellent"
      ? reviews.filter((r) => r.rate >= 4.5)
      : filter === "good"
      ? reviews.filter((r) => r.rate === 4)
      : reviews.filter((r) => r.rate <= 3);

  const renderStars = (rate: number) => {
    const full = Math.floor(rate);
    const half = rate % 1 >= 0.5 ? 1 : 0;
    const empty = 5 - full - half;
    return (
      <div className="flex items-center gap-0.5 text-amber-500">
        {[...Array(full)].map((_, i) => (
          <Star key={"f" + i} size={16} fill="currentColor" />
        ))}
        {half ? <StarHalf size={16} fill="currentColor" /> : null}
        {[...Array(empty)].map((_, i) => (
          <Star key={"e" + i} size={16} />
        ))}
      </div>
    );
  };

  return (
    <Card className="p-6 border rounded-2xl shadow-sm bg-white space-y-6">
      <CardHeader className="flex flex-col items-start gap-2 pb-2">
        <div className="flex items-center gap-2">
          <MessageSquare className="text-primary" size={22} />
          <h2 className="text-2xl font-extrabold text-green-800">
            تقييماتي للبائعين
          </h2>
        </div>
        <p className="text-slate-500 text-sm">
          هنا يمكنك متابعة جميع تقييماتك السابقة للبائعين وملاحظاتك حول التجارب
          السابقة.
        </p>
      </CardHeader>

      <Divider />

      <CardBody className="space-y-6 bg-white">
        <Tabs
          aria-label="أنواع التقييمات"
          selectedKey={filter}
          isVertical={false}
          onSelectionChange={(key) => setFilter(key.toString())}
          color="primary"
          className="pt-2 text-start"
          classNames={{
            tabList: " gap-2 text-start",
            tabWrapper: "w-full justify-start flex flex-col",
            tab: "rounded-lg px-3 py-1 text-sm font-medium data-[selected=true]:bg-primary/10 data-[selected=true]:text-primary",
          }}
        >
          <Tab key="all" title="الكل" />
          <Tab key="excellent" title="ممتاز" />
          <Tab key="good" title="جيد" />
          <Tab key="weak" title="ضعيف" />
        </Tabs>

        <div className="space-y-4">
          {filtered.length === 0 ? (
            <div className="p-6 text-center border rounded-xl text-slate-500 text-sm">
              لا توجد تقييمات بعد ⭐
            </div>
          ) : (
            filtered.map((r) => (
              <Card
                key={r.id}
                className="border transition hover:shadow-sm bg-gradient-to-br from-white to-slate-50"
              >
                <CardHeader className="flex justify-between items-center">
                  <div className="flex items-center gap-3">
                    <Avatar
                      size="sm"
                      radius="full"
                      name={r.name}
                      icon={<User className="text-slate-500" size={16} />}
                    />
                    <div>
                      <h3 className="font-bold text-slate-800">{r.name}</h3>
                      <div className="flex items-center gap-2">
                        {renderStars(r.rate)}
                        <span className="text-xs text-slate-500">{r.time}</span>
                      </div>
                    </div>
                  </div>
                </CardHeader>
                <Divider />
                <CardBody>
                  <p className="text-sm text-slate-600 text-start">{r.note}</p>
                </CardBody>
              </Card>
            ))
          )}
        </div>

        {filtered.length > 0 && (
          <div className="pt-2 text-center">
            <Button
              variant="flat"
              color="danger"
              size="sm"
              onPress={() => alert("تم مسح جميع التقييمات")}
            >
              مسح جميع التقييمات
            </Button>
          </div>
        )}
      </CardBody>
    </Card>
  );
}