import React, { useState, useMemo } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { MainLayout } from '@/components/layout/MainLayout.tsx';
import PageHeader from '@/components/layout/PageHeader.tsx';
import MatchCard from '@/components/matches/MatchCard.tsx';
import Timeline from '@/components/ui/Timeline.tsx';
import MetricItem from '@/components/ui/MetricItem.tsx';
import { Container, Stack, Grid, Flex } from '@/components/ui/layout';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import Button from '@/components/ui/Button.tsx';
import Badge from '@/components/ui/Badge.tsx';
import Select from '@/components/ui/Select.tsx';
import Textarea from '@/components/ui/Textarea.tsx';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { useMatch, useUpdateMatchStatus } from '@/hooks/api/useMatchingAPI.ts';
import { useNavigation } from '@/hooks/useNavigation.tsx';
import { useAuth } from '@/contexts/AuthContext.tsx';
import { AlertTriangle, ArrowLeft, CheckCircle, Clock, DollarSign, MapPin, MessageSquare, TrendingUp } from 'lucide-react';
import type { TimelineEntry } from '@/components/ui/Timeline.tsx';

const MatchDetailPage = () => {
  const { id: matchId } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { handleBackNavigation, handleFooterNavigate } = useNavigation();
  const { user } = useAuth();

  const { data: match, isLoading, error } = useMatch(matchId);
  const updateStatusMutation = useUpdateMatchStatus();

  const [showStatusUpdate, setShowStatusUpdate] = useState(false);
  const [newStatus, setNewStatus] = useState('');
  const [statusNotes, setStatusNotes] = useState('');

  // Transform match history to timeline format
  const timelineEntries: TimelineEntry[] = useMemo(() => {
    if (!match?.History) return [];

    return match.History.map((entry, index) => ({
      id: `history-${index}`,
      timestamp: entry.timestamp,
      title: getHistoryTitle(entry.action, entry.new_value || entry.old_value),
      description: entry.notes,
      actor: entry.actor,
      action: entry.action,
      oldValue: entry.old_value,
      newValue: entry.new_value,
    }));
  }, [match?.History]);

  const getHistoryTitle = (action: string, value?: string) => {
    switch (action) {
      case 'status_change':
        return t('matchDetail.statusChanged', 'Status changed');
      case 'comment':
        return t('matchDetail.commentAdded', 'Comment added');
      case 'update':
        return t('matchDetail.matchUpdated', 'Match updated');
      default:
        return value || action;
    }
  };

  const handleStatusUpdate = async () => {
    if (!match || !newStatus || !user) return;

    try {
      await updateStatusMutation.mutateAsync({
        matchId: match.ID,
        status: newStatus,
        actor: user.email || user.name || 'Unknown',
        notes: statusNotes,
      });

      setShowStatusUpdate(false);
      setNewStatus('');
      setStatusNotes('');
    } catch (error) {
      console.error('Failed to update match status:', error);
    }
  };

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'EUR',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(value);
  };

  const formatScore = (score: number) => {
    return `${(score * 100).toFixed(1)}%`;
  };

  if (isLoading) {
    return (
      <MainLayout onNavigate={handleFooterNavigate} className="bg-muted/30">
        <Container size="2xl" className="py-8 sm:py-12">
          <div className="animate-pulse">
            <div className="h-8 bg-muted rounded w-1/3 mb-8"></div>
            <div className="h-64 bg-muted rounded mb-8"></div>
            <div className="h-48 bg-muted rounded"></div>
          </div>
        </Container>
      </MainLayout>
    );
  }

  if (error || !match) {
    return (
      <MainLayout onNavigate={handleFooterNavigate} className="bg-muted/30">
        <Container size="2xl" className="py-8 sm:py-12">
          <PageHeader
            title={t('matchDetail.errorTitle', 'Match Not Found')}
            subtitle={t('matchDetail.errorSubtitle', 'The requested match could not be found')}
            onBack={handleBackNavigation}
          />
          <Card>
            <CardContent className="py-12">
              <div className="text-center">
                <p className="text-destructive mb-4">
                  {error?.message || t('matchDetail.notFound', 'Match not found')}
                </p>
                <Button onClick={handleBackNavigation}>
                  <ArrowLeft className="h-4 mr-2 text-current w-4" />
                  {t('common.back')}
                </Button>
              </div>
            </CardContent>
          </Card>
        </Container>
      </MainLayout>
    );
  }

  const statusOptions = [
    { value: 'suggested', label: t('matchStatus.suggested', 'Suggested') },
    { value: 'negotiating', label: t('matchStatus.negotiating', 'Negotiating') },
    { value: 'reserved', label: t('matchStatus.reserved', 'Reserved') },
    { value: 'contracted', label: t('matchStatus.contracted', 'Contracted') },
    { value: 'live', label: t('matchStatus.live', 'Live') },
    { value: 'failed', label: t('matchStatus.failed', 'Failed') },
    { value: 'cancelled', label: t('matchStatus.cancelled', 'Cancelled') },
  ];

  return (
    <MainLayout onNavigate={handleFooterNavigate} className="bg-muted/30">
      <Container size="2xl" className="py-8 sm:py-12">
        <PageHeader
          title={t('matchDetail.title', 'Match Details')}
          subtitle={`${t('matchDetail.matchId', 'Match')} ${match.ID}`}
          onBack={handleBackNavigation}
        />

        <Stack spacing="2xl">
          {/* Match Overview Card */}
          <MatchCard match={match} />

          {/* Key Metrics */}
          <Grid cols={{ md: 2, lg: 4 }} gap="md">
            <MetricItem
              icon={<TrendingUp className="h-4 h-5 text-current text-success w-4 w-5" />}
              label={t('matchDetail.compatibilityScore', 'Compatibility')}
              value={formatScore(match.CompatibilityScore)}
            />
            <MetricItem
              icon={<DollarSign className="h-4 h-5 text-current text-primary w-4 w-5" />}
              label={t('matchDetail.economicValue', 'Economic Value')}
              value={formatCurrency(match.EconomicValue)}
            />
            <MetricItem
              icon={<MapPin className="h-4 h-5 text-current text-warning w-4 w-5" />}
              label={t('matchDetail.distance', 'Distance')}
              value={`${match.DistanceKm.toFixed(1)} km`}
            />
            <MetricItem
              icon={<CheckCircle className="h-4 h-5 text-current text-muted-foreground w-4 w-5" />}
              label={t('matchDetail.priority', 'Priority')}
              value={match.Priority.toString()}
            />
          </Grid>

          {/* Economic Impact & Risk Assessment */}
          <Grid cols={{ md: 2 }} gap="lg">
            {/* Economic Impact */}
            {match.EconomicImpact && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <DollarSign className="h-4 h-5 text-current w-4 w-5" />
                    {t('matchDetail.economicImpact', 'Economic Impact')}
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <Stack spacing="sm">
                    {match.EconomicImpact.annual_savings && (
                      <div className="flex justify-between items-center py-2 border-b">
                        <span className="text-sm font-medium">
                          {t('matchDetail.annualSavings', 'Annual Savings')}
                        </span>
                        <span className="text-sm font-semibold text-success">
                          {formatCurrency(match.EconomicImpact.annual_savings)}
                        </span>
                      </div>
                    )}
                    {match.EconomicImpact.npv && (
                      <div className="flex justify-between items-center py-2 border-b">
                        <span className="text-sm font-medium">
                          {t('matchDetail.npv', 'Net Present Value')}
                        </span>
                        <span className="text-sm font-semibold">
                          {formatCurrency(match.EconomicImpact.npv)}
                        </span>
                      </div>
                    )}
                    {match.EconomicImpact.irr && (
                      <div className="flex justify-between items-center py-2 border-b">
                        <span className="text-sm font-medium">
                          {t('matchDetail.irr', 'Internal Rate of Return')}
                        </span>
                        <span className="text-sm font-semibold">
                          {formatScore(match.EconomicImpact.irr)}
                        </span>
                      </div>
                    )}
                    {match.EconomicImpact.payback_years && (
                      <div className="flex justify-between items-center py-2 border-b">
                        <span className="text-sm font-medium">
                          {t('matchDetail.paybackPeriod', 'Payback Period')}
                        </span>
                        <span className="text-sm font-semibold">
                          {match.EconomicImpact.payback_years.toFixed(1)} years
                        </span>
                      </div>
                    )}
                  </Stack>
                </CardContent>
              </Card>
            )}

            {/* Risk Assessment */}
            {match.RiskAssessment && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <AlertTriangle className="h-4 h-5 text-current w-4 w-5" />
                    {t('matchDetail.riskAssessment', 'Risk Assessment')}
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <Stack spacing="sm">
                    {match.RiskAssessment.technical_risk !== undefined && (
                      <div className="flex justify-between items-center py-2 border-b">
                        <span className="text-sm font-medium">
                          {t('matchDetail.technicalRisk', 'Technical Risk')}
                        </span>
                        <Badge
                          variant={
                            match.RiskAssessment.technical_risk > 0.7 ? 'destructive' :
                            match.RiskAssessment.technical_risk > 0.4 ? 'secondary' : 'default'
                          }
                        >
                          {formatScore(match.RiskAssessment.technical_risk)}
                        </Badge>
                      </div>
                    )}
                    {match.RiskAssessment.regulatory_risk !== undefined && (
                      <div className="flex justify-between items-center py-2 border-b">
                        <span className="text-sm font-medium">
                          {t('matchDetail.regulatoryRisk', 'Regulatory Risk')}
                        </span>
                        <Badge
                          variant={
                            match.RiskAssessment.regulatory_risk > 0.7 ? 'destructive' :
                            match.RiskAssessment.regulatory_risk > 0.4 ? 'secondary' : 'default'
                          }
                        >
                          {formatScore(match.RiskAssessment.regulatory_risk)}
                        </Badge>
                      </div>
                    )}
                    {match.RiskAssessment.market_risk !== undefined && (
                      <div className="flex justify-between items-center py-2">
                        <span className="text-sm font-medium">
                          {t('matchDetail.marketRisk', 'Market Risk')}
                        </span>
                        <Badge
                          variant={
                            match.RiskAssessment.market_risk > 0.7 ? 'destructive' :
                            match.RiskAssessment.market_risk > 0.4 ? 'secondary' : 'default'
                          }
                        >
                          {formatScore(match.RiskAssessment.market_risk)}
                        </Badge>
                      </div>
                    )}
                  </Stack>
                </CardContent>
              </Card>
            )}
          </Grid>

          {/* Status Update Section */}
          <Card>
            <CardHeader>
              <Flex align="center" justify="between">
                <CardTitle className="flex items-center gap-2">
                  <CheckCircle className="h-4 h-5 text-current w-4 w-5" />
                  {t('matchDetail.updateStatus', 'Update Status')}
                </CardTitle>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setShowStatusUpdate(!showStatusUpdate)}
                >
                  {showStatusUpdate ? t('common.cancel') : t('matchDetail.changeStatus', 'Change Status')}
                </Button>
              </Flex>
            </CardHeader>
            {showStatusUpdate && (
              <CardContent>
                <Stack spacing="md">
                  <div>
                    <label className="block text-sm font-medium mb-2">
                      {t('matchDetail.newStatus', 'New Status')}
                    </label>
                    <Select
                      value={newStatus}
                      onValueChange={setNewStatus}
                      options={statusOptions}
                      placeholder={t('matchDetail.selectStatus', 'Select new status')}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2">
                      {t('matchDetail.notes', 'Notes')} ({t('common.optional')})
                    </label>
                    <Textarea
                      value={statusNotes}
                      onChange={(e) => setStatusNotes(e.target.value)}
                      placeholder={t('matchDetail.notesPlaceholder', 'Add notes about this status change...')}
                      rows={3}
                    />
                  </div>
                  <Flex gap="sm">
                    <Button
                      onClick={handleStatusUpdate}
                      disabled={!newStatus || updateStatusMutation.isPending}
                    >
                      {updateStatusMutation.isPending
                        ? t('common.updating', 'Updating...')
                        : t('matchDetail.updateStatus', 'Update Status')
                      }
                    </Button>
                    <Button
                      variant="outline"
                      onClick={() => {
                        setShowStatusUpdate(false);
                        setNewStatus('');
                        setStatusNotes('');
                      }}
                    >
                      {t('common.cancel')}
                    </Button>
                  </Flex>
                </Stack>
              </CardContent>
            )}
          </Card>

          {/* Match History Timeline */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Clock className="h-4 h-5 text-current w-4 w-5" />
                {t('matchDetail.matchHistory', 'Match History')}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <Timeline entries={timelineEntries} />
            </CardContent>
          </Card>
        </Stack>
      </Container>
    </MainLayout>
  );
};

export default MatchDetailPage;