import { DollarSign, Check, Star, Zap } from "lucide-react";
import { ProtectedRoute } from "~/components/protected-route";
import { Header } from "~/components/header";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card/card";
import { Badge } from "~/components/ui/badge/badge";
import { Button } from "~/components/ui/button/button";
import { mockSubscriptions } from "~/data/servers";
import styles from "./subscriptions.module.css";

export default function Subscriptions() {
  return (
    <ProtectedRoute>
      <div className={styles.container}>
        <Header />
        <main className={styles.content}>
          <div className={styles.pageHeader}>
            <div>
              <h1 className={styles.pageTitle}>مدیریت اشتراک‌ها</h1>
              <p className={styles.pageDescription}>مدیریت پکیج‌ها و قیمت‌گذاری سرویس VPN</p>
            </div>
            <Button>
              <DollarSign style={{ width: "16px", height: "16px", marginLeft: "var(--space-2)" }} />
              افزودن پکیج جدید
            </Button>
          </div>

          <div className={styles.subscriptionsGrid}>
            {mockSubscriptions.map((sub) => (
              <Card key={sub.id} className={`${styles.subscriptionCard} ${sub.popular ? styles.popular : ""}`}>
                {sub.popular && (
                  <div className={styles.popularBadge}>
                    <Star size={14} />
                    محبوب‌ترین
                  </div>
                )}

                <CardHeader className={styles.subscriptionHeader}>
                  <div className={styles.iconWrapper}>
                    {sub.id === "1" && <Zap size={28} />}
                    {sub.id === "2" && <Star size={28} />}
                    {sub.id === "3" && <DollarSign size={28} />}
                  </div>
                  <CardTitle className={styles.planName}>{sub.name}</CardTitle>
                  <div className={styles.pricing}>
                    <span className={styles.price}>{sub.price.toLocaleString("fa-IR")}</span>
                    <span className={styles.currency}>{sub.currency}</span>
                  </div>
                  <p className={styles.duration}>{sub.duration} روزه</p>
                </CardHeader>

                <CardContent className={styles.subscriptionContent}>
                  <div className={styles.specs}>
                    <div className={styles.spec}>
                      <span className={styles.specLabel}>حجم ترافیک:</span>
                      <span className={styles.specValue}>{sub.bandwidth === -1 ? "نامحدود" : `${sub.bandwidth} GB`}</span>
                    </div>
                    <div className={styles.spec}>
                      <span className={styles.specLabel}>تعداد دستگاه:</span>
                      <span className={styles.specValue}>{sub.devices === -1 ? "نامحدود" : sub.devices}</span>
                    </div>
                  </div>

                  <div className={styles.features}>
                    <p className={styles.featuresTitle}>امکانات:</p>
                    <ul className={styles.featuresList}>
                      {sub.features.map((feature, index) => (
                        <li key={index} className={styles.feature}>
                          <Check size={16} className={styles.checkIcon} />
                          <span>{feature}</span>
                        </li>
                      ))}
                    </ul>
                  </div>

                  <div className={styles.actions}>
                    <Button variant="outline" className={styles.actionButton}>
                      ویرایش
                    </Button>
                    <Button variant="outline" className={styles.actionButton}>
                      آمار فروش
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          <Card className={styles.statsCard}>
            <CardHeader>
              <CardTitle>آمار فروش</CardTitle>
            </CardHeader>
            <CardContent>
              <div className={styles.salesStats}>
                <div className={styles.salesStat}>
                  <div className={styles.salesStatIcon} style={{ background: "var(--violet-3)", color: "var(--violet-11)" }}>
                    <DollarSign size={24} />
                  </div>
                  <div className={styles.salesStatInfo}>
                    <p className={styles.salesStatLabel}>فروش کل ماه جاری</p>
                    <h3 className={styles.salesStatValue}>48.5 میلیون تومان</h3>
                    <p className={styles.salesStatChange}>+15٪ نسبت به ماه قبل</p>
                  </div>
                </div>

                <div className={styles.salesStat}>
                  <div className={styles.salesStatIcon} style={{ background: "var(--cyan-3)", color: "var(--cyan-11)" }}>
                    <Zap size={24} />
                  </div>
                  <div className={styles.salesStatInfo}>
                    <p className={styles.salesStatLabel}>محبوب‌ترین پکیج</p>
                    <h3 className={styles.salesStatValue}>حرفه‌ای</h3>
                    <p className={styles.salesStatChange}>642 خرید در این ماه</p>
                  </div>
                </div>

                <div className={styles.salesStat}>
                  <div className={styles.salesStatIcon} style={{ background: "var(--green-3)", color: "var(--green-11)" }}>
                    <Star size={24} />
                  </div>
                  <div className={styles.salesStatInfo}>
                    <p className={styles.salesStatLabel}>نرخ تمدید</p>
                    <h3 className={styles.salesStatValue}>78٪</h3>
                    <p className={styles.salesStatChange}>کاربران اشتراک خود را تمدید می‌کنند</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </main>
      </div>
    </ProtectedRoute>
  );
}