"use client";

import { useEffect, useState } from "react";
import { getDailyRecap } from "@/lib/api";
import type { DailyRecap as DailyRecapType } from "@/lib/api";
import { Sparkles, Hash, MessageSquare, AtSign, MessagesSquare, RefreshCw, Loader2 } from "lucide-react";

export function DailyRecap() {
  const [recap, setRecap] = useState<DailyRecapType | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const loadRecap = () => {
    setLoading(true);
    setError("");
    getDailyRecap()
      .then((data) => setRecap(data))
      .catch((err) => {
        console.error("Failed to load daily recap:", err);
        setError("Failed to generate daily recap");
      })
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    loadRecap();
  }, []);

  if (loading) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-gray-400">
        <Loader2 size={32} className="animate-pulse mb-3" />
        <p className="text-sm">Generating your daily recap...</p>
        <p className="text-xs text-gray-300 mt-1">This may take a few seconds</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-slack-red">
        <p className="text-sm">{error}</p>
        <button
          onClick={loadRecap}
          className="mt-3 flex items-center gap-1 px-3 py-1.5 rounded-md bg-slack-purple text-white text-xs hover:bg-slack-darkpurple transition-colors"
        >
          <RefreshCw size={12} />
          Retry
        </button>
      </div>
    );
  }

  if (!recap) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-gray-400">
        <Sparkles size={48} className="mb-3 opacity-50" />
        <p className="text-sm">No recap available.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4 p-4 max-w-3xl">
      {/* Header */}
      <div className="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
        <div className="flex items-center gap-2 mb-2">
          <Sparkles size={18} className="text-slack-yellow" />
          <h3 className="font-semibold text-gray-800">
            Daily Recap — {new Date(recap.date).toLocaleDateString("en-US", {
              weekday: "long",
              month: "long",
              day: "numeric",
            })}
          </h3>
        </div>
        <p className="text-sm text-gray-700 whitespace-pre-wrap">{recap.summary}</p>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 gap-3">
        <div className="p-3 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center gap-2">
          <AtSign size={20} className="text-slack-purple" />
          <div>
            <p className="text-2xl font-bold text-gray-800">{recap.mentions}</p>
            <p className="text-xs text-gray-400">Mentions</p>
          </div>
        </div>
        <div className="p-3 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center gap-2">
          <MessagesSquare size={20} className="text-slack-green" />
          <div>
            <p className="text-2xl font-bold text-gray-800">{recap.threads}</p>
            <p className="text-xs text-gray-400">Thread replies</p>
          </div>
        </div>
      </div>

      {/* Channel Breakdown */}
      {recap.channels && recap.channels.length > 0 && (
        <div className="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
          <h3 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-1.5">
            <Hash size={14} className="text-slack-blue" />
            Channel Activity
          </h3>
          <div className="space-y-3">
            {recap.channels.map((ch, idx) => (
              <div key={idx} className="space-y-1">
                <div className="flex items-center justify-between text-sm">
                  <span className="font-medium text-gray-700">
                    #{ch.channel_name}
                  </span>
                  <span className="text-xs text-gray-400">
                    {ch.message_count} messages
                  </span>
                </div>
                {ch.highlights && ch.highlights.length > 0 && (
                  <ul className="ml-4 space-y-0.5">
                    {ch.highlights.map((hl, hIdx) => (
                      <li
                        key={hIdx}
                        className="text-xs text-gray-500 flex items-start gap-1"
                      >
                        <MessageSquare size={8} className="flex-shrink-0 mt-1 text-gray-300" />
                        {hl}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Refresh */}
      <div className="flex justify-center">
        <button
          onClick={loadRecap}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm text-slack-purple hover:bg-slack-purple/10 transition-colors"
        >
          <RefreshCw size={14} />
          Refresh Recap
        </button>
      </div>
    </div>
  );
}

export default DailyRecap;