'use client';

import { useState } from 'react';
import { Container } from '@/components/common/container';
import {
  Toolbar,
  ToolbarHeading,
} from '@/app/components/layouts/demo1/components/toolbar';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { FunnelBoard } from '@/modules/marketing-analytics/components/FunnelBoard';
import { ActivityExplorer } from '@/modules/marketing-analytics/components/ActivityExplorer';
import { PqlLeads } from '@/modules/marketing-analytics/components/PqlLeads';
import { daysAgo, toDateInput } from '@/modules/marketing-analytics/labels';

/** The ranges a marketing question is usually asked in. */
const PRESETS = [
  { label: '7 days', days: 7 },
  { label: '30 days', days: 30 },
  { label: '90 days', days: 90 },
  { label: '12 months', days: 365 },
];

export default function MarketingAnalyticsPage() {
  const [from, setFrom] = useState(toDateInput(daysAgo(30)));
  const [to, setTo] = useState(toDateInput(new Date()));

  const applyPreset = (days: number) => {
    setFrom(toDateInput(daysAgo(days)));
    setTo(toDateInput(new Date()));
  };

  return (
    <Container>
      <Toolbar>
        <ToolbarHeading>
          <h1 className="text-xl font-semibold text-foreground">
            Marketing Analytics
          </h1>
          <p className="text-sm text-muted-foreground">
            Creator and brand journeys from first registration onwards
          </p>
        </ToolbarHeading>
      </Toolbar>

      <div className="space-y-4 pb-8">
        <div className="flex flex-col sm:flex-row sm:items-center gap-3">
          <div className="flex items-center gap-2">
            {PRESETS.map((p) => (
              <Button
                key={p.label}
                variant="outline"
                size="sm"
                onClick={() => applyPreset(p.days)}
              >
                {p.label}
              </Button>
            ))}
          </div>
          <div className="flex items-center gap-2 sm:ms-auto">
            <Input
              type="date"
              value={from}
              max={to}
              onChange={(e) => setFrom(e.target.value)}
              className="h-9 w-[150px]"
            />
            <span className="text-sm text-muted-foreground">to</span>
            <Input
              type="date"
              value={to}
              min={from}
              onChange={(e) => setTo(e.target.value)}
              className="h-9 w-[150px]"
            />
          </div>
        </div>

        <FunnelBoard from={from} to={to} />
        <PqlLeads />
        <ActivityExplorer from={from} to={to} />
      </div>
    </Container>
  );
}