"use client";

import { Card, Button, Badge } from "@/shared/components";
import { cn } from "@/shared/utils/cn";

export default function PlanClient({ isAdmin, currentUser }) {
  return (
    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-semibold">Plan & Billing</h1>
        <p className="text-sm text-text-muted mt-1">
          Manage your subscription and view billing history
        </p>
      </div>

      {/* Current Plan Section */}
      <CurrentPlanCard />

      {/* Usage Limits Section */}
      <UsageLimitsCard />

      {/* Billing History Section */}
      <BillingHistoryCard />

      {/* Admin Section - Only visible to admins */}
      {isAdmin && <AdminPlanManagement />}
    </div>
  );
}

function CurrentPlanCard() {
  return (
    <Card padding="md">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="p-2 rounded-[10px] bg-bg text-text-muted">
            <span className="material-symbols-outlined text-[20px]">verified</span>
          </div>
          <div>
            <h3 className="text-text-main font-semibold">Current Plan</h3>
            <p className="text-sm text-text-muted">Your active subscription</p>
          </div>
        </div>
        <Badge variant="success" size="sm">Active</Badge>
      </div>
      
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="p-4 rounded-[10px] bg-bg">
          <p className="text-xs text-text-muted uppercase tracking-wide">Plan Name</p>
          <p className="text-lg font-semibold text-text-main mt-1">Free Plan</p>
        </div>
        <div className="p-4 rounded-[10px] bg-bg">
          <p className="text-xs text-text-muted uppercase tracking-wide">Billing Cycle</p>
          <p className="text-lg font-semibold text-text-main mt-1">—</p>
        </div>
      </div>
      
      <div className="mt-4 flex gap-3">
        <Button variant="outline" size="sm">
          <span className="material-symbols-outlined text-[16px] mr-1.5">upgrade</span>
          Upgrade Plan
        </Button>
        <Button variant="ghost" size="sm">
          Compare Plans
        </Button>
      </div>
    </Card>
  );
}

function UsageLimitsCard() {
  // Placeholder data - will be replaced with real API data
  const limits = [
    { label: "Tokens Used", used: 0, limit: 1000000, unit: "tokens" },
    { label: "Requests Made", used: 0, limit: 1000, unit: "requests" },
    { label: "Storage Used", used: 0, limit: 1024, unit: "MB" },
  ];

  return (
    <Card padding="md">
      <div className="flex items-center gap-3 mb-4">
        <div className="p-2 rounded-[10px] bg-bg text-text-muted">
          <span className="material-symbols-outlined text-[20px]">data_usage</span>
        </div>
        <div>
          <h3 className="text-text-main font-semibold">Usage Limits</h3>
          <p className="text-sm text-text-muted">Current billing period usage</p>
        </div>
      </div>
      
      <div className="space-y-4">
        {limits.map((limit) => {
          const percentage = limit.limit > 0 
            ? Math.min((limit.used / limit.limit) * 100, 100) 
            : 0;
          
          return (
            <div key={limit.label} className="space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span className="text-text-muted">{limit.label}</span>
                <span className="text-text-main font-medium">
                  {limit.used.toLocaleString()} / {limit.limit.toLocaleString()} {limit.unit}
                </span>
              </div>
              <div className="h-2 bg-bg rounded-full overflow-hidden">
                <div 
                  className={cn(
                    "h-full rounded-full transition-all",
                    percentage > 90 ? "bg-red-500" : 
                    percentage > 70 ? "bg-yellow-500" : "bg-brand-500"
                  )}
                  style={{ width: `${percentage}%` }}
                />
              </div>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

function BillingHistoryCard() {
  return (
    <Card padding="md">
      <div className="flex items-center gap-3 mb-4">
        <div className="p-2 rounded-[10px] bg-bg text-text-muted">
          <span className="material-symbols-outlined text-[20px]">receipt_long</span>
        </div>
        <div>
          <h3 className="text-text-main font-semibold">Billing History</h3>
          <p className="text-sm text-text-muted">Past invoices and payments</p>
        </div>
      </div>
      
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <span className="material-symbols-outlined text-[48px] text-text-muted/30 mb-4">
          receipt
        </span>
        <p className="text-sm text-text-muted">No billing history yet</p>
        <p className="text-xs text-text-muted/60 mt-1">
          Invoices will appear here once you upgrade to a paid plan
        </p>
      </div>
    </Card>
  );
}

function AdminPlanManagement() {
  return (
    <Card padding="md" className="border-brand-500/20">
      <div className="flex items-center gap-3 mb-4">
        <div className="p-2 rounded-[10px] bg-brand-500/10 text-brand-500">
          <span className="material-symbols-outlined text-[20px]">admin_panel_settings</span>
        </div>
        <div>
          <h3 className="text-text-main font-semibold">Admin: Plan Management</h3>
          <p className="text-sm text-text-muted">Manage user subscriptions</p>
        </div>
      </div>
      
      <div className="flex flex-col items-center justify-center py-8 text-center">
        <span className="material-symbols-outlined text-[48px] text-brand-500/30 mb-4">
          engineering
        </span>
        <p className="text-sm text-text-muted">Coming Soon</p>
        <p className="text-xs text-text-muted/60 mt-1">
          User plan management features are under development
        </p>
        <Button variant="outline" size="sm" className="mt-4" disabled>
          <span className="material-symbols-outlined text-[16px] mr-1.5">construction</span>
          Under Development
        </Button>
      </div>
    </Card>
  );
}
