import { SyncButton } from '@/components/search/SyncButton';
import { PolicyExplorerClient } from './PolicyExplorerClient';
import { getRecentPolicySettings } from '@/lib/actions/policySettings';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Policy Explorer | TenantPilot',
  description: 'Browse and search Microsoft Intune policy settings with detailed views and filtering',
};

export default async function SearchPage() {
  // Fetch initial 50 newest policies on server
  const initialData = await getRecentPolicySettings(50);

  return (
    <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
      <div className="mx-auto w-full max-w-6xl">
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Policy Explorer</CardTitle>
                <CardDescription>
                  Browse and search Intune policy settings
                </CardDescription>
              </div>
              <SyncButton />
            </div>
          </CardHeader>
          <CardContent>
            <PolicyExplorerClient initialPolicies={initialData.data ?? []} />
          </CardContent>
        </Card>
      </div>
    </main>
  );
}