"use client";

import { useParams } from "next/navigation";
import Link from "next/link";
import Layout from "@/app/components/Layout";
import { useGetPlanQuery } from "@/redux/apis/planApi";
import { ArrowLeft, Edit, Calendar, DollarSign,  Tag } from "lucide-react";

export default function ViewPlanPage() {
    const params = useParams();
   
    const id = Number(params.id);

    const { data, isLoading, error } = useGetPlanQuery(id);

    if (isLoading) {
        return (
            <Layout>
                <div className="flex items-center justify-center min-h-screen">
                    <div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
                </div>
            </Layout>
        );
    }

    if (error || !data?.data) {
        return (
            <Layout>
                <div className="p-6">
                    <div className="max-w-4xl mx-auto">
                        <div className="text-center py-12">
                            <p className="text-red-600 mb-4">Failed to load plan</p>
                            <Link href="/plans" className="text-blue-600 hover:underline">
                                Back to Plans
                            </Link>
                        </div>
                    </div>
                </div>
            </Layout>
        );
    }

    const plan = data.data;
    const discount = plan.originalPrice && plan.originalPrice > plan.price
        ? Math.round(((plan.originalPrice - plan.price) / plan.originalPrice) * 100)
        : 0;

    const getStatusColor = (status: string) => {
        const colors = {
            active: "bg-green-100 text-green-700 border-green-300",
            draft: "bg-yellow-100 text-yellow-700 border-yellow-300",
            inactive: "bg-red-100 text-red-700 border-red-300",
        };
        return colors[status as keyof typeof colors] || colors.draft;
    };

    return (
        <Layout>
            <div className="p-6">
                <div className="max-w-5xl mx-auto">
                    {/* Header */}
                    <div className="flex justify-between items-center mb-6">
                        <Link
                            href="/plans"
                            className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900"
                        >
                            <ArrowLeft className="w-5 h-5" />
                            Back to Plans
                        </Link>
                        <Link
                            href={`/plans/${id}/edit`}
                            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                        >
                            <Edit className="w-4 h-4" />
                            Edit Plan
                        </Link>
                    </div>

                    {/* Plan Details Card */}
                    <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                        {/* Header Section */}
                        <div className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white p-8">
                            <div className="flex items-start justify-between">
                                <div>
                                    <div className="flex items-center gap-3 mb-2">
                                        <h1 className="text-3xl font-bold">{plan.name}</h1>
                                    </div>
                                    <div className="flex items-center gap-4 mt-4">
                                        <span className={`px-4 py-2 rounded-full text-sm font-medium border ${getStatusColor(plan.status)} bg-white`}>
                                            {plan.status.toUpperCase()}
                                        </span>
                                    </div>
                                </div>
                                <div className="text-right">
                                    <p className="text-sm opacity-80 mb-1">Price</p>
                                    <div className="flex items-baseline gap-2">
                                        <span className="text-4xl font-bold">{plan.currency} {plan.price}</span>
                                        {plan.originalPrice && plan.originalPrice > plan.price && (
                                            <span className="text-lg line-through opacity-60">
                                                {plan.originalPrice}
                                            </span>
                                        )}
                                    </div>
                                    {discount > 0 && (
                                        <span className="inline-block mt-2 px-3 py-1 bg-green-500 text-white rounded-full text-sm font-semibold">
                                            {discount}% OFF
                                        </span>
                                    )}
                                </div>
                            </div>
                        </div>

                        {/* Details Section */}
                        <div className="p-8">
                            <div className="grid md:grid-cols-2 gap-8">
                                {/* Description */}
                                <div className="md:col-span-2">
                                    <h2 className="text-xl font-semibold text-gray-900 mb-3 flex items-center gap-2">
                                        <Tag className="w-5 h-5" />
                                        Description
                                    </h2>
                                    <p className="text-gray-700 leading-relaxed">{plan.description}</p>
                                </div>

                                {/* Pricing Details */}
                                <div>
                                    <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
                                        <DollarSign className="w-5 h-5" />
                                        Pricing Details
                                    </h2>
                                    <div className="space-y-3">
                                        <div className="flex justify-between">
                                            <span className="text-gray-600">Current Price:</span>
                                            <span className="font-semibold">{plan.currency} {plan.price}</span>
                                        </div>
                                        {plan.originalPrice && (
                                            <div className="flex justify-between">
                                                <span className="text-gray-600">Original Price:</span>
                                                <span className="font-semibold">{plan.currency} {plan.originalPrice}</span>
                                            </div>
                                        )}
                                        <div className="flex justify-between">
                                            <span className="text-gray-600">Currency:</span>
                                            <span className="font-semibold">{plan.currency}</span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-gray-600">Validity:</span>
                                            <span className="font-semibold">{plan.validity} days</span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-gray-600">Target Audience:</span>
                                            <span className="font-semibold">{plan.planFor}</span>
                                        </div>
                                    </div>
                                </div>

                                {/* Kit Information */}


                                {/* Metadata */}
                                <div className="md:col-span-2 pt-6 border-t border-gray-200">
                                    <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
                                        <Calendar className="w-5 h-5" />
                                        Metadata
                                    </h2>
                                    <div className="grid md:grid-cols-2 gap-4">
                                        <div className="flex justify-between">
                                            <span className="text-gray-600">Plan ID:</span>
                                            <span className="font-semibold">#{plan.id}</span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-gray-600">Active Status:</span>
                                            <span className={`font-semibold ${plan.isActive ? 'text-green-600' : 'text-red-600'}`}>
                                                {plan.isActive ? 'Active' : 'Inactive'}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-gray-600">Created At:</span>
                                            <span className="font-semibold">
                                                {new Date(plan.createdAt).toLocaleDateString()}
                                            </span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span className="text-gray-600">Last Updated:</span>
                                            <span className="font-semibold">
                                                {new Date(plan.updatedAt).toLocaleDateString()}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    );
}