import 'package:three_d_pie_chart/three_d_pie_chart.dart';

ThreeDPieChart(
  segments: [
    PieChartSegment(label: 'Large Cap', value: 65),
    PieChartSegment(label: 'Mid Cap',   value: 25),
    PieChartSegment(label: 'Small Cap', value: 10),
  ],
)

ThreeDPieChart(
  segments: const [
    PieChartSegment(label: 'Large Cap', value: 65, color: Color(0xFF2962FF)),
    PieChartSegment(label: 'Mid Cap',   value: 25, color: Color(0xFF1939B7)),
    PieChartSegment(label: 'Small Cap', value: 10, color: Color(0xFF00E5FF)),
  ],
  title: Text(
    'Market cap allocation',
    style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500),
  ),
)

ThreeDPieChart(
  segments: const [
    PieChartSegment(label: 'Equities',    value: 50, color: Color(0xFFFF6D00)),
    PieChartSegment(label: 'Bonds',       value: 30, color: Color(0xFF00BFA5)),
    PieChartSegment(label: 'Real Estate', value: 12, color: Color(0xFFAA00FF)),
    PieChartSegment(label: 'Cash',        value: 8,  color: Color(0xFFFFD600)),
  ],
  style: const ThreeDPieChartStyle(
    strokeWidth: 14,
    gapDegrees: 8,
    tiltFactor: 0.55,
    indicatorLineHeight: 60,
    legendIndicatorShape: LegendIndicatorShape.circle,
    legendIndicatorSize: 10,
  ),
)

ThreeDPieChart(
  segments: const [
    PieChartSegment(label: 'Technology', value: 40),
    PieChartSegment(label: 'Healthcare', value: 25),
    PieChartSegment(label: 'Finance',    value: 20),
    PieChartSegment(label: 'Energy',     value: 15),
  ],
  style: const ThreeDPieChartStyle(
    legendPosition: LegendPosition.right,
    legendSpacing: 16,
  ),
)

ThreeDPieChart(
  segments: const [
    PieChartSegment(label: 'Stocks', value: 45000),
    PieChartSegment(label: 'Bonds',  value: 30000),
    PieChartSegment(label: 'Crypto', value: 15000),
    PieChartSegment(label: 'Cash',   value: 10000),
  ],
  style: ThreeDPieChartStyle(
    legendValueFormatter: (value, total) {
      return '\$${(value / 1000).toStringAsFixed(0)}K';
    },
  ),
)

ThreeDPieChart(
  segments: const [
    PieChartSegment(label: 'React',   value: 40, color: Color(0xFF61DAFB)),
    PieChartSegment(label: 'Flutter', value: 35, color: Color(0xFF02569B)),
    PieChartSegment(label: 'SwiftUI', value: 25, color: Color(0xFFFF6D00)),
  ],
  style: const ThreeDPieChartStyle(
    shadowStyle: PieChartShadowStyle.none,
    glowStyle: PieChartGlowStyle.none,
    strokeWidth: 16,
    gapDegrees: 16,
    tiltFactor: 0.48,
  ),
)

ThreeDPieChart(
  segments: const [
    PieChartSegment(label: 'Alpha', value: 55, color: Color(0xFFF50057)),
    PieChartSegment(label: 'Beta',  value: 30, color: Color(0xFF651FFF)),
    PieChartSegment(label: 'Gamma', value: 15, color: Color(0xFF00E5FF)),
  ],
  style: const ThreeDPieChartStyle(
    strokeWidth: 12,
    shadowStyle: PieChartShadowStyle(
      offsetY: 16, blurRadius: 8, opacity: 0.35,
    ),
    glowStyle: PieChartGlowStyle(
      outerSpread: 36, innerSpread: 14,
      outerBlur: 28, innerBlur: 12, opacity: 0.04,
    ),
  ),
)

ThreeDPieChart(
  segments: const [
    PieChartSegment(label: 'Growth',   value: 45, extra: 'growth_fund_id'),
    PieChartSegment(label: 'Value',    value: 35, extra: 'value_fund_id'),
    PieChartSegment(label: 'Dividend', value: 20, extra: 'dividend_fund_id'),
  ],
  onSegmentSelected: (index, segment) {
    print('Selected: ${segment.label}');
    print('Value: ${segment.value}');
    print('Fund ID: ${segment.extra}');
    // Navigate, update state, fetch data, etc.
  },
)

ThreeDPieChart(
  segments: const [
    PieChartSegment(label: 'Large Cap', value: 70),
    PieChartSegment(label: 'Mid Cap',   value: 30),
    PieChartSegment(label: 'Small Cap', value: 0),  // Shows in legend as 0.0%
    PieChartSegment(label: 'Micro Cap', value: 0),  // Shows in legend as 0.0%
  ],
  style: const ThreeDPieChartStyle(
    showZeroValueSegments: true,
  ),
)

ThreeDPieChart(
  segments: const [
    PieChartSegment(label: 'A', value: 60),
    PieChartSegment(label: 'B', value: 30),
    PieChartSegment(label: 'C', value: 10),
  ],
  style: const ThreeDPieChartStyle(
    legendPosition: LegendPosition.none,
    showIndicator: false,
  ),
  chartHeight: 200,
)

ThreeDPieChart(
  // REQUIRED — your data
  segments: [...],

  // OPTIONAL — all have sensible defaults
  style: ThreeDPieChartStyle(...),    // All visual styling
  chartHeight: 260.0,                 // Ring area height (excludes legend)
  chartHorizontalPadding: 32.0,       // Horizontal padding around the ring
  initialSelectedIndex: 0,            // First selected segment (0-based)
  onSegmentSelected: (i, seg) {},     // Tap callback
  title: Text('My Chart'),            // Widget above the chart
  emptyState: Text('No data'),        // Shown when segments are empty
)

PieChartLegend(
  segments: mySegments,
  colors: resolvedColors,
  selectedIndex: 0,
  total: 100.0,
  style: ThreeDPieChartStyle(),
  isDarkMode: true,
  onSegmentTap: (index) => handleTap(index),
)

ThreeDPieChart(
  segments: mySegments,
  style: ThreeDPieChartStyle(
    defaultSegmentColors: [
      Color(0xFF1A73E8),  // Google Blue
      Color(0xFF34A853),  // Google Green
      Color(0xFFFBBC05),  // Google Yellow
      Color(0xFFEA4335),  // Google Red
    ],
  ),
)

PieChartSegment(
  label: 'Technology',
  value: 40,
  extra: {'sectorId': 'tech', 'holdings': 12},
)

// Then in the callback:
onSegmentSelected: (index, segment) {
  final meta = segment.extra as Map<String, dynamic>;
  navigateToSector(meta['sectorId']);
},

ThreeDPieChart(
  segments: portfolioData,  // might be empty
  emptyState: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.pie_chart_outline, size: 48, color: Colors.grey),
        SizedBox(height: 12),
        Text('No allocation data available'),
      ],
    ),
  ),
)