import { AppLayout } from '@/components/layout/AppLayout';
import { OrganizationProfileCard } from '@/features/settings/components/OrganizationProfileCard';
import { PayoutBankingCard } from '@/features/settings/components/PayoutBankingCard';
import { TeamSecurityCard } from '@/features/settings/components/TeamSecurityCard';
import { DeveloperSection } from '@/features/settings/components/DeveloperSection';

export default function Settings() {
  return (
    <AppLayout
      title="Settings"
      description="Manage platform configuration and critical operations."
    >
      <div className="space-y-6 max-w-[1200px]">
        {/* Top Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto lg:h-[400px]">
          {/* Box 1: Organization Identity (High Priority) */}
          <OrganizationProfileCard />

          {/* Box 2: Financials & Banking (High Priority) */}
          <PayoutBankingCard />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Box 3: Security (Full Width on Mobile, 2/3 on Desktop if needed, but here simple 1/3 stack or full width row) */}
          {/* Adjusting layout: Let's make Security taking full row or sidebar style. 
                Based on requirements "2x2 Grid or Vertical Stack".
                Let's stick to a clean layout where Security sits next to maybe a logs panel or just takes full width.
                Actually, the requirements said "Layout: 2x2 Grid". 
                Let's put Team & Security as the 3rd box, and maybe Developer as 4th?
                But Developer is collapsible.
            */}
          <div className="lg:col-span-2">
            <TeamSecurityCard />
          </div>
          <div className="lg:col-span-1">
            {/* Placeholder or Tip card? Or maybe just make TeamSecurityCard full width if it has lists.
                     The TeamSecurityCard design I made is card-like.
                     Let's span it across 2 columns for better readability of the list.
                  */}
            <div className="neu-card p-6 h-full bg-gradient-to-br from-primary/5 to-transparent border-primary/20">
              <h4 className="font-bold text-lg mb-2">Need Help?</h4>
              <p className="text-sm text-muted-foreground mb-4">
                Contact our dedicated support team for assistance with account configurations.
              </p>
              <button className="text-sm font-bold text-primary hover:underline">
                Open Support Ticket &rarr;
              </button>
            </div>
          </div>
        </div>

        {/* Collapsible Developer Section */}
        <DeveloperSection />
      </div>
    </AppLayout>
  );
}