'use client';

import { useCallback, useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import {
  apiCreateBroadcast,
  apiGetBroadcast,
  apiUpdateBroadcast,
  apiEstimateBroadcastReach,
  type ApiBroadcast,
} from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Checkbox } from '@/components/ui/checkbox';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useToast } from '@/components/ui/toast';
import { ArrowLeft, Users, Loader2 } from 'lucide-react';
import Link from 'next/link';

const CHANNELS = [
  { id: 'push', label: 'Push Notification', description: 'Send to mobile devices' },
  { id: 'in_app', label: 'In-App Message', description: 'Show in app UI' },
  { id: 'email', label: 'Email', description: 'Send email to users' },
] as const;

const PLATFORMS = ['ios', 'android', 'web', 'macos', 'windows'] as const;
const SEGMENTS = ['free', 'pro', 'enterprise', 'churned', 'active'] as const;

export default function BroadcastEditorPage() {
  const params = useParams();
  const router = useRouter();
  const { toast } = useToast();
  const isEdit = params.id && params.id !== 'new';
  const broadcastId = isEdit ? (params.id as string) : null;

  const [loading, setLoading] = useState(isEdit);
  const [saving, setSaving] = useState(false);
  const [estimating, setEstimating] = useState(false);
  const [reachEstimate, setReachEstimate] = useState<{
    estimatedCount: number;
    sampleUserIds: string[];
  } | null>(null);

  const [form, setForm] = useState({
    title: '',
    body: '',
    bodyMarkdown: '',
    ctaText: '',
    ctaUrl: '',
    imageUrl: '',
    channels: [] as string[],
    target: {
      platforms: [] as string[],
      userSegments: [] as string[],
      countryCodes: '',
      appVersionMin: '',
      appVersionMax: '',
      percentageRollout: 100,
      specificUserIds: '',
    },
    scheduledAt: '',
  });

  const loadBroadcast = useCallback(async () => {
    if (!broadcastId) return;
    try {
      const { data, error } = await apiGetBroadcast(broadcastId!);
      if (error) throw new Error(error);
      if (data) {
        setForm({
          title: data.title,
          body: data.body,
          bodyMarkdown: data.bodyMarkdown || '',
          ctaText: data.ctaText || '',
          ctaUrl: data.ctaUrl || '',
          imageUrl: data.imageUrl || '',
          channels: data.channels,
          target: {
            platforms: data.target.platforms || [],
            userSegments: data.target.userSegments || [],
            countryCodes: data.target.countryCodes?.join(', ') || '',
            appVersionMin: data.target.appVersionMin || '',
            appVersionMax: data.target.appVersionMax || '',
            percentageRollout: data.target.percentageRollout ?? 100,
            specificUserIds: data.target.specificUserIds?.join(', ') || '',
          },
          scheduledAt: data.scheduledAt || '',
        });
      }
    } catch (err) {
      toast({
        title: 'Error',
        description: err instanceof Error ? err.message : 'Failed to load broadcast',
        variant: 'error',
      });
    } finally {
      setLoading(false);
    }
  }, [broadcastId, toast]);

  useEffect(() => {
    void loadBroadcast();
  }, [loadBroadcast]);

  async function handleEstimateReach() {
    setEstimating(true);
    try {
      const { data, error } = await apiEstimateBroadcastReach({
        platforms: form.target.platforms,
        userSegments: form.target.userSegments as ApiBroadcast['target']['userSegments'],
        countryCodes: form.target.countryCodes
          .split(',')
          .map(c => c.trim())
          .filter(Boolean),
        percentageRollout: form.target.percentageRollout,
        specificUserIds: form.target.specificUserIds
          .split(',')
          .map(id => id.trim())
          .filter(Boolean),
      });
      if (error) throw new Error(error);
      if (data) setReachEstimate(data);
    } catch (err) {
      toast({
        title: 'Error',
        description: err instanceof Error ? err.message : 'Failed to estimate reach',
        variant: 'error',
      });
    } finally {
      setEstimating(false);
    }
  }

  async function handleSave(asDraft = false) {
    setSaving(true);
    try {
      const payload = {
        ...form,
        channels: form.channels as ('push' | 'email' | 'in_app')[],
        target: {
          ...form.target,
          countryCodes: form.target.countryCodes
            .split(',')
            .map(c => c.trim())
            .filter(Boolean),
          specificUserIds: form.target.specificUserIds
            .split(',')
            .map(id => id.trim())
            .filter(Boolean),
        },
        status: asDraft ? 'draft' : undefined,
      };

      if (isEdit) {
        const { error } = await apiUpdateBroadcast(
          broadcastId!,
          payload as unknown as Partial<ApiBroadcast>
        );
        if (error) throw new Error(error);
        toast({ title: 'Success', description: 'Broadcast updated', variant: 'success' });
      } else {
        const { error } = await apiCreateBroadcast(
          payload as unknown as Omit<
            ApiBroadcast,
            'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'
          >
        );
        if (error) throw new Error(error);
        toast({ title: 'Success', description: 'Broadcast created', variant: 'success' });
      }
      router.push('/broadcasts');
    } catch (err) {
      toast({
        title: 'Error',
        description: err instanceof Error ? err.message : 'Failed to save',
        variant: 'error',
      });
    } finally {
      setSaving(false);
    }
  }

  if (loading) {
    return (
      <div className="container mx-auto py-8">
        <div className="animate-pulse space-y-4">
          <div className="h-8 w-48 bg-muted rounded" />
          <div className="h-64 bg-muted rounded" />
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto py-8 space-y-6">
      <div className="flex items-center gap-4">
        <Link href="/broadcasts">
          <Button variant="ghost" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <div>
          <h1 className="text-3xl font-bold">{isEdit ? 'Edit Broadcast' : 'New Broadcast'}</h1>
          <p className="text-muted-foreground">
            {isEdit ? 'Update your broadcast details' : 'Create a targeted message campaign'}
          </p>
        </div>
      </div>

      <Tabs defaultValue="content" className="space-y-6">
        <TabsList>
          <TabsTrigger value="content">Content</TabsTrigger>
          <TabsTrigger value="targeting">Targeting</TabsTrigger>
          <TabsTrigger value="channels">Channels</TabsTrigger>
        </TabsList>

        <TabsContent value="content" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Message Content</CardTitle>
              <CardDescription>Craft your broadcast message</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="title">Title *</Label>
                <Input
                  id="title"
                  value={form.title}
                  onChange={e => setForm({ ...form, title: e.target.value })}
                  placeholder="Enter broadcast title"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="body">Body *</Label>
                <Textarea
                  id="body"
                  value={form.body}
                  onChange={e => setForm({ ...form, body: e.target.value })}
                  placeholder="Enter broadcast message"
                  rows={4}
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="bodyMarkdown">Markdown Body (optional)</Label>
                <Textarea
                  id="bodyMarkdown"
                  value={form.bodyMarkdown}
                  onChange={e => setForm({ ...form, bodyMarkdown: e.target.value })}
                  placeholder="Rich text version (supports Markdown)"
                  rows={4}
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="ctaText">CTA Button Text</Label>
                  <Input
                    id="ctaText"
                    value={form.ctaText}
                    onChange={e => setForm({ ...form, ctaText: e.target.value })}
                    placeholder="Learn More"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="ctaUrl">CTA URL</Label>
                  <Input
                    id="ctaUrl"
                    value={form.ctaUrl}
                    onChange={e => setForm({ ...form, ctaUrl: e.target.value })}
                    placeholder="https://..."
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="imageUrl">Image URL</Label>
                <Input
                  id="imageUrl"
                  value={form.imageUrl}
                  onChange={e => setForm({ ...form, imageUrl: e.target.value })}
                  placeholder="https://..."
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="targeting" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Audience Targeting</CardTitle>
              <CardDescription>Define who should receive this broadcast</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="space-y-2">
                <Label>Platforms</Label>
                <div className="flex flex-wrap gap-2">
                  {PLATFORMS.map(platform => (
                    <Badge
                      key={platform}
                      variant={form.target.platforms.includes(platform) ? 'default' : 'outline'}
                      className="cursor-pointer"
                      onClick={() =>
                        setForm({
                          ...form,
                          target: {
                            ...form.target,
                            platforms: form.target.platforms.includes(platform)
                              ? form.target.platforms.filter(p => p !== platform)
                              : [...form.target.platforms, platform],
                          },
                        })
                      }
                    >
                      {platform}
                    </Badge>
                  ))}
                </div>
              </div>

              <div className="space-y-2">
                <Label>User Segments</Label>
                <div className="flex flex-wrap gap-2">
                  {SEGMENTS.map(segment => (
                    <Badge
                      key={segment}
                      variant={form.target.userSegments.includes(segment) ? 'default' : 'outline'}
                      className="cursor-pointer"
                      onClick={() =>
                        setForm({
                          ...form,
                          target: {
                            ...form.target,
                            userSegments: form.target.userSegments.includes(segment)
                              ? form.target.userSegments.filter(s => s !== segment)
                              : [...form.target.userSegments, segment],
                          },
                        })
                      }
                    >
                      {segment}
                    </Badge>
                  ))}
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="countryCodes">Country Codes (comma-separated)</Label>
                  <Input
                    id="countryCodes"
                    value={form.target.countryCodes}
                    onChange={e =>
                      setForm({
                        ...form,
                        target: { ...form.target, countryCodes: e.target.value },
                      })
                    }
                    placeholder="US, CA, GB"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="percentageRollout">Percentage Rollout</Label>
                  <Input
                    id="percentageRollout"
                    type="number"
                    min={1}
                    max={100}
                    value={form.target.percentageRollout}
                    onChange={e =>
                      setForm({
                        ...form,
                        target: {
                          ...form.target,
                          percentageRollout: parseInt(e.target.value) || 100,
                        },
                      })
                    }
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="appVersionMin">Min App Version</Label>
                  <Input
                    id="appVersionMin"
                    value={form.target.appVersionMin}
                    onChange={e =>
                      setForm({
                        ...form,
                        target: { ...form.target, appVersionMin: e.target.value },
                      })
                    }
                    placeholder="1.0.0"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="appVersionMax">Max App Version</Label>
                  <Input
                    id="appVersionMax"
                    value={form.target.appVersionMax}
                    onChange={e =>
                      setForm({
                        ...form,
                        target: { ...form.target, appVersionMax: e.target.value },
                      })
                    }
                    placeholder="2.0.0"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="specificUserIds">Specific User IDs (comma-separated)</Label>
                <Input
                  id="specificUserIds"
                  value={form.target.specificUserIds}
                  onChange={e =>
                    setForm({
                      ...form,
                      target: { ...form.target, specificUserIds: e.target.value },
                    })
                  }
                  placeholder="user_123, user_456"
                />
              </div>

              <div className="flex items-center gap-4 pt-4 border-t">
                <Button
                  type="button"
                  variant="outline"
                  onClick={handleEstimateReach}
                  disabled={estimating}
                >
                  {estimating ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Users className="mr-2 h-4 w-4" />
                  )}
                  Estimate Reach
                </Button>
                {reachEstimate && (
                  <div className="text-sm">
                    <span className="font-medium">
                      {reachEstimate.estimatedCount.toLocaleString()}
                    </span>{' '}
                    users targeted
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="channels" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Delivery Channels</CardTitle>
              <CardDescription>Select how to deliver this broadcast</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {CHANNELS.map(channel => (
                  <div key={channel.id} className="flex items-start space-x-3">
                    <Checkbox
                      id={channel.id}
                      checked={form.channels.includes(channel.id)}
                      onCheckedChange={checked =>
                        setForm({
                          ...form,
                          channels: checked
                            ? [...form.channels, channel.id]
                            : form.channels.filter(c => c !== channel.id),
                        })
                      }
                    />
                    <div className="space-y-1">
                      <Label htmlFor={channel.id} className="font-medium">
                        {channel.label}
                      </Label>
                      <p className="text-sm text-muted-foreground">{channel.description}</p>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      <div className="flex items-center justify-end gap-4">
        <Link href="/broadcasts">
          <Button variant="outline" disabled={saving}>
            Cancel
          </Button>
        </Link>
        <Button
          variant="secondary"
          onClick={() => handleSave(true)}
          disabled={saving || !form.title || !form.body || form.channels.length === 0}
        >
          {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
          Save as Draft
        </Button>
        <Button
          onClick={() => handleSave(false)}
          disabled={saving || !form.title || !form.body || form.channels.length === 0}
        >
          {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
          {isEdit ? 'Update Broadcast' : 'Create Broadcast'}
        </Button>
      </div>
    </div>
  );
}
