"use client";

import { useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import {
  ArrowRight,
  ArrowRightLeft,
  Crown,
  Clock,
  AlertTriangle,
  BarChart3,
} from "lucide-react";
import { ProtectedRoute } from "@/components/layout/ProtectedRoute";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { PageLoader } from "@/components/shared/Loader";
import { useAuth } from "@/hooks/useAuth";
import { useSubscription } from "@/hooks/useSubscription";
import {
  formatDate,
  daysUntil,
  getStatusLabel,
  getStatusBadgeClass,
} from "@/utils";
import { ROUTES } from "@/constants";

function DashboardContent() {
  const { user } = useAuth();
  const {
    subscription,
    fetchSub,
    isLoading,
    hasAccess,
    isTrialing,
    hasScheduledPlanChange,
  } = useSubscription();

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

  if (isLoading && !subscription) {
    return <PageLoader text="Loading your dashboard…" />;
  }

  const daysLeft = subscription?.current_period_end
    ? daysUntil(subscription.current_period_end)
    : 0;

  const trialDaysLeft = subscription?.trial_end
    ? daysUntil(subscription.trial_end)
    : 0;

  return (
    <div className="relative min-h-[calc(100vh-4rem)] px-4 py-10">
      {/* Background */}
      <div className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute top-0 right-0 w-[400px] h-[400px] rounded-full bg-brand-500/[0.03] dark:bg-brand-400/[0.05] blur-[100px]" />
      </div>

      <div className="max-w-5xl mx-auto space-y-8 animate-fade-in">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold">
              Welcome back,{" "}
              <span className="text-brand-500 dark:text-brand-300">
                {user?.first_name || user?.email?.split("@")[0]}
              </span>
            </h1>
            <p className="text-muted-foreground mt-1">
              Here&apos;s your current plan overview.
            </p>
          </div>
          {!hasAccess && (
            <Button variant="gold" asChild>
              <Link href={ROUTES.PRICING}>
                <Image src="/logo.png" alt="" width={16} height={16} className="object-contain" /> Upgrade Plan
              </Link>
            </Button>
          )}
        </div>

        {/* Trial Warning Banner */}
        {isTrialing && trialDaysLeft <= 1 && (
          <div className="rounded-xl border border-amber-500/20 bg-amber-50 dark:bg-amber-500/5 p-4 flex items-start gap-3">
            <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
            <div className="flex-1">
              <p className="text-sm font-medium text-amber-700 dark:text-amber-400">
                Your free trial ends{" "}
                {trialDaysLeft === 0 ? "today" : "tomorrow"}!
              </p>
              <p className="text-xs text-muted-foreground mt-0.5">
                Upgrade to a premium plan to keep full access.
              </p>
            </div>
            <Button variant="gold" size="sm" asChild>
              <Link href={ROUTES.PRICING}>Upgrade</Link>
            </Button>
          </div>
        )}

        {/* Restricted Banner */}
        {!hasAccess && subscription && (
          <div className="rounded-xl border border-destructive/20 bg-destructive/5 p-4 flex items-start gap-3">
            <AlertTriangle className="h-5 w-5 text-destructive mt-0.5 shrink-0" />
            <div className="flex-1">
              <p className="text-sm font-medium text-destructive">
                You&apos;re in restricted mode
              </p>
              <p className="text-xs text-muted-foreground mt-0.5">
                You can view your data, but cannot create or edit records.
                Upgrade to regain full access.
              </p>
            </div>
            <Button variant="gold" size="sm" asChild>
              <Link href={ROUTES.PRICING}>Upgrade Now</Link>
            </Button>
          </div>
        )}

        {/* Scheduled Plan Change Banner */}
        {hasScheduledPlanChange && subscription && (
          <div className="rounded-xl border border-blue-500/20 bg-blue-50 dark:bg-blue-500/5 p-4 flex items-start gap-3">
            <ArrowRightLeft className="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" />
            <div className="flex-1">
              <p className="text-sm font-medium text-blue-700 dark:text-blue-400">
                Plan change scheduled
              </p>
              <p className="text-xs text-muted-foreground mt-0.5">
                Your <strong>{subscription.next_plan_name}</strong> plan will
                start on{" "}
                <strong>
                  {formatDate(subscription.next_plan_start_date!)}
                </strong>
                , after your current plan ends.
              </p>
            </div>
            <Button variant="glass" size="sm" asChild>
              <Link href={ROUTES.ACCOUNT}>Details</Link>
            </Button>
          </div>
        )}

        {/* Stats Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {/* Plan Status */}
          <Card className="hover:shadow-card-hover transition-shadow">
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
                <Crown className="h-4 w-4 text-brand-500 dark:text-brand-300" />
                Current Plan
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <span className="text-2xl font-bold">
                    {subscription
                      ? subscription.plan_name || "Free Trial"
                      : "No Plan"}
                  </span>
                </div>
                {subscription && (
                  <span
                    className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold ${getStatusBadgeClass(subscription.status)}`}
                  >
                    {getStatusLabel(subscription.status)}
                  </span>
                )}
                {!subscription && (
                  <Button variant="gold-outline" size="sm" asChild>
                    <Link href={ROUTES.PRICING}>Get Started</Link>
                  </Button>
                )}
              </div>
            </CardContent>
          </Card>

          {/* Days Remaining */}
          {subscription && (
            <Card className="hover:shadow-card-hover transition-shadow">
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
                  <Clock className="h-4 w-4 text-brand-500 dark:text-brand-300" />
                  {isTrialing ? "Trial Remaining" : "Days Until Renewal"}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-1">
                  <p className="text-3xl font-bold">
                    {isTrialing ? trialDaysLeft : daysLeft}
                    <span className="text-lg font-normal text-muted-foreground ml-1">
                      days
                    </span>
                  </p>
                  <p className="text-xs text-muted-foreground">
                    {isTrialing
                      ? `Trial ends ${formatDate(subscription.trial_end!)}`
                      : `Renews ${formatDate(subscription.current_period_end!)}`}
                  </p>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Access Status */}
          <Card className="hover:shadow-card-hover transition-shadow">
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
                <BarChart3 className="h-4 w-4 text-brand-500 dark:text-brand-300" />
                Access Level
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                <p className="text-2xl font-bold">
                  {hasAccess ? "Full Access" : "Restricted"}
                </p>
                <p className="text-xs text-muted-foreground">
                  {hasAccess
                    ? "Create, edit, and view all records"
                    : "View only — upgrade for full access"}
                </p>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Quick Actions */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <Card className="hover:border-brand-500/20 hover:shadow-card-hover transition-all cursor-pointer group">
            <Link href={ROUTES.ACCOUNT}>
              <CardContent className="p-6 flex items-center justify-between">
                <div>
                  <p className="font-semibold">Manage Account</p>
                  <p className="text-sm text-muted-foreground mt-1">
                    View profile and subscription details
                  </p>
                </div>
                <ArrowRight className="h-5 w-5 text-muted-foreground group-hover:text-brand-500 dark:group-hover:text-brand-300 group-hover:translate-x-1 transition-all" />
              </CardContent>
            </Link>
          </Card>

          <Card className="hover:border-brand-500/20 hover:shadow-card-hover transition-all cursor-pointer group">
            <Link href={ROUTES.TRANSACTIONS}>
              <CardContent className="p-6 flex items-center justify-between">
                <div>
                  <p className="font-semibold">Billing History</p>
                  <p className="text-sm text-muted-foreground mt-1">
                    View payment transactions
                  </p>
                </div>
                <ArrowRight className="h-5 w-5 text-muted-foreground group-hover:text-brand-500 dark:group-hover:text-brand-300 group-hover:translate-x-1 transition-all" />
              </CardContent>
            </Link>
          </Card>
        </div>
      </div>
    </div>
  );
}

export default function DashboardPage() {
  return (
    <ProtectedRoute>
      <DashboardContent />
    </ProtectedRoute>
  );
}