import { useState } from "react";
import { MessageSquare, Clock, CheckCircle, AlertCircle, User } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs/tabs";
import { mockTickets } from "~/data/servers";
import styles from "./tickets.module.css";

export default function Tickets() {
  const [activeTab, setActiveTab] = useState("all");

  const getStatusColor = (status: string) => {
    switch (status) {
      case "open":
        return { bg: "var(--color-info-3)", color: "var(--color-info-11)", border: "var(--color-info-6)" };
      case "in-progress":
        return { bg: "var(--color-warning-3)", color: "var(--color-warning-11)", border: "var(--color-warning-6)" };
      case "closed":
        return { bg: "var(--color-success-3)", color: "var(--color-success-11)", border: "var(--color-success-6)" };
      default:
        return { bg: "var(--color-neutral-3)", color: "var(--color-neutral-11)", border: "var(--color-neutral-6)" };
    }
  };

  const getStatusText = (status: string) => {
    switch (status) {
      case "open":
        return "باز";
      case "in-progress":
        return "در حال بررسی";
      case "closed":
        return "بسته شده";
      default:
        return "نامشخص";
    }
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "urgent":
        return { bg: "var(--color-error-3)", color: "var(--color-error-11)", border: "var(--color-error-6)" };
      case "high":
        return { bg: "var(--color-warning-3)", color: "var(--color-warning-11)", border: "var(--color-warning-6)" };
      case "medium":
        return { bg: "var(--color-info-3)", color: "var(--color-info-11)", border: "var(--color-info-6)" };
      case "low":
        return { bg: "var(--color-neutral-3)", color: "var(--color-neutral-11)", border: "var(--color-neutral-6)" };
      default:
        return { bg: "var(--color-neutral-3)", color: "var(--color-neutral-11)", border: "var(--color-neutral-6)" };
    }
  };

  const getPriorityText = (priority: string) => {
    switch (priority) {
      case "urgent":
        return "فوری";
      case "high":
        return "بالا";
      case "medium":
        return "متوسط";
      case "low":
        return "پایین";
      default:
        return "نامشخص";
    }
  };

  const getCategoryText = (category: string) => {
    switch (category) {
      case "technical":
        return "فنی";
      case "billing":
        return "مالی";
      case "general":
        return "عمومی";
      default:
        return "نامشخص";
    }
  };

  const filteredTickets = mockTickets.filter((ticket) => {
    if (activeTab === "all") return true;
    return ticket.status === activeTab;
  });

  const openTickets = mockTickets.filter((t) => t.status === "open").length;
  const inProgressTickets = mockTickets.filter((t) => t.status === "in-progress").length;
  const closedTickets = mockTickets.filter((t) => t.status === "closed").length;

  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}>پشتیبانی و رسیدگی به درخواست‌های کاربران</p>
            </div>
          </div>

          <div className={styles.statsGrid}>
            <Card className={styles.statCard}>
              <CardContent className={styles.statContent}>
                <div className={styles.statIcon} style={{ background: "var(--info-3)", color: "var(--info-11)" }}>
                  <MessageSquare size={24} />
                </div>
                <div className={styles.statInfo}>
                  <p className={styles.statLabel}>تیکت‌های باز</p>
                  <h3 className={styles.statValue}>{openTickets}</h3>
                </div>
              </CardContent>
            </Card>

            <Card className={styles.statCard}>
              <CardContent className={styles.statContent}>
                <div className={styles.statIcon} style={{ background: "var(--warning-3)", color: "var(--warning-11)" }}>
                  <Clock size={24} />
                </div>
                <div className={styles.statInfo}>
                  <p className={styles.statLabel}>در حال بررسی</p>
                  <h3 className={styles.statValue}>{inProgressTickets}</h3>
                </div>
              </CardContent>
            </Card>

            <Card className={styles.statCard}>
              <CardContent className={styles.statContent}>
                <div className={styles.statIcon} style={{ background: "var(--success-3)", color: "var(--success-11)" }}>
                  <CheckCircle size={24} />
                </div>
                <div className={styles.statInfo}>
                  <p className={styles.statLabel}>بسته شده</p>
                  <h3 className={styles.statValue}>{closedTickets}</h3>
                </div>
              </CardContent>
            </Card>
          </div>

          <Card className={styles.ticketsCard}>
            <CardHeader>
              <CardTitle>لیست تیکت‌ها</CardTitle>
            </CardHeader>
            <CardContent>
              <Tabs value={activeTab} onValueChange={setActiveTab}>
                <TabsList className={styles.tabsList}>
                  <TabsTrigger value="all">همه ({mockTickets.length})</TabsTrigger>
                  <TabsTrigger value="open">باز ({openTickets})</TabsTrigger>
                  <TabsTrigger value="in-progress">در حال بررسی ({inProgressTickets})</TabsTrigger>
                  <TabsTrigger value="closed">بسته شده ({closedTickets})</TabsTrigger>
                </TabsList>

                <TabsContent value={activeTab} className={styles.tabContent}>
                  <div className={styles.ticketsList}>
                    {filteredTickets.map((ticket) => {
                      const statusStyle = getStatusColor(ticket.status);
                      const priorityStyle = getPriorityColor(ticket.priority);

                      return (
                        <Card key={ticket.id} className={styles.ticketCard}>
                          <CardContent className={styles.ticketContent}>
                            <div className={styles.ticketHeader}>
                              <div className={styles.ticketTitle}>
                                <MessageSquare size={18} />
                                <h3>{ticket.subject}</h3>
                              </div>
                              <div className={styles.ticketBadges}>
                                <Badge style={{ background: statusStyle.bg, color: statusStyle.color, border: `1px solid ${statusStyle.border}` }}>
                                  {getStatusText(ticket.status)}
                                </Badge>
                                <Badge style={{ background: priorityStyle.bg, color: priorityStyle.color, border: `1px solid ${priorityStyle.border}` }}>
                                  {getPriorityText(ticket.priority)}
                                </Badge>
                                <Badge variant="secondary">{getCategoryText(ticket.category)}</Badge>
                              </div>
                            </div>

                            <div className={styles.ticketMeta}>
                              <div className={styles.ticketUser}>
                                <User size={14} />
                                <span>{ticket.userName}</span>
                                <span className={styles.ticketEmail}>{ticket.userEmail}</span>
                              </div>
                              <div className={styles.ticketDates}>
                                <span>
                                  ایجاد: {new Date(ticket.createdAt).toLocaleDateString("fa-IR", { year: "numeric", month: "long", day: "numeric" })}
                                </span>
                                <span>
                                  بروزرسانی: {new Date(ticket.updatedAt).toLocaleDateString("fa-IR", { year: "numeric", month: "long", day: "numeric" })}
                                </span>
                              </div>
                            </div>

                            <div className={styles.ticketMessages}>
                              <p className={styles.messagesTitle}>پیام‌ها ({ticket.messages.length}):</p>
                              <div className={styles.messagesList}>
                                {ticket.messages.map((msg) => (
                                  <div key={msg.id} className={`${styles.message} ${msg.role === "admin" ? styles.adminMessage : styles.userMessage}`}>
                                    <div className={styles.messageHeader}>
                                      <span className={styles.messageAuthor}>{msg.author}</span>
                                      <span className={styles.messageTime}>
                                        {new Date(msg.timestamp).toLocaleTimeString("fa-IR", { hour: "2-digit", minute: "2-digit" })}
                                      </span>
                                    </div>
                                    <p className={styles.messageText}>{msg.message}</p>
                                  </div>
                                ))}
                              </div>
                            </div>

                            <div className={styles.ticketActions}>
                              <Button size="sm">پاسخ</Button>
                              <Button variant="outline" size="sm">
                                مشاهده جزئیات
                              </Button>
                              {ticket.status !== "closed" && (
                                <Button variant="outline" size="sm">
                                  بستن تیکت
                                </Button>
                              )}
                            </div>
                          </CardContent>
                        </Card>
                      );
                    })}
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        </main>
      </div>
    </ProtectedRoute>
  );
}