"use client";

import {
  TrendingUp,
  Hash,
  Clock,
  Lightbulb,
  Loader2,
  RefreshCw,
  BarChart3,
} from "lucide-react";
import type {
  SocialTrendOutput,
  PostIdea,
  BestTimeSlot,
} from "@/lib/types/social-media.types";
import { PlatformBadge } from "./PlatformIcon";

interface TrendsViewProps {
  isAr: boolean;
  trends: SocialTrendOutput[];
  postIdeas: PostIdea[];
  bestTimes: BestTimeSlot[];
  loading: boolean;
  onRefresh: () => Promise<void>;
}

export default function TrendsView({
  isAr,
  trends,
  postIdeas,
  bestTimes,
  loading,
  onRefresh,
}: TrendsViewProps) {
  const dayNames = isAr
    ? ["الأحد", "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت"]
    : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="p-2 rounded-xl bg-gradient-to-br from-orange-500 to-amber-500">
            <TrendingUp className="h-5 w-5 text-white" />
          </div>
          <h3 className="text-lg font-bold text-slate-900">
            {isAr ? "التحليلات والاتجاهات" : "Trends & Insights"}
          </h3>
        </div>
        <button
          onClick={onRefresh}
          disabled={loading}
          className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
        >
          <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
          {isAr ? "تحديث" : "Refresh"}
        </button>
      </div>

      {loading ? (
        <div className="flex items-center justify-center h-64">
          <Loader2 className="h-8 w-8 animate-spin text-amber-500" />
        </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Trending Topics */}
          <div className="bg-white rounded-2xl border border-slate-200 p-5">
            <div className="flex items-center gap-2 mb-4">
              <Hash className="h-5 w-5 text-amber-500" />
              <h4 className="font-semibold text-slate-900">
                {isAr ? "المواضيع الرائجة" : "Trending Topics"}
              </h4>
            </div>
            {trends.length === 0 ? (
              <p className="text-sm text-slate-400 text-center py-8">
                {isAr ? "لا توجد اتجاهات حالياً" : "No trends available yet"}
              </p>
            ) : (
              <div className="space-y-3">
                {trends.slice(0, 8).map((trend) => (
                  <div
                    key={trend.id}
                    className="flex items-center justify-between p-3 bg-slate-50 rounded-xl hover:bg-slate-100 transition-colors"
                  >
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-slate-900 truncate">
                        {trend.title}
                      </p>
                      {trend.description && (
                        <p className="text-xs text-slate-500 truncate mt-0.5">
                          {trend.description}
                        </p>
                      )}
                      {trend.hashtags.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-1">
                          {trend.hashtags.slice(0, 3).map((tag, i) => (
                            <span
                              key={i}
                              className="text-[10px] px-1.5 py-0.5 bg-amber-50 text-amber-700 rounded"
                            >
                              #{tag}
                            </span>
                          ))}
                        </div>
                      )}
                    </div>
                    <div className="flex items-center gap-2 ml-3">
                      {trend.platform && (
                        <PlatformBadge platform={trend.platform} />
                      )}
                      <div className="text-right">
                        <span className="text-sm font-bold text-amber-600">
                          {Math.round(trend.score)}
                        </span>
                        <span className="text-[10px] text-slate-400 block">
                          {isAr ? "نقاط" : "score"}
                        </span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Post Ideas */}
          <div className="bg-white rounded-2xl border border-slate-200 p-5">
            <div className="flex items-center gap-2 mb-4">
              <Lightbulb className="h-5 w-5 text-yellow-500" />
              <h4 className="font-semibold text-slate-900">
                {isAr ? "أفكار منشورات" : "Post Ideas"}
              </h4>
            </div>
            {postIdeas.length === 0 ? (
              <p className="text-sm text-slate-400 text-center py-8">
                {isAr ? "لا توجد أفكار حالياً" : "No ideas available yet"}
              </p>
            ) : (
              <div className="space-y-3">
                {postIdeas.slice(0, 5).map((idea, i) => (
                  <div
                    key={i}
                    className="p-3 bg-gradient-to-r from-yellow-50 to-amber-50 rounded-xl border border-yellow-100"
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <p className="text-sm font-medium text-slate-900">
                          {idea.title}
                        </p>
                        <p className="text-xs text-slate-500 mt-1">
                          {idea.description}
                        </p>
                      </div>
                      <PlatformBadge
                        platform={idea.bestPlatform}
                        className="ml-2"
                      />
                    </div>
                    <div className="flex items-center gap-2 mt-2">
                      <Clock className="h-3 w-3 text-slate-400" />
                      <span className="text-[10px] text-slate-500">
                        {isAr ? "أفضل وقت:" : "Best time:"} {idea.bestTime}
                      </span>
                    </div>
                    {idea.hashtags.length > 0 && (
                      <div className="flex flex-wrap gap-1 mt-2">
                        {idea.hashtags.slice(0, 5).map((tag, j) => (
                          <span
                            key={j}
                            className="text-[10px] px-1.5 py-0.5 bg-white text-amber-700 rounded border border-amber-200"
                          >
                            #{tag}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Best Times Heatmap */}
          <div className="bg-white rounded-2xl border border-slate-200 p-5 lg:col-span-2">
            <div className="flex items-center gap-2 mb-4">
              <BarChart3 className="h-5 w-5 text-emerald-500" />
              <h4 className="font-semibold text-slate-900">
                {isAr ? "أفضل أوقات النشر" : "Best Posting Times"}
              </h4>
            </div>
            {bestTimes.length === 0 ? (
              <p className="text-sm text-slate-400 text-center py-8">
                {isAr ? "لا توجد بيانات كافية" : "Not enough data yet"}
              </p>
            ) : (
              <div className="grid grid-cols-7 gap-2">
                {dayNames.map((day, dayIdx) => {
                  const daySlots = bestTimes.filter(
                    (t) => t.dayOfWeek === dayIdx,
                  );
                  const maxScore = Math.max(
                    ...bestTimes.map((t) => t.score),
                    1,
                  );
                  return (
                    <div key={dayIdx} className="text-center">
                      <p className="text-xs font-medium text-slate-600 mb-2">
                        {day}
                      </p>
                      <div className="space-y-1">
                        {daySlots.slice(0, 4).map((slot, i) => {
                          const intensity = slot.score / maxScore;
                          return (
                            <div
                              key={i}
                              className="px-1 py-1.5 rounded text-[10px] font-medium"
                              style={{
                                backgroundColor: `rgba(16, 185, 129, ${intensity * 0.6 + 0.1})`,
                                color: intensity > 0.5 ? "white" : "#065f46",
                              }}
                              title={`${slot.timeLabel}: ${Math.round(slot.score)} score`}
                            >
                              {slot.timeLabel}
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}