import { Chart, ChartConfiguration, Plugin } from 'chart.js';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SpkApexcharts } from "../../../@spk/charts/charts/spk-apexcharts/spk-apexcharts";
import { ApexOptions } from 'ng-apexcharts';
import { SpkReusableTables } from "../../../@spk/tables/spk-reusable-tables/spk-reusable-tables";
import { SpkChartjs } from "../../../@spk/charts/charts/spk-chartjs/spk-chartjs";
@Component({
  selector: 'app-crm',
  standalone: true,
  imports: [RouterModule, SpkApexcharts, SpkReusableTables, SpkChartjs],
  templateUrl: './crm.html',
  styleUrl: './crm.scss'
})
export class Crm {
  YourtargetisincompleteChart: ApexOptions = {
    chart: {
      height: 127,
      width: 100,
      type: 'radialBar',
    },

    series: [48],
    // colors: ['#fff'],
    plotOptions: {
      radialBar: {
        hollow: {
          margin: 0,
          size: '55%',
          background: '#fff',
        },
        dataLabels: {
          name: {
            offsetY: -10,
            color: '#4b9bfa',
            fontSize: '.625rem',
            show: false,
          },
          value: {
            offsetY: 5,
            color: '#4b9bfa',
            fontSize: '.875rem',
            show: true,
            fontWeight: 600,
          },
        },
      },
    },
    stroke: {
      lineCap: 'round',
    },
    labels: ['Status'],
    colors: ['#fff']
  }

  topDeals = [
    {
      name: 'Michael Jordan',
      email: 'michael.jordan@example.com',
      amount: '$2,893',
      avatarImg: './assets/images/faces/10.jpg'
    },
    {
      name: 'Emigo Kiaren',
      email: 'emigo.kiaren@gmail.com',
      amount: '$4,289',
      initials: 'EK',
      color: 'warning', // Used for text-warning and bg-warning/10
    },
    {
      name: 'Randy Origoan',
      email: 'randy.origoan@gmail.com',
      amount: '$6,347',
      avatarImg: './assets/images/faces/12.jpg'
    },
    {
      name: 'George Pieterson',
      email: 'george.pieterson@gmail.com',
      amount: '$3,894',
      initials: 'GP',
      color: 'success',
    },
    {
      name: 'Kiara Advain',
      email: 'kiaraadvain214@gmail.com',
      amount: '$2,679',
      initials: 'KA',
      color: 'primary',
    }
  ];

  profitEarnedChart: ApexOptions = {
    series: [
      {
        name: 'Profit Earned',
        data: [44, 42, 57, 86, 58, 55, 70],
      },
      {
        name: 'Total Sales',
        data: [34, 22, 37, 56, 21, 35, 60],
      },
    ],
    chart: {
      type: 'bar',
      height: 180,
      toolbar: {
        show: false,
      },
    },
    grid: {
      borderColor: '#f1f1f1',
      strokeDashArray: 3,
    },
    colors: ['rgb(132, 90, 223)', '#e4e7ed'],
    plotOptions: {
      bar: {
        colors: {
          ranges: [
            {
              from: -100,
              to: -46,
              color: '#ebeff5',
            },
            {
              from: -45,
              to: 0,
              color: '#ebeff5',
            },
          ],
        },
        columnWidth: '60%',
        borderRadius: 5,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 2,
      colors: undefined,
    },
    legend: {
      show: false,
      position: 'top',
    },
    yaxis: {
      title: {
        style: {
          color: '#adb5be',
          fontSize: '13px',
          fontFamily: 'poppins, sans-serif',
          fontWeight: 600,
          cssClass: 'apexcharts-yaxis-label',
        },
      },
      labels: {
        formatter: function (y: number) {
          return y.toFixed(0) + '';
        },
      },
    },
    xaxis: {
      type: 'category',
      categories: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
      axisBorder: {
        show: true,
        color: 'rgba(119, 119, 142, 0.05)',
        offsetX: 0,
        offsetY: 0,
      },
      axisTicks: {
        show: true,
        borderType: 'solid',
        color: 'rgba(119, 119, 142, 0.05)',

        offsetX: 0,
        offsetY: 0,
      },
      labels: {
        rotate: -90,
      },
    },
  }



  crmCardsChartOptions({ series, colors }: { colors: string[], series: { data: number[], name: string }[] }): ApexOptions {
    return {
      chart: {
        type: 'line',
        height: 40,
        width: 100,
        sparkline: {
          enabled: true
        }
      },
      dataLabels: {
        enabled: false
      },

      stroke: {
        show: true,
        curve: 'smooth',
        lineCap: 'butt',
        colors: undefined,
        width: 1.5,
        dashArray: 0,
      },
      fill: {
        type: 'gradient',
        gradient: {
          opacityFrom: 0.9,
          opacityTo: 0.9,
          stops: [0, 98],
        }
      },
      series: series,
      yaxis: {
        min: 0,
        show: false,
        axisBorder: {
          show: false
        },
      },
      xaxis: {
        labels: {
          show: false,
        },
        axisBorder: {
          show: false
        },
      },
      tooltip: {
        enabled: true,
      },
      colors: colors,
    }
  }

  crmCards = [
    {
      color: 'primary',
      icon: 'ti ti-users',
      title: 'Total Customers',
      number: '1,02,890',
      chartId: 'crm-total-customers',
      chartoptions: this.crmCardsChartOptions({
        series: [{
          name: 'Value',
          data: [20, 14, 19, 10, 23, 20, 22, 9, 12]
        }], colors: ["rgb(132, 90, 223)"],
      }),
      viewallTextColor: 'text-primary',
      percentage: '+40%',
      percentageColor: 'text-success',
    },
    {
      color: 'secondary',
      icon: 'ti ti-wallet',
      title: 'Total Revenue',
      number: '$56,562',
      chartId: 'crm-total-revenue',
      chartoptions: this.crmCardsChartOptions({
        series: [
          {
            name: 'Value',
            data: [20, 14, 20, 22, 9, 12, 19, 10, 25],
          },
        ], colors: ['rgb(35, 183, 229)'],
      }),
      viewallTextColor: 'text-secondary',
      percentage: '+25%',
      percentageColor: 'text-success',
    },
    {
      color: 'success',
      icon: 'ti ti-wave-square',
      title: 'Conversion Ratio',
      number: '12.08%',
      chartId: 'crm-conversion-ratio',
      chartoptions: this.crmCardsChartOptions({
        series: [
          {
            name: 'Value',
            data: [20, 20, 22, 9, 14, 19, 10, 25, 12],
          },
        ], colors: ['rgb(38, 191, 148)'],
      }),
      viewallTextColor: 'text-success',
      percentage: '-12%',
      percentageColor: 'text-danger',
    },
    {
      color: 'warning',
      icon: 'ti ti-briefcase',
      title: 'Total Deals',
      number: '2,543',
      chartId: 'crm-total-deals',
      chartoptions: this.crmCardsChartOptions({
        series: [
          {
            name: 'Value',
            data: [20, 20, 22, 9, 12, 14, 19, 10, 25],
          },
        ], colors: ['rgb(245, 184, 73)'],
      }),
      viewallTextColor: 'text-warning',
      percentage: '+19%',
      percentageColor: 'text-success',
    }
  ];



  RevenueAnalytics: ApexOptions = {
    series: [
      {
        type: 'line',
        name: 'Profit',
        data: [
          { x: 'Jan', y: 100 },
          { x: 'Feb', y: 210 },
          { x: 'Mar', y: 180 },
          { x: 'Apr', y: 454 },
          { x: 'May', y: 230 },
          { x: 'Jun', y: 320 },
          { x: 'Jul', y: 656 },
          { x: 'Aug', y: 830 },
          { x: 'Sep', y: 350 },
          { x: 'Oct', y: 350 },
          { x: 'Nov', y: 210 },
          { x: 'Dec', y: 410 },
        ],
      },
      {
        type: 'line',
        name: 'Revenue',
        data: [
          { x: 'Jan', y: 180 },
          { x: 'Feb', y: 620 },
          { x: 'Mar', y: 476 },
          { x: 'Apr', y: 220 },
          { x: 'May', y: 520 },
          { x: 'Jun', y: 780 },
          { x: 'Jul', y: 435 },
          { x: 'Aug', y: 515 },
          { x: 'Sep', y: 738 },
          { x: 'Oct', y: 454 },
          { x: 'Nov', y: 525 },
          { x: 'Dec', y: 230 },
        ],
      },
      {
        type: 'area',
        name: 'Sales',
        data: [
          { x: 'Jan', y: 200 },
          { x: 'Feb', y: 530 },
          { x: 'Mar', y: 110 },
          { x: 'Apr', y: 130 },
          { x: 'May', y: 480 },
          { x: 'Jun', y: 520 },
          { x: 'Jul', y: 780 },
          { x: 'Aug', y: 435 },
          { x: 'Sep', y: 475 },
          { x: 'Oct', y: 738 },
          { x: 'Nov', y: 454 },
          { x: 'Dec', y: 480 },
        ],
      },
    ],
    chart: {
      type: 'line',
      height: 350,
      animations: {
        speed: 500,
      },
      toolbar: {
        show: true
      },
      zoom: {
        enabled: true,
      },
      dropShadow: {
        enabled: false,
        enabledOnSeries: undefined,
        top: 8,
        left: 0,
        blur: 3,
        color: '#000',
        opacity: 0.1,
      },
    },
    colors: ["rgb(132, 90, 223)", "rgba(35, 183, 229, 0.85)", "rgba(119, 119, 142, 0.05)"],
    dataLabels: {
      enabled: false,
    },
    grid: {
      padding:{
        left:0,
        right:0,
        top:0,
        bottom:0
      },
      borderColor: '#f1f1f1',
      strokeDashArray: 3,
      yaxis: {
        lines: {
          show: false
        }
      },
    },
    stroke: {
      curve: 'smooth',
      width: [2, 2, 0],
      dashArray: [0, 5, 0],
    },
    xaxis: {
      axisTicks: {
        show: false,
      },
    },
    yaxis: {

      labels: {
        formatter: (value: number) => `$${value}`,
      },

    },
    tooltip: {
      y: [
        {
          formatter: (value: number) => `$${value}`,
        },
        {
          formatter: (value: number) => `$${value.toFixed(0)}`,
        },
        {
          formatter: (value: number) => `$${value.toFixed(0)}`,
        },
      ],
    },
    legend: {
      show: true,
      offsetY: 15,
      customLegendItems: ['Profit', 'Revenue', 'Sales'],
      inverseOrder: true,
      markers: {
        size: 5
      }
    },
    title: {
      text: 'Revenue Analytics with sales & profit (USD)',
      align: 'left',
      style: {
        fontSize: '.8125rem',
        fontWeight: 'semibold',
        color: '#8c9097',
      },
    },
    markers: {
      hover: {
        sizeOffset: 5,
      },
    },
  }

  SalesRepData = {
    columns: [
      { header: 'Sales Rep', tableHeadColumn: '!text-start !text-[0.85rem] min-w-[200px]' },
      { header: 'Category', tableHeadColumn: '!text-start !text-[0.85rem]' },
      { header: 'Mail', tableHeadColumn: '!text-start !text-[0.85rem]' },
      { header: 'Location', tableHeadColumn: '!text-start !text-[0.85rem]' },
      { header: 'Date', tableHeadColumn: '!text-start !text-[0.85rem]' },
      { header: 'Action', tableHeadColumn: '!text-start !text-[0.85rem]' }
    ],
    rows: [
      { id: 1, name: 'Mayor Kelly', img: './assets/images/faces/4.jpg', category: 'Manufacture', mail: 'mayorkelly@gmail.com', location: 'Germany', locationClass: 'info', date: 'Sep 15 - Oct 12, 2023', checked: false },
      { id: 2, name: 'Andrew Garfield', img: './assets/images/faces/15.jpg', category: 'Development', mail: 'andrewgarfield@gmail.com', location: 'Canada', locationClass: 'primary', date: 'Apr 10 - Dec 12, 2023', checked: true },
      { id: 3, name: 'Simon Cowel', img: './assets/images/faces/11.jpg', category: 'Service', mail: 'simoncowel234@gmail.com', location: 'Europe', locationClass: 'danger', date: 'Sep 15 - Oct 12, 2023', checked: false },
      { id: 4, name: 'Mirinda Hers', img: './assets/images/faces/8.jpg', category: 'Marketing', mail: 'mirindahers@gmail.com', location: 'USA', locationClass: 'warning', date: 'Apr 14 - Dec 14, 2023', checked: true },
      { id: 5, name: 'Jacob Smith', img: './assets/images/faces/9.jpg', category: 'Social Plataform', mail: 'jacobsmith@gmail.com', location: 'Singapore', locationClass: 'success', date: 'Feb 25 - Nov 25, 2023', checked: true }
    ]
  };






  LeadsBySourceChart: ChartConfiguration<'doughnut'> = {
    type: 'doughnut',
    data: {
      datasets: [{
        data: [32, 27, 25, 16],
        backgroundColor: [
          'rgb(132, 90, 223)', // Purple
          'rgb(35, 183, 229)', // Blue
          'rgb(245, 184, 73)', // Orange
          'rgb(38, 191, 148)', // Green
        ],
        // 1. INCREASE SPACING: This creates the clear gap between segments
        spacing: -20,
        // 2. ROUNDED BORDER: 10-20 is usually the sweet spot for this thinness
        borderRadius: 20,
        borderWidth: 0,
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      // 3. THINNESS: Ensure this is high enough (80% to 90%)
      cutout: '86%',
      plugins: {
        legend: { display: false },
        tooltip: { enabled: true }
      }
    }
  };
  recentActivity = [
    {
      statusClass: 'text-primary bg-primary/10',
      time: '4:45PM',
      mainText: 'Update of calendar events & ',
      boldMain: true,
      linkText: 'Added new events in next week.',
      linkClass: 'text-primary font-semibold'
    },
    {
      statusClass: 'text-secondary bg-secondary/10',
      time: '3 hrs',
      mainText: 'New theme for ',
      boldText: 'Spruko Website',
      afterText: ' completed',
      subText: 'Lorem ipsum, dolor sit amet.'
    },
    {
      statusClass: 'text-success bg-success/10',
      time: '22 hrs',
      mainText: 'Created a ',
      highlightText: 'New Task',
      highlightClass: 'text-success font-semibold',
      afterText: ' today',
      showAddIcon: true
    },
    {
      statusClass: 'text-pink bg-pink/10',
      time: 'Today',
      mainText: 'New member ',
      tagText: '@andreas gurrero',
      tagClass: 'py-[0.2rem] px-[0.45rem] font-semibold rounded-sm text-pink text-[0.75em] bg-pink/10',
      afterText: ' added today to AI Summit.'
    },
    {
      statusClass: 'text-warning bg-warning/10',
      time: '22 hrs',
      mainText: '32 New people joined summit.'
    },
    {
      statusClass: 'text-info bg-info/10',
      time: '12 hrs',
      mainText: 'Neon Tarly added ',
      highlightText: 'Robert Bright',
      highlightClass: 'text-info font-semibold',
      afterText: ' to AI summit project.'
    },
    {
      statusClass: 'text-[#232323] dark:text-white bg-[#232323]/10 dark:bg-white/20',
      time: '4 hrs',
      mainText: 'Replied to new support request ',
      showCheckIcon: true
    },
    {
      statusClass: 'text-purple bg-purple/10',
      time: '4 hrs',
      mainText: 'Completed documentation of ',
      linkText: 'AI Summit.',
      linkClass: 'text-purple underline font-semibold'
    }
  ];

  deviceLeads = [
    {
      label: 'Mobile',
      value: '1,624',
      legendClass: 'mobile',
      containerClass: '!ps-4 p-[0.95rem] text-center border-e border-dashed border-defaultborder dark:border-defaultborder/10'
    },
    {
      label: 'Desktop',
      value: '1,267',
      legendClass: 'desktop',
      containerClass: 'p-[0.95rem] text-center border-e border-dashed border-defaultborder dark:border-defaultborder/10'
    },
    {
      label: 'Laptop',
      value: '1,153',
      legendClass: 'laptop',
      containerClass: 'p-[0.95rem] text-center border-e border-dashed border-defaultborder dark:border-defaultborder/10'
    },
    {
      label: 'Tablet',
      value: '679',
      legendClass: 'tablet',
      containerClass: '!pe-4 p-[0.95rem] text-center'
    }
  ];

  dealStats = [
    { title: 'Successful Deals', count: '987 deals', liClass: 'primary' },
    { title: 'Pending Deals', count: '1,073 deals', liClass: 'info' },
    { title: 'Rejected Deals', count: '1,674 deals', liClass: 'warning' },
    { title: 'Upcoming Deals', count: '921 deals', liClass: 'success' }
  ];
}


