import { getAllPolicySettings } from '@/lib/actions/policySettings';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { formatDistanceToNow } from 'date-fns';
import { de } from 'date-fns/locale';

export default async function SettingsOverviewPage() {
  const result = await getAllPolicySettings();

  if (!result.success) {
    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>
              <CardTitle>Policy Settings Overview</CardTitle>
              <CardDescription>
                {result.error || 'Failed to load settings'}
              </CardDescription>
            </CardHeader>
          </Card>
        </div>
      </main>
    );
  }

  const settings = result.data || [];

  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>
            <CardTitle>Policy Settings Overview</CardTitle>
            <CardDescription>
              {settings.length} policy setting{settings.length !== 1 ? 's' : ''} found
            </CardDescription>
          </CardHeader>
          <CardContent>
            {settings.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-12 text-center">
                <p className="text-muted-foreground">No policy settings found</p>
                <p className="mt-2 text-sm text-muted-foreground">
                  Try syncing your policies first
                </p>
              </div>
            ) : (
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Policy Name</TableHead>
                      <TableHead>Policy Type</TableHead>
                      <TableHead>Setting Name</TableHead>
                      <TableHead>Setting Value</TableHead>
                      <TableHead className="text-right">Last Synced</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {settings.map((setting) => (
                      <TableRow key={setting.id}>
                        <TableCell className="font-medium">
                          {setting.policyName}
                        </TableCell>
                        <TableCell>
                          <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
                            {setting.policyType}
                          </span>
                        </TableCell>
                        <TableCell className="font-mono text-xs">
                          {setting.settingName}
                        </TableCell>
                        <TableCell className="max-w-md truncate">
                          {setting.settingValue}
                        </TableCell>
                        <TableCell className="text-right text-sm text-muted-foreground">
                          {formatDistanceToNow(new Date(setting.lastSyncedAt), {
                            addSuffix: true,
                            locale: de,
                          })}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </main>
  );
}