'use client';

import { Button } from '@tale/ui/button';
import { PageSection } from '@tale/ui/page-section';
import { Skeletonize } from '@tale/ui/skeleton-context';
import { Text } from '@tale/ui/text';
import { Pencil } from 'lucide-react';
import { useMemo, useState } from 'react';

import { useAbility } from '@/app/hooks/use-ability';
import { useT } from '@/lib/i18n/client';
import {
  retentionPolicyConfigSchema,
  type RetentionPolicyConfig,
} from '@/lib/shared/schemas/governance';
import { isRecord } from '@/lib/utils/type-guards';

import { useGovernancePolicy } from '../hooks/queries';
import { useRetentionBounds } from '../hooks/use-retention-bounds';
import { RetentionBoundsProposalBanner } from './retention-bounds-proposal-banner';
import { RetentionEditDrawer } from './retention-edit-drawer';
import { RetentionPendingBanner } from './retention-pending-banner';
import { RetentionPolicySummary } from './retention-policy-summary';

interface RetentionEditorProps {
  organizationId: string;
}

function parseRetentionConfig(policy: unknown): RetentionPolicyConfig {
  const config = isRecord(policy) ? policy : {};
  const result = retentionPolicyConfigSchema.safeParse(config);
  if (result.success) {
    return result.data;
  }
  return { documentsRetentionDays: 90 };
}

// =============================================================================
// Single editor — owns data fetching (policy + bounds), the drawer open state,
// and the loading state. Renders the REAL `PageSection` once, always, wrapped
// in `<Skeletonize>` while the policy loads.
//
// The conditional banners (`RetentionBoundsProposalBanner`,
// `RetentionPendingBanner`) mount only when their async reads return data —
// which never happens during the initial skeleton pass, so they render nothing
// while loading. They stay ABOVE the summary in source order, so any later
// mount only nudges layout below them. While loading, `RetentionPolicySummary`
// renders the same card with its dynamic values masked (the enclosing
// `<Skeletonize>` drives the mask), so the block reserves its real height; the
// Edit action button auto-masks via `<Skeletonize>`.
// =============================================================================
export function RetentionEditor({ organizationId }: RetentionEditorProps) {
  const { t } = useT('governance');
  const { t: tCommon } = useT('common');
  const ability = useAbility();

  const { data: policy, isLoading } = useGovernancePolicy(
    organizationId,
    'retention_policy',
  );
  const { bounds, retentionDisabled } = useRetentionBounds(organizationId);

  const savedConfig = useMemo(
    () => parseRetentionConfig(policy?.config),
    [policy],
  );

  const cannotManage = ability.cannot('write', 'orgSettings');
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <Skeletonize
      loading={isLoading}
      label={t('retentionPolicy.title', 'Retention policy')}
    >
      <PageSection
        title={t('retentionPolicy.title', 'Retention policy')}
        description={t(
          'retentionPolicy.description',
          'Configure how long each data type is kept before deletion.',
        )}
        action={
          <Button
            variant="secondary"
            size="sm"
            icon={Pencil}
            disabled={cannotManage}
            onClick={() => setDrawerOpen(true)}
          >
            {tCommon('actions.edit')}
          </Button>
        }
      >
        {retentionDisabled && (
          <div className="border-warning bg-warning/10 rounded border p-3">
            <Text className="text-sm">
              {t(
                'retentionPolicy.envDisabled',
                'Retention is currently disabled by the operator (TALE_RETENTION_DISABLED=true). Cleanup will not run until the env flag is removed.',
              )}
            </Text>
          </div>
        )}

        <RetentionBoundsProposalBanner organizationId={organizationId} />
        <RetentionPendingBanner organizationId={organizationId} />

        <RetentionPolicySummary config={savedConfig} bounds={bounds} />

        <RetentionEditDrawer
          open={drawerOpen}
          onOpenChange={setDrawerOpen}
          savedConfig={savedConfig}
          bounds={bounds}
          organizationId={organizationId}
          cannotManage={cannotManage}
        />
      </PageSection>
    </Skeletonize>
  );
}
